执行JavaScript“在后台”

问题描述:

您是否对以下问题有任何经验:JavaScript必须运行数百次性能密集型函数调用,这些函数调用不能被忽略并导致浏览器感觉崩溃几秒钟(例如,不滚动和点击)?例如:想象一下500次调用获取元素高度,然后进行数百次DOM修改,例如设置类等 不幸的是,没有办法避免性能密集型任务。网络工作者可能是一种方法,但他们得不到很好的支持(IE ......)。我正在考虑基于超时或回调的逐步呈现,让浏览器有时间做些事情。你有什么经验可以分享吗?执行JavaScript“在后台”

问候

这是我能在这种情况下建议:

  1. 再次检查代码。尝试按照建议应用一些标准优化,例如减少查找,使DOM修改脱机(例如,使用document.createDocumentFragment()...)。使用DOM片段只能以有限的方式工作。检索元素高度并执行复杂的格式化将不够用。
  2. 如果1.不能解决问题,请创建按需运行的渲染解决方案,例如由滚动事件触发。或者:逐步渲染,让浏览器有时间在两者之间做些事情,例如点击一个按钮或滚动。

简短的例子一步一步在2:

var elt = $(...); 
function timeConsumingRendering() { 

    // some rendering here related to the element "elt" 

    elt = elt.next(); 
    window.setTimeout((function(elt){ 
     return timeConsumingRendering; 
    })(elt)); 
} 
// start 
timeConsumingRendering(); 

看看这个话题,这是关系到你的问题的一些事情。

How to improve the performance of your java script in your page?

+0

那么渲染,这可能是与渲染的常见问题很好的解决方案。就我而言,我认为这可能不能完全解决问题。这就是为什么我要寻找“在后台一步一步渲染”。滚动后大部分呈现的元素都将可见。 – Bernd

如果你做那么多的DOM操作,你应该克隆问题或DOM本身的元素,做一个缓存版本的更改,然后更换整个婷一气呵成或较大的部分,而不是当时的一个元素。

什么需要时间不是很多的计算和功能等,但DOM操作本身,只做一次,或几次在部分,将大大提高你在做什么的速度。

据我所知网络工作人员并不是真正用于DOM操作,我不认为在使用它们方面会有很多优势,因为问题可能是您正在更改一个垃圾而不是在一批中将它们全部替换为DOM。

+0

在我的情况下,它实际上是大约70%的时间消耗jQuery.height()方法。另一次是DOM操作......在碎片中执行所有离线操作并不能完全解决问题。这就是为什么我正在寻找“一步一步”的解决方案。 – Bernd