最佳的服务器API和客户端JavaScript交互方法？

Question

目前，我正在使用setTimeout()来暂停一个大型列表上的for循环，以便我可以向页面添加一些样式。例如，

例如：http://imdbnator.com/process?id=wtf&redirect=false

我使用setTimeout的原因：

我使用setTimeout()来添加图像、文本和CSS进度条(为什么进度条不像文本那样动态改变?2)。

显然，正如你所看到的，用户只是浏览页面并悬停在几个图像上就很痛苦。它变得非常卡顿。有没有什么解决方法？

我的FOR循环：

每个for循环在后台对PHP API进行一次ajax请求。这肯定会影响效率，但其他网站是如何做到如此优雅的呢？我的意思是，我见过网站在制作API请求时不需要用户干预就能显示漂亮的加载图像。而当我尝试做类似的事情时，我每次都要设置超时。

难道他们使用更好的服务器-客户端交互语言，如我所听说的node.js吗？

此外，我考虑了一些替代方案，但遇到了其他问题。如果你能帮我解决每个可能的替代方案，我将非常感激。

方法1：

与其通过jQuery向我的PHP API发出AJAX调用，不如完全使用服务器端脚本。但是，我遇到的问题是我无法制作一个良好的客户端页面(和当前页面一样)，以便在处理列表中的每个项目后更新进度条并添加动态图像。或者这是可能的吗？

方法2：(已编辑)

像下面的一个有用的答案一样，我认为最大的问题是服务器API和客户端交互。他建议的Websockets对我来说看起来很有前途。它们一定比setTimeout更好吗？比如说，如果我用Websocket替换当前的1000个AJAX请求，时间上会有显著的差异吗？

另外，如果除了AJAX调用之外还有其他更好的方法，我会很感激。

专业网站是如何处理流畅的服务器和客户端交互的？

编辑1：请解释一下专业网站（例如http://www.cleartrip.com在请求飞行详情时）如何提供平滑的客户端处理并处理服务器端。 编辑2：正如@Syd所建议的那样。这正是我正在寻找的内容。我认为当前客户端和服务器交互中存在很多延迟。Websockets似乎可以解决这个问题。除了标准的AJAX之外，还有哪些其他/最佳方法可以改善服务器端交互？

- user2516837

---

我正在使用AJAX在服务器端运行一些代码并返回到客户端，而不是用于获取图像。 - user2516837

检查一下。你正在为一个电影制作同步的ajax请求，这是非常糟糕的。但是对于10-100个电影，必须使用异步请求。同步ajax会阻塞代码的执行。 - befzz

更新后端。每个请求应返回10-1000部电影，而不仅仅是一部。HTTP连接成本太高。 - befzz

是的，我想这是一个解决方法。但是我需要将我的前端Javascript API转换为PHP，这很麻烦。因此，我正在寻找一种解决方法。 - user2516837

此外，由于我的API存在多种原因，这里不会进行异步调用。所以尽管我已经考虑过这一点，但那肯定行不通。谢谢！ - user2516837

Answer 1

您的第一个链接对我来说无法使用，但是如果我理解你的总体问题，我将尝试解释一些可能有助于您的事情。

首先，在您的主UI线程中具有需要处理大量数据的同步调用是不好的，因为用户体验可能会受到很大影响。有关参考，您可能需要查看“Is it feasible to do an AJAX request from a Web Worker？"

如果我理解正确，您想根据事件按需加载一些数据。 在这里，您可能需要坐下来思考什么是您需求的最佳事件，每隔一段时间进行ajax请求是非常不同的，特别是当您有很多流量时。此外，您可能需要在初始化下一个请求之前检查上一个请求是否已完成（虽然在某些情况下可能不需要）。如果您想创建链接的异步代码执行而不会遇到JavaScript“毁灭金字塔”效应和混乱的代码，请查看async.js。

此外，您可能需要在实际请求之前“验证 - 停止”事件。例如，假设用户触发了“mouseenter”，您不应该只触发ajax调用。屏住呼吸，使用setTimeout，并检查用户是否在接下来的250毫秒内触发了任何其他“mouseenter”事件，这将使您的服务器得以喘息。或在基于滚动加载内容的实现中。如果用户像狂人一样滚动，您不应该触发事件。因此，请验证事件。

还有循环和迭代，我们都知道，如果该死的循环太长并且执行繁重的工作，则可能会出现意外结果。为了克服这一问题，您可能需要查看定时循环（请参阅下面的代码片段）。基本上是在x时间后中断并在一段时间后继续的循环。以下是一些帮助我完成three.js项目的参考资料。“optimizing-three-dot-js-performance-simulating-tens-of-thousands-of-independent-moving-objects”和“Timed array processing in JavaScript"。

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
    var todo = items.concat();   //create a clone of the original

    setTimeout(function(){

        var start = +new Date();

        do {
             process.call(context, todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));

        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

cleartip.com可能会使用其中一些技术，据我所见，它在访问页面时获取了一大块数据，然后在滚动时获取其他块。这里的诀窍是在用户到达页面底部之前稍早地发送请求，以提供平稳的体验。关于左侧过滤器，它们只过滤浏览器中已有的数据，不再进行更多请求。因此，您可以获取并保留类似缓存的东西（在其他情况下，例如实时数据源等，缓存可能不需要）。

最后，如果您对进一步阅读和减少数据交易方面的开销感兴趣，可以看看“WebSockets”。

- 0x_Anakin

---

谢谢！我认为Websockets是我一直在寻找的东西。我觉得当前客户端和服务器互动中存在很多延迟。Websockets似乎是解决这个问题的方法。除了标准的AJAX，还有哪些其他/最佳方法可以改善服务器和客户端之间的交互？ - user2516837

@SaiKrishnaDeep 虽然这是另一个问题，但现在你已经掌握了ajax和websockets。还有一些库可以更有效地处理客户端与服务器之间的通信，以及各种传输方式搜索socket.io（虽然它是一个nodejs的工具）。在我的项目中（关于服务器端API），我尝试避免多个数据库交互，如果可能的话进行缓存，以最小化和高效的方式创建数据响应，并将渲染留给客户端。此外，您还可以在客户端本地缓存响应，时间很短。 - 0x_Anakin

不要忘记，仅仅几年前，网页需要重新加载才能显示新内容 :P - 0x_Anakin

Answer 2

您必须使用异步 AJAX 调用。目前，当进行 HTTP ajax 请求时，用户交互被阻塞。

问：“像 cleartrip.com 这样的专业网站在处理服务器端时如何提供平滑的客户端体验？”

答：通过使用异步 AJAX 调用。

- tomtastico