Javascript Chrome时间表中的JS瓶颈

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

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

大型图像链接：

如果您看到具有此代码的

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

对于瓶颈，函数给我这样一个警告到底是怎么回事？我看不到任何其他更好的解决方案

---

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

在浏览器中，从DOM读写的速度天生就很慢。尼古拉斯·扎卡斯在他的书中在第三章详细讨论了这一点。他指出，加速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次）和写入两次，但是您的写入也被分组在一起，浏览器可以在回流过程中批处理在一起，而不是被计算逻辑分开。

除非您认为您的网站性能正在成为一个问题，否则您不需要解决它。

setCenter

是否在许多元素上调用，以及在实际的常见操作中调用？时间线显示它花了4毫秒，所以目前看起来并不是什么问题，因此是一个警告而不是一个错误。如果可能的话，你可以考虑使用CSS找到一个更好的定居点方法。但是我不认为有CSS解决方案，因为JS填充DIV，因此，我需要先获取div的尺寸，然后再将其居中…但无效布局是什么意思？

offsetHeight

和

offsetWidth

使浏览器重新计算布局，以确保获得正确的值。这是否真的是一个问题，我不能说。有没有更好的解决办法来解决远视等问题？@FelixKling获取divs样式的宽度和边距/填充并手动计算会不会减少导致问题的可能性？啊，我明白了，虽然是远视，但它不满意，我应该通过得到它的填充物/边距并进行计算来计算它的真实偏移量吗？可能的话，我会尝试一下。我可以告诉你的是，每次你检查其中一个值（offsetHeight、offsetWidth、clientHeight、clientWidth、scrollHeight、scrollWidth）时，它都会强制浏览器回流。是的，我认为JSPerf是正确的！：）谢谢你的信息！