Chrome时间轴中的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中详细讨论了第3章中的这一点。加速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次）并写入两次，但您的写入也被组合在一起，浏览器可以在回流过程中一起批处理，而不是由计算逻辑分开。