javascript - 当我使用 jquery 更改 dom 中的元素时，我真的应该担心多少

Question

在 dom 中切换某些内容之前，我应该担心并检查多少内容。例如，我有 2 li，当按下其中一个时，它应该改变颜色，而他的 sibling 应该改变为其他颜色。我真的应该关心检查他的 sibling 是否已经达到了应有的颜色吗？代码在这里”

$(document).ready(function(){
var $header= $(".header");
var $list = $header.find("ul a");
var $li= $list.find("li");
function changeColor()
    {
        var lightblue = '#A3A3F3';
        var darkblue = '#140C49';
        var white = '#000000';
        $(this).css('background-color',darkblue).css('color','white');
        $(this).siblings().css('backgroundcolor',lightblue).css('color','black');
    }
$li.on('click',changeColor);
});

即使我有 10 个 lis...Jquery 真的会压缩计算机吗？

Answer 1

不要担心 DOM 更改是否对您的计算机来说太大(事实并非如此)，而是尝试使您的代码更具可读性。

使用 CSS 类而不是在 Javascript 中定义所有样式属性将使您的函数更容易理解。

$(function () {
    function markActive() {
        $(this).closest(".header").find("li.active").removeClass("active");
        $(this).addClass("active");    
    }
    
    $(".header").on("click", "li", markActive);

    $("#timing").click(function () {
        var $lis = $(".header li"), i, t = Date.now();
        
        for (i = 0; i < 10000; i++) {
            $lis.each(markActive);
        }
        console.log("done (10,000 x 4 iterations in " + (Date.now() - t) + " ms)");
    });
});

.header ul {
    list-style: none; margin: 0; padding: 0;
}
.header li {
    background-color: #A3A3F3;
    color: black;
    float: left; width: 50px; margin: 2px; padding: 3px; cursor: pointer;
}
.header li.active {
    background-color: #140C49;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

<button id="timing">Timing</button>

为了说明一点，我添加了一个小的计时功能。在我的机器上它运行 markActive在 900 毫秒内运行 40,000 次，每次标记不同的 <li>一样活跃。每个函数调用大约需要 22 微秒 (!)。

你的值会有点不同，但重要的是 - 在 jQuery 中进行简单的 DOM 遍历和简单的 DOM 更改只需要很少的时间。

担心每次迭代需要花费大量时间的事情。眨眼的时间需要300微秒。任何小于 50 毫秒的事物都不会被人类真正注意到。在 50 毫秒内，我们的函数运行了 2,000 多次。我说知道我可以进一步优化代码，轻松使其速度至少提高两倍。 这并不重要。

测量并优化代码中实际较慢的部分。