當我使用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中的元素時，我應該擔心多少

回答

相關問題