javascript - jQuery 样式重应用效率

Question

这个问题部分依赖于对 jQuery 内部工作原理的了解。

假设我有一个垂直溢出的页面，允许用户向下滚动，我的 JS 中有以下代码:

$(document).scroll(function() {
    var y = $(document).scrollTop();
    if (y > 500) {
        $("body").css("background-color", "red");
    }
    else {
        $("body").css("background-color", "blue");
    }
});

这工作得很好。但是，它可以像这样修改:

var isRed = false;
$(document).scroll(function() {
    var y = $(document).scrollTop();
    if (y > 500) {
        if (!isRed) {
             $("body").css("background-color", "red");
             isRed = true;
        }
    }
    else {
        if (isRed) {
             $("body").css("background-color", "blue");
             isRed = false;
        }
    }
});

有理由选择第二段代码而不是第一段代码吗？如果我使用第一段代码，jQuery 会在每次触发滚动事件时一遍又一遍地应用样式吗？

我已经习惯了 React 的工作方式，只更新每次渲染时发生变化的内容。 jQuery 是否包含这样的功能？

这两段代码完成同样的事情。附加的 isRed 条件使第二个版本的代码更加冗长和复杂，但它可能会大大提高效率。它提供任何这样的好处吗？如果是这样，那么使用它而不是第一个是有意义的。

Answer 1

Is there a reason to choose the second bit of code over the first one?

是的，如果您遇到滚动性能问题。否则，是否重新应用样式都没有关系。

Were I to use the first bit of code, would jQuery apply the style over and over again every time scroll event fired?

在每个滚动事件中，当您执行 $(body).css("background-color", "red") 时，jQuery 需要:

1. 创建一个新对象

2. 确定您传递的字符串是一个选择器，而不是 HTML

3. 检查选择器是否包含 jQuery 扩展

4. 查询选择器的 DOM

5. 构建结果的单项数组

6. 有效地循环遍历单项数组:

   element.style.backgroundColor = "red";
   

如果颜色与已经存在的颜色匹配，浏览器可能会忽略它。

如果您想在不使代码更复杂的情况下为 jQuery 省去一些麻烦，请为其提供 document.body 以供其使用，这样它就可以跳过第 2-4 步。您还可以稍微简化代码:

$(document).scroll(function() {
    var y = $(document).scrollTop();
    $(document.body).css("background-color", y > 500 ? "red" : "blue");
});

或者如果您确实想完全优化调用:

(function() { // To avoid making `lastColor` a global
    var lastColor;
    $(document).scroll(function() {
        var y = $(document).scrollTop();
        var color = y > 500 ? "red" : "blue";
        if (color !== lastColor) {
            lastColor = color;
            document.body.style.color = color;
        }
    });
})();

请注意，您不能将 color 与 document.body.style.color 进行比较，它们可能(通常)采用不同的格式。