2

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

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

在此处输入图像描述

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;
}

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

有人可以解释我需要做什么来解决这个问题吗？

4

1 回答 1

2

在浏览器中，从 DOM 读取和写入本来就很慢。Nicholas Zakas 在他的《高性能 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 次）并写入两次，但是您的写入也被分组在一起，浏览器可以在回流过程中将它们一起批处理，而不是被计算逻辑分开。

于 2013-06-19T00:10:25.397 回答