javascript - Chrome Timeline 中的 JS 瓶颈

Question

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

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

大图链接: /image/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 读取和写入本质上很慢。尼古拉斯·扎卡斯在他的书中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 次)并写入两次，但您的写入也被分组在一起，浏览器可以在回流过程中将其批处理在一起，而不是被计算逻辑分开。