jQuery / Javascript框架效率

Question

我最新的項目是使用javascript框架（jQuery），以及一些插件（驗證，jquery-ui，datepicker，facebox等）來幫助創建現代Web應用程序。

我現在發現頁面加載速度比以前慢。 經過一些js分析（感謝VS2010！），似乎很多時間都花在了框架內部的處理上。

現在，我了解ui工具越復雜，需要完成的處理越多。 該項目尚未進入大型階段，我認為這將是平均職能。 在這個階段，我可以看到它的伸縮性不好。

我注意到諸如jQuery中的“ each”命令之類的事情需要花費大量的處理時間。

其他人是否使用JS框架經歷了一些額外的延遲？ 如何最小化它們對頁面性能的影響？ 是否有使用JS框架實施的最佳實踐？

謝謝

Answer 1

我個人的看法是使用有意義且使生活更輕松的框架方法和工具，例如選擇器和解決跨瀏覽器的怪癖，並在不需要使用框架方法的地方使用普通的原始JavaScript，例如，在簡單的循環中。

我將檢查並仔細檢查您使用該框架的代碼，以確保其性能良好。 以性能低下的方式使用框架太容易了，有時只有在對其進行概要分析后才發現它：)

框架確實引入了額外的延遲，因為通常使用入口點函數來執行它們會導致執行許多功能。

編輯：

關於使用jQuery的一些一般要點：

1.如果要多次使用jQuery對象，請在局部變量中緩存它們。 查詢DOM是一項相對昂貴的操作，因此應盡可能少地執行。 如果您有相關的選擇器，請看一下執行廣泛的選擇，然后使用諸如find() ， filter() next() ， prev()等方法對集合進行過濾，以獲取您本來會使用的相關元素選擇器函數獲取。

2.在函數內部，不要不必要地將對象包裝在jQuery對象中。 如果存在跨瀏覽器的方法來訪問可靠的對象屬性值，請使用該方法。 例如，文本輸入HTMLElement的value屬性

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 }); 

3.盡量避免在只使用一小部分功能的情況下添加大腳本文件。 在頁面加載時，可能有很多時間花在解析和執行代碼上，這些都是您永遠不會使用的！ 如果可能，僅提取所需的相關代碼。 我知道這可能很難並且並非總是可能的，特別是在版本控制方面，但是還是值得指出的。