Question

在我用dom换东西之前，我应该多担心和检查一下。例如，我有2个li当按下一个时，它应该改变颜色，他的兄弟姐妹应该改变为其他颜色。我真的应该关心检查他的兄弟姐妹是否已经是他们应该的颜色？在这里编码“

$(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>

为了说明一点，我添加了一个小的计时功能。在我的机器上，它在900毫秒内运行markActive功能40,000次，每次标记不同的<li>为活动状态。每个函数调用约为22微秒（！）。

您的值会有所不同，但重要的是 - 在jQuery中进行简单的DOM遍历和简单的DOM更改需要花费不大的时间。

担心每次迭代需要花费大量时间的事情。眨眼间需要300微秒。小于50毫秒的一切都不是人类真正注意到的。在50ms内，我们的功能运行了2000多次。而且我说知道我可以更多地优化代码，轻松地使其成为至少的两倍。 没关系。

测量然后优化代码的实际慢速部分。

当我使用jquery更改dom

1 个答案: