HTML和JavaScript性能

Question

我有一個網站，這是緩慢的。服務器在每次請求時響應大約2 - 300毫秒，但瀏覽器需要1.5 - 2秒才能準備好頁面。

通過嘗試禁用javascript和CSS，我確定它是瀏覽器的處理，它佔用了大部分時間。

使用Firebug，我發現DOMContentLoaded事件在從服務器接收數據約0.5秒到1秒後似乎會觸發，並且「load」事件在另一半秒之後觸發。

使用Firebug的分析器，我發現JavaScript執行大約需要250 ms。

所以，我的問題是：

• 什麼是瀏覽器在剩下的時間做的，當使用Javascript執行需要250毫秒，但它需要一秒鐘之前的頁面已經準備好？
• DOMContentLoaded和負載事件之間會發生什麼
• 什麼是最好的辦法對我來說，性能優化這樣一個頁面的客戶端？

Answer 1

不僅加載，但頁面渲染需要時間。

您可以通過很多方法來優化性能，您可以使用諸如YSlow和PageSpeed之類的工具來進一步分析頁面並確定可能值得做的事情。

不要也來看看的rules史蒂夫Souders的在他的著作高性能網站概述：

1. 減少HTTP請求
2. 使用內容傳送網絡
3. 添加一個Expires頭
4. Gzip組件
5. 將樣式表放在頂部
6. 將腳本放在最下面
7. 避免CSS表達式
8. 使JavaScript和CSS外部
9. 減少DNS查找
10. 壓縮JavaScript
11. 避免重定向
12. 刪除重複的腳本
13. 配置的ETag
14. 讓AJAX可緩存

還有一本名爲Even Faster Web Sites的後續書籍。您還可以在他的blog上發佈的書中找到許多提示。

另一個有用的資源是雅虎的Best Practices for Speeding Up Your Web Site。

Answer 2

要提高性能，你可以嘗試使用Javascript代碼極小（例如，見這裏：http://geekswithblogs.net/lbugnion/archive/2007/02/23/107120.aspx），反正altough有用的，我不認爲你會得到這樣的戲劇性的速度提高。

Answer 3

這是一個非常寬泛的問題。有很多書籍都涉及客戶端渲染性能。但總的來說，

• 你想盡可能少的http請求。將所有javascript合併到一個文件中，將所有css合併爲一個，並將儘可能多的圖片合併到一個文件中（請參閱spriteme）
• 要使這些請求儘可能小。縮小和gzip你的腳本。爲靜態內容添加一個內容過期頭部設置爲遠期日期
• 有公共CDN，例如來自谷歌，允許您將常見腳本（如jQuery庫）熱鏈接到谷歌服務器。這意味着很多訪問者已經將這些文件緩存起來
• JavaScript的執行通常是一個很大的瓶頸。您希望儘可能多地延遲腳本加載。你的CSS應該總是被包含在你的頭文件中，但是很多JavaScript可以被包含在頁面的底部。在這些情況下，頁面上會出現迅速沉綿就會有延遲domready中觸發

至於domready中和頁面加載事件之間的延遲之前，這是在圖像（和潛在的視頻）被加載，並且可能正在執行javascrpit。

檢出Firebug的插件YSlow。

Answer 4

添加到以前的答案， 不包括標題本身的所有Javascript文件....這隻會延遲DOM加載。在包含文件之前拆分文件，並將其包含在要運行的主體中的相應元素附近。

當然你可以在頭文件中包含JS庫的縮小版本。

JavaScript中用於變量作用域的閉包方法的使用...以及最小數量的全局變量的使用對於inc中的性能是重要的。

並使用google's closure compiler或類似的東西來縮小你的js。