javascript - 最佳服务器 API 和客户端 Javascript 交互方法？

Question

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

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

我使用 setTimeOut 的目的:

我使用 setTimeout() 添加图像、文本和 css 进度条 ( Why doesn't Progress Bar dynamically change unlike Text? 2 )。

很明显，如您所见，用户浏览页面并将鼠标悬停在几张图片上是非常痛苦的。它变得非常迟钝。有任何解决方法吗？

我的 FOR 循环:

每个 for 循环在后台向 PHP API 发出 ajax 请求。这肯定会降低我的效率，但所有其他网站如何以如此优雅的方式实现它？我的意思是，我看到网站在发出 API 请求时显示了一个漂亮的加载图像，没有用户干扰。当我尝试做类似的事情时，我每次都设置超时。

他们是否使用了更好的服务器-客户端交互语言，例如我听说过的 node.js？

此外，我想到了一些替代方案，但遇到了其他问题。如果您能就这些可能的替代方案中的每一个提供帮助，我将不胜感激。

方法一:

不是通过 jQuery 对我的 PHP API 进行 AJAX 调用，而是完全可以执行一个完整的服务器端脚本。但是，我遇到的问题是我无法制作一个好的客户端页面(如在我的当前页面中)，它会在处理列表中的每个元素后更新进度条并添加动态图像。或者这可能吗？

方法 2:(已编辑)

就像下面的一个有用答案一样，我认为最大的问题是服务器 API 和客户端交互。他建议的 Websockets 对我来说很有希望。它们一定是比 setTimeout 更好的修复方法吗？假设我将当前的 1000 个 AJAX 请求替换为 websocket，是否存在明显的时间差异？

此外，如果除了 websocket 之外还有比 AJAX 调用更好的东西，我将不胜感激。

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

编辑 1:请解释专业网站(例如 http://www.cleartrip.com，当您请求航类详细信息时)如何在处理服务器端时提供顺畅的客户端。

编辑 2:正如@Syd 建议的那样。这就是我正在寻找的东西。我认为我当前的客户端和服务器交互有很多延迟。 Websockets 似乎可以解决这个问题。除了标准 AJAX 之外，改进服务器客户端交互的其他/最佳方法是什么？

Answer 1

你的第一个链接对我不起作用，但如果我理解你的整体问题，我会尝试解释一些可能对你有帮助的事情。

首先，同步调用需要在主 ui 线程中处理的大量数据是不好的，因为用户体验可能会受到很大影响。作为引用，您可能想看看“Is it feasible to do an AJAX request from a Web Worker?”

如果我理解正确，您想根据事件按需加载一些数据。在这里您可能想坐下来思考什么是最适合您需要的事件，每隔一段时间发出一个 ajax 请求是完全不同的，尤其是当您有很多流量时。此外，您可能想在初始化下一个请求之前检查您之前的请求是否已完成(尽管在某些情况下可能不需要)。看看async.js如果您想创建链式异步代码执行，而无需面对 javascript 的“厄运金字塔”效应和困惑的代码。

此外，您可能希望在发出实际请求之前“验证 - 停止”事件。例如，假设用户触发了“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”。