Question

do you have any experiences with the following problem: JavaScript has to run hundreds of performance intensive function calls which cannot be skipped and causing the browser to feel crashed for a few seconds (e.g. no scrolling and clicking)? Example: Imagine 500 calls for getting an elements height and then doing hundreds of DOM modifications, e.g. setting classes etc. Unfortunately there is no way to avoid the performance intensive tasks. Web workers might be an approach, but they are not very well supported (IE...). I m thinking of a timeout or callback based step by step rendering giving the browser time to do something in between. Do you have any experiences you can share on this?

最佳方面

Answer 1

我在此建议如下:

Checking the code again. Try to apply some standard optimisations as suggested, e.g. reducing lookups, making DOM modifications offline (e.g. with document.createDocumentFragment()...). Working with DOM fragments only works in a limited way. Retrieving element height and doing complex formating won t work sufficient.
If 1. does not solve the problem create a rendering solution running on demand, e.g. triggered by a scroll event. Or: Render step by step with timeouts to give the browser time to do something in between, e.g. clicking a button or scrolling.

以步骤为例,逐步递增( 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();

Answer 2

看看这个话题这是与你的问题有关的事情

"http://jqfaq.com/ how-to-improve-the-proper-for-your-java-script-in-your-page" rel=“无跟踪” 如何改进您页面中的java脚本的性能?

Answer 3

如果您做了如此多的 DOM 操作, 您也许应该克隆相关元素或 DOM 本身, 并对缓存版本进行修改, 然后将整个端点替换成一个或更大的部分, 而不是当时的一个元素。

计算和功能等需要时间,但管理部操纵本身,只做一次,或者在部分中做几次,将大大加快你的工作速度。

据我所知,网络工作者并不真正用于DOM操纵,我认为使用这些网络没有多大优势,因为问题可能是,你正在将一大堆元素一个一个地换成一个,而不是将DOM的所有元素都换成一组。

友情链接