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

Question

How much should I worry and checking things before I switch something in dom. for example I have 2 li's When one is pressed then it should change color and his siblings should change to other color. Should I really be concerned to check if his siblings are already in the color they should be?? code its here"

$(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);
});

Even If i had like 10 lis... Is Jquery really compressing the computer.

Answer 1

Instead of worrying if your DOM changes might be too much for your computer (they are not), try to make your code more readable.

Working with CSS classes instead of defining all style properties in Javascript will make your function a lot easier to understand.

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

To make a point, I've added a small timing function. On my machine it runs the markActive function 40,000 times in 900ms, each time marking a different <li> as active. That's about 22 microseconds (!) per function call.

Your values will be a bit different, but the important point is - it takes insignificant time to do simple DOM traversal and simple DOM changes in jQuery.

Worry about stuff that takes noticeable time per iteration. The blink of an eye takes 300 microseconds. Everything less than 50ms is not really noticeable by humans. In 50ms our function has run more than 2,000 times. And I say that knowing that I could optimize the code even more, easily making it twice as fast at least . It just doesn't matter.

Measure and then optimize the actual slow parts of your code.