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

在我切换dom中的某些内容之前，应该担心和检查多少东西。例如我有2个li当按一个时，它应该改变颜色，他的兄弟姐妹应该改变为其他颜色。我真的应该关心检查他的兄弟姐妹是否已经在颜色上，他们应该是？其代码在这里”当我使用jquery更改dom中的元素时，我应该担心多少

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

即使我有一个像十里...是jQuery的真正压缩计算机。

来源

2017-04-08 Tonys Ansonī Misirgis

不用担心jQuery，这是它的目的。做客户端操作，如更改DOM和与服务器端脚本进行通信。您不必检查li是否已经具有背景颜色，因为jQuery会非常快速地切换。最好你可以检查它，当然，但你不必。 jQuery几乎不会影响性能。除非你做了很多（很多）行动。 –

只有在下一个操作取决于它是什么的情况下才检查值，如果不是，则只需更改即可，比首先检查然后更改更快 – LGSon

您担心错误的事情。你的计算机可以做这种类型的操作，每秒几千甚至上万次*。您的代码可以在其他方面得到改进。 – Tomalak

而是担心，如果你的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微秒。小于50ms的一切都不是人类真正注意到的。在50ms内，我们的功能已经超过了2000次。我说，知道我可以更好地优化代码，轻松地使它快两倍至少。 它只是没关系。

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

来源

2017-04-08 13:23:56 Tomalak

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

回答

相关问题