Javascript和風格優化

我正在從事Web應用程序，它現在非常慢。在Chrome瀏覽器中查看網絡監視器後，我看到它加載了數十種樣式和腳本（可能超過150個）。這很荒謬，所以我編寫了一個PHP類來縮小我的腳本和樣式並緩存它們。它正在工作，速度更好！Javascript和風格優化

我只是想知道，什麼是最好的方式來服務縮小的JS？打印<script>標籤之間的所有JS（以及<style>標籤之間的CSS）或者我應該將所有內容放在一個文件中，比如說我將打印它並將頭文件設置爲JavaScript的js_loader.php是否更好？

兩個最終用戶的最快速度是多少？

謝謝！

來源

2013-02-01 Samuel Bolduc

如果你能爲他們服務微細化以及合併成一個單個文件，做到這一點。更多的腳本/鏈接標籤意味着更多的HTTP請求，因此加載速度更慢。特別是當它是關於JS。

閱讀Web Performance Best Practices and Rules主題@http://developer.yahoo.com/yslow/

特別的主題#1 Minimize HTTP Requests，#5 Gzip Components和#11 Minify JavaScript and CSS。至於更多的加載時間真棒，請閱讀#6 Put StyleSheets at the Top和#7 Put Scripts at the Bottom。

從＃7：

引起腳本的問題是，它們阻斷並行下載。 HTTP/1.1規範建議瀏覽器每個主機名並行下載至少兩個組件。如果您從多個主機名提供圖像，則可以同時發生兩個以上的下載。 然而，當腳本正在下載時，瀏覽器將不會啓動任何其他下載，即使是在不同的主機名上。

來源

2013-02-01 17:02:50 RaphaelDDL

謝謝，非常有用！ –

如果您的網站在Apache下運行，並且您有權訪問服務器配置，則可能需要查看mod_pagespeed https://developers.google.com/speed/pagespeed/mod它會自動應用幾種最佳做法，如拉斐爾 – Carl

不錯的卡爾。作爲sam_1421的另一個資源添加，獲取[HTML5 Boilerplate]（http://html5boilerplate.com）的.htaccess文件並閱讀它。對於更好的服務文件，有關於ETag，緩存，MIME類型和其他你可以在你自己的.htaccess（當然，在Apache中運行你的網站）的其他內容有很多興趣的東西（有解釋）。 – RaphaelDDL

當前的一些最好的practies是

負載<style>在<head>早，所以它得到應用早，用戶不會看到「半生不熟」頁
負載<script><body>前關閉

查看HTML5樣板例如

https://github.com/h5bp/html5-boilerplate/blob/master/index.html

切勿使用內嵌JavaScript或CSS，因爲這會增加後續頁面加載的尺寸（相同的代碼被一次又一次地加載中...）

來源

2013-02-01 17:00:59

Javascript和風格優化

回答

相關問題