在Rails項目中將所有JQuery代碼添加到application.js對性能有何影響？

Question

我正在運行一個相當大的Web應用程序，其中包含越來越多的UI拋光和發出AJAX請求的JQuery代碼。

較大的代碼塊存在於自己的專用.js文件中，但是越來越多的頁面（主要是表單）使用少量的JQuery來顯示/隱藏表單元素，修改類等。目前，我將此代碼放入我的主要application.js文件中的$(document).ready()塊。

鑒於此，盡管只有一個或兩個調用與當前頁面相關，但在任何給定的頁面視圖上都會加載application.js並執行此ready()塊中的所有JQuery代碼。 這樣做是否會對性能產生影響，或者實際上可以忽略不計？ 如果涉及性能，那么在大型Rails應用程序中管理這些特定於頁面的JQuery（或實際上任何類型的Javascript）代碼段的推薦替代方法是什么？

盡管被認為是不好的做法，但是簡單地定義僅針對表單部分本身內部的單個表單的 JQuery規則是否更有意義？

Answer 1

我認為您是否擔心客戶端的javascript執行性能？

如果$(document).ready()塊中每頁執行javascript的開銷不是那么高，我很想不用擔心。

但是，您很有可能會有一些重量級的javscript僅在呈現相關表單（或其他頁面元素）后才想運行。

如果是這樣的話，這是一種方法：對於具有需要調用的javascript伙伴功能的每個元素，設置一個內聯標志。

例如

<%= some rails stuff %>
<script type="text/javascript">
   elements_rendered('your_element_name') = true;
</script>

然后在您的$(document).ready()塊中有：

if (elements_rendered('your_element_name'))
    your_function_for_the_element();

我非常確定，如果您想將其概括化，您可以在Rails代碼中包裝這種功能，以在很大程度上實現自動化。

Answer 2

將所有內容都保存在一個文件（application.js）中的優點是，客戶端將緩存該文件，並且它將在隨后的HTTP請求中在本地為它們提供服務。

您可能獲得的性能提升與jQuery代碼本身有關。 具體而言，在搜索稍后要操作的DOM元素時。 jQuery 1.3中的新選擇器引擎Sizzle從右到左解析選擇器，就像瀏覽器解析CSS一樣。 因此，最好嘗試在選擇器查詢的右側盡可能縮小選擇范圍。 jQuery本身也針對#id選擇器進行了優化（跳過Sizzle），這是一個不錯的主意。 因此，執行$（'＃id'）。find（'div'）比執行$（'＃id div'）快得多。 除此之外，大多數適用於Google頁面速​​度的CSS選擇器警告都將適用於jQuery選擇器。

關於頁面特定的js，這是一種實現方法：

在您的布局上添加<%= yield :javascripts %> ，緊接在結束body標簽之前。 然后，您可以在html之后將其添加到視圖中：

<% content_for :javascripts do %>
  <% javascript_tag do %>
    //your js here
  <% end %>
<% end %>

這樣可以保存一個HTTP請求，並使您的視圖行為更接近您的視圖，這是一個勝利，盡管它不會縮小您的JavaScript。 這對我來說是個妥協。

Answer 3

如果將所有$（document）.ready（）塊移動到一個單獨的JS文件，客戶端將只下載一次，每次請求可為它們節省幾kB。 有很多方法可以提高性能並減少負載。 進行檢查： http : //developer.yahoo.com/performance/rules.html和此Firefox擴展： http : //developer.yahoo.com/yslow/help/index.html