Chrome Timeline中的JS瓶颈

Question

我在我的网站上做了一些性能检查，使用时间线我得到了一个关于可能的瓶颈的警告，但并没有真正解释如何解决它。

这是我在时间线上看到的：

​

​

Large image link: http://i.stack.imgur.com/RdzvI.jpg

如果您看到包含以下代码的setCenter函数：

function setCenter(div){    
    var testH = document.getElementById(div).offsetHeight;
    var testW = document.getElementById(div).offsetWidth;
    var height = settings.height;
    var width = settings.width;

    var temp = Math.floor( (height / 2)- ( test / 2 )) + 'px'; 
    document.getElementById(div).style.marginTop = temp;    

    var temp = Math.floor( (width / 2)- (  testW /2 )) + 'px'; 
    document.getElementById(div).style.marginLeft = temp;
}

给我这样一个关于瓶颈的警告的函数到底有什么问题？我看不到任何其他更好的解决方案。

有人能解释一下我需要做些什么来解决这个问题吗？

Answer 1

在浏览器中，从DOM读取和写入本来就很慢。Nicholas Zakas在他的书High Performance Javascript中非常详细地讨论了这一点，在第三章中。他指出，加速DOM交互的一种方法是在一起完成所有的阅读，然后一起完成所有的写作。考虑到这一点，您的函数可能如下所示：

function setCenter(div){
    var div = document.getElementById(div);    // only read this once and store it
    var testH = div.offsetHeight;
    var testW = div.offsetWidth;
    var height = settings.height;
    var width = settings.width;

    // Do some logic
    var marginTop = Math.floor( (height / 2)- ( testH / 2 )) + 'px';
    var marginLeft = Math.floor( (width / 2)- (  testW /2 )) + 'px';  

    // Batch DOM update
    div.style.marginTop = marginTop;
    div.style.marginLeft = marginLeft;
}

现在您只需从DOM读取一次(而不是4次)并写入两次，但您的写入也被分组在一起，浏览器可以在回流过程中将这些分组在一起，而不是通过计算逻辑将它们分开。