时间戳

首页 > 解决方案 > getComputedStyle local vs every time in function Performance

javascript - getComputedStyle local vs every time in function Performance

问题描述

如果我需要在代码中的不同位置多次使用元素的 ComputedStyle，哪一种性能更好。将 ComputedStyle 设为全局变量是好是坏？

在元素移动很多的情况下，全局变量也可以更好地提高性能，但我不需要每次移动时都计算样式，但只有在触发特殊事件时才会在这种情况下计算全局变量中的样式在我不需要的情况下重新计算？

还是仅当我尝试从计算的样式变量中获取值时才开始计算？

使用 getBoundingClientRect 时也会出现这种情况吗？

标签： javascript

解决方案

根据规范，它是一个活动对象，因此它会在您请求该属性时获得该属性，而不是在您获得该对象时获得该属性。

我们也可以通过实验验证：

var example = document.getElementById("example");
var style = getComputedStyle(example);
console.log("A: color = " + style.color);
example.className = "green";
console.log("B: color = " + style.color);
.green {
    color: green;
 }
<div id="example">Lorem ipsum</div>

输出：

答：颜色 = rgb(0, 0, 0)
B: 颜色 = RGB(0, 128, 0)

在 Chrome、Firefox、IE11 和 Edge 上。请注意添加类如何更改属性值。

既然如此，我怀疑getComputedStyle它真的很快，无论你是保留对象还是重复调用来获取它，都没有太大的区别。但与往常一样，当性能至关重要时（在这种情况下真的很重要吗？），测试您的实际代码的性能。

将 ComputedStyle 设为全局变量是好是坏？

我强烈建议尽可能避免实际的全局变量。在浏览器上，全局命名空间非常拥挤，很容易发生冲突。（例如：除了字符串之外，您不能调用全局name并为其分配任何内容，因为它与window.name属性冲突，该属性是窗口的名称，并且始终是字符串。）几乎可以完全避免他们。但是，如果您需要它们，您可以拥有对您的代码是全局的变量。例如，在下面，对于示例中example的代码是全局的，但不是实际的全局变量：

// Scoping function
(function() {
    // `example` is "global" to this code
    var example = 21;
    
    function foo() {
        console.log(example);
    }

    
    function bar() {
        example *= 2;
    }
    
    bar();
    foo();
})();

一种更现代的方式是使用模块。真正的 JavaScript 模块在现代 Web 浏览器中工作，您可以使用 Webpack 或 Rollup 等捆绑器来处理为旧版浏览器创建捆绑包。

推荐阅读