搜索範圍與訪問DOM - 速度性能

-1

我正在學習javaScript，但仍存在許多疑問。我已經試圖搜索這一個，但也許我使用了錯誤的單詞。我總是拖延這一點，但由於我正在研究的項目規模比我預期的要大，我需要澄清。搜索範圍與訪問DOM - 速度性能

我知道，在搜索範圍和訪問Dom的速度方面的成本。但我不知道哪一個比另一個慢。

它更快...

一）上去作用域鏈來獲取變量與jQuery對象，但去到DOM只有一次

或

b）上不去作用域鏈，但去到DOM再次

var $el = $("#el"); 

//$el is used on this scope (and so, the question makes some sense:)) 

$el (...) 

// some or lot's of code 

function a() { 

    // some or lot's of code 

    function b(){ 

     // some or lot's of code 

     function c() { 

     a) $el (...) 
     b) var $el = $("#el"); 
      $el (...) 

     } 

    } 

}

來源

2017-03-29 viery365

它真的不清楚你在問什麼，或者什麼值得關注的是在這裏。如果你能提供一個真實世界的例子，而不是這個提取的邏輯，可能會更好。 –

你的問題不是很清楚，但總的來說：訪問變量很快，調用函數來搜索DOM中的東西很慢。 – Barmar

將DOM元素分配給變量一次比反覆執行要好。 – Barmar

選項A更快。（聲明頂部的變量）

當你需要更多的$("#el")那麼一旦它存儲爲一個變量。多次使用DOM很慢。

格雷格·弗蘭科解釋了一些最佳實踐here。請參見幻燈片10-13瞭解您的問題。

來源

2017-03-29 08:04:55

謝謝:)只是爲了擺脫所有的疑慮。假設我有100個訪問DOM的變量。我可以使用第一個作用域事先定義所有這些「DOM變量」，然後在所有函數內部始終訪問這些變量？這是一個好習慣嗎？ – viery365

是的，當訪問一個DOM元素多於一次時，你應該爲它聲明一個變量。 –

雖然你的問題是非常不清楚，也許我可以用一般的經驗法則回答這個問題：

DOM是slowwwww。如果你可以避免遍歷它，那就這樣做。如果您搜索DOM以查找特定節點，請將該參考存儲在變量中以避免再次搜索DOM。

來源

2017-03-29 08:05:15

謝謝:)只是爲了擺脫所有的疑慮。我可以使用第一個範圍來訪問DOM，想象一下，事先定義所有的DOM變量，然後在所有函數內部始終訪問這些變量？這是一個好習慣嗎？ – viery365

從理論上講，它不可能像那樣工作。您經常會操縱DOM，因此某些元素可能尚不存在，或者您可能會移除您存儲引用的元素。如果你想優化，只需要得到你需要的。如果您需要多次訪問某個元素，請將其引用存儲在一個變量中。另外請注意，全局變量通常不是很好，因此預先獲得所有元素的權衡 –

感謝您的建議:)它們將成爲我的一種指南。 – viery365

如果我不瞭解您的問題，您正在詢問有關訪問jQuery中元素的性能。這裏有一些提示：

每次你必須讓（在你的例子$（「＃報」））引用一個jQuery對象具有運營成本。在性能方面，您應該始終嘗試爲您的需求聲明最小的必要元素。（），parent（），children（），find（））是一個不錯的選擇，但如果你是一些操作要多次使用這些元素，最好用直接選擇器（如$（「＃el-child」）或（「#el .child」））引用它們。
如果你喜歡聲明$ EL = $（「＃報」）一個變種你在它的當前狀態的節點的參考。有時候這個節點會被更新，刪除，重新創建或者其他的東西，而這個引用不會保留它們的trak，所以你必須再次調用這個$ el = $（「＃el」），就像我之前所說的那樣，這取決於你的網站邏輯的工作原理。

注：我的英語很抱歉，我知道這一點都不好嘿嘿

來源

2017-03-29 08:10:32 Diego

謝謝:)你的第三點非常重要。我意識到這一點。爲了擺脫我所有的疑慮，使用你的建議，儘可能多地去DOM，並使用先前的訪問來創建新變量，假設我有100個變量從DOM中獲取元素。在這種情況下，我可以在第一個作用域中定義所有這些變量，然後在函數內部訪問這些變量，而不必再次轉到DOM。這是一個好習慣嗎？在我的項目中，我這樣做了，我只在第一個範圍內訪問DOM，但變量列表變得非常龐大，我從未見過這樣的代碼:) – viery365

如果我必須訪問100個元素，我會讓像定義爲null的東西，並且你訪問它的第一次定義它（你可以做一個函數來檢查和分配一個參數，比如'$ el = checkAndAssign（$ el，'selector'）;'是這樣的函數： '函數checkAndAssign（var，selector）{return var！== null？var：$（'selector'）}}）'但是正如我所說的，如果引用被更新，你必須小心; – Diego

搜索範圍與訪問DOM - 速度性能

回答

相關問題