目前,我正在使用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？
此外,我想到了一些替代方案,但遇到了其他并发症.如果您能帮助我解决这些可能的替代方案,我将不胜感激.
方法1：
我没有通过jQuery对我的PHP API进行AJAX调用,而是完全可以完成一个完整的服务器端脚本.但是,我遇到的问题是我无法创建一个好的客户端页面(如我当前页面中)更新进度条并在处理完每个列表项后添加动态图像.或者这可能吗？
方法2 :(已编辑)
就像下面的有用答案一样,我认为最大的问题是服务器API和客户端交互.他建议的Websockets看起来很有希望.它们必然会比setTimeout更好吗？是否有任何重大的时间差异让我说我将当前的1000个AJAX请求替换为websocket？
此外,如果除了websocket之外还有其他任何东西比AJAX调用更好,我将不胜感激.
专业网站如何通过流媒体服务器和客户端交互来解决问题？
编辑1：请解释专业网站(例如http://www.cleartrip.com请求航班详情时)如何在处理服务器端时提供顺畅的客户端.
编辑2：正如@Syd建议的那样.这是我正在寻找的东西.我认为我当前的客户端和服务器交互有很多延迟. Websockets似乎是一个解决方案.除了标准的AJAX之外,还有哪些其他/最佳方法可以改善服务器cleint交互？
解决方法:
您的第一个链接对我不起作用,但如果我了解您的整体问题,我会尝试解释一些可能对您有帮助的事情.
首先,在主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”.
