jQuery/Javascript框架的效率

Question

我最近的項目是使用JavaScript框架（jQuery），以及一些插件（驗證，jQuery的UI，日期選擇器，facebox，...），以幫助一個現代化的Web應用程序。

我現在發現頁面加載速度比我以前慢。經過一些js分析（感謝VS2010！），似乎很多時候在框架內進行處理。

現在我明白了ui工具越複雜，需要完成的處理越多。該項目還沒有進入一個大的階段，我認爲這將是平均功能。在這個階段，我可以看到它不會很好地擴展。

我注意到像jQuery中的'each'命令需要花費相當多的處理時間。

有沒有人經歷過使用JS框架的額外延遲？ 如何最小化他們對頁面性能的影響？ 是否有使用JS框架實現的最佳實踐？

感謝

Answer 1

我個人的看法是使用該框架的方法和需要它的工具，使生活更輕鬆，例如選擇和解決跨瀏覽器的怪癖，並且使用普通的舊香草的JavaScript不存在需要使用框架方法，例如，在簡單的循環中。

我會檢查並仔細檢查你使用該框架的代碼，以確保它能夠正常工作;在一個表現不佳的框架中使用框架是非常容易的，有時直到一個框架纔會發現這個框架:)

框架確實會引入額外的延遲，因爲通常會有一些函數作爲使用入口點函數來使用它們的結果。

編輯：

一些常規百分點關於使用jQuery：

1.cache您的jQuery對象中的局部變量，如果你打算使用它們不止一次。查詢DOM是一項相對昂貴的操作，因此應儘可能少地執行。如果你有相關的選擇器，看看執行一個廣泛的選擇，然後使用諸如find(),filter()next(),prev()等方法來過濾集合，以獲得您將使用其他選擇器函數獲得的相關元素。

2.函數內部不要將對象包裝在jQuery對象中。如果有跨瀏覽器訪問可靠的對象屬性值的方式，那就使用它。例如，文本輸入的值屬性HTML元素

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

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

3.Try避免增加您只使用一小片的功能，其中較大的腳本文件。在頁面加載中解析和執行代碼可能需要很長時間，而您永遠不會使用該代碼！如果可能，只提取所需的相關代碼。我很欣賞這可能很難並且不總是可能的，特別是在版本控制方面，但值得指出的是。