當我的腳本開始有幾個Jquery選擇器時，如何優化頁面的加載？

-1

我有幾個jQuery選擇器在我的JavaScript的開始。當我的腳本開始有幾個Jquery選擇器時，如何優化頁面的加載？

jQuery('.enter').show(); 
jQuery('.btnsecond').show(); 
jQuery('#id div.my-class').hide(); 
jQuery('.classes p:last').hide();

在頁面的任何重載運行此jQuery代碼...

我認爲其原因的過程中，選擇正確的DOM，該解決方案可以簡化或優化裝載的過程？也許使用Css來定位dom。

謝謝。

來源

2012-05-02 user784083

可以做，以「優化」的唯一的事情，這是使用'的jQuery（ '類頁'）最後（）隱藏（）;'，而不是jQuery的'：。last'選擇。當然，如果這總是在頁面加載中運行，那麼只需使用CSS規則。 –

是的，謝謝。但它只是一個例子，我有很多jQuery來優化每個頁面。 – user784083

jQuery('.enter, .btnsecond').show(); 
jQuery('#id div.my-class, .classes p:last').hide();

來源

2012-05-02 22:56:27 mgraph

按選擇器分組。它是一個很好的提示。謝謝！ – user784083

既然你有這些JavaScript/jQuery的報表沒有應用編程邏輯，以最快的方式應用這些初始條件是隻設置他們的CSS規則的樣式表，而不是用JavaScript。通過這種方式，它們將在頁面顯示之前立即應用，而不是通過JavaScript進行設置，必須等到DOM加載才能運行。

.enter, .btnsecond {display: block;} 
#id div.my-class, .classes p:last {display: none;}

來源

2012-05-02 22:56:38 jfriend00

好的。 CSS更好的原因是它被瀏覽器驅使，並且具有獨立於javascript的過程。將關心這一點。但萬一如果JQuery不是Hide（）或show（）或css（）。如果它的一些啓動狀態取決於一個變量？ – user784083

有一點需要注意的是，IE8或更低版本不支持：上一個沒有像http://selectivizr.com/ – Fostah

@ user784083這樣的polyfill的CSS3選擇器 - 我很抱歉，但我不理解您的評論。你在問一個新問題嗎？ – jfriend00

要添加到mgraphs代碼，您可以在選擇器中指定上下文。含義是指定項目的包含元素，以便它僅在該容器中搜索元素。這減少了dom遍歷。

$exampleContainerDiv = $("#ContainerDivForSelectorsBelowExample"); 
jQuery('.enter, .btnsecond', $exampleContainerDiv).show(); 
jQuery('#id div.my-class, .classes p:last', $exampleContainerDiv).hide();

來源

2012-05-02 23:02:43 Fostah

謝謝。這聽起來不錯。使用上下文而不是find（）是否是一個很好的practive？ – user784083

@ user784083您將使用上下文減少DOM查詢。我通常只使用find（）來查找選擇器結果中的特定元素。 – Fostah

好的，謝謝！將保重！ – user784083

當我的腳本開始有幾個Jquery選擇器時，如何優化頁面的加載？

回答

相關問題