網站性能最佳實踐（乾貨來了）

本文主要介紹一下我在做網站性能分析時候用的工具以及資料，

推薦的工具

1. 基於web的工具

網站需要從Internet能訪問到或者對外網開放

• Google's Page Speed Insights(https://developers.google.com/speed/pagespeed/insights/). 包含移動和桌面端
• http://www.webpagetest.org/ – 能從很多地方和瀏覽器測試，其中包含中國。
• ShowSlow （https://github.com/sergeychernyshev/showslow/wiki）總結很多web性能的工具和方法.

2. 基於瀏覽器的測試工具

• Google's Lighthouse (過去叫audit) tab in Chrome Developer Tools - 這個應該很多人都會用，就不詳細介紹了。

• Performance tab in Chrome Developer Tools ,是研究頁面如何變化的好工具，它顯示了頁面隨時間變化的屏幕截圖（用戶感知的性能），網絡請求，在瀏覽器沒有給定頁面的過程中分解了瀏覽器的操作等。

推薦閱讀

1. 網站資源

• Google's https://developers.google.com/web/fundamentals/performance/why-performance-matters.
• Steve Souders' High Performance Web Site Blog （http://stevesouders.com/）
• Yahoo's Best Practices for Speeding Up Your Web Site （https://developer.yahoo.com/performance/rules.html）– 非常的有名網站優化原則
• Ilya Grigorik's Performance Web Site.（https://www.igvita.com/）
• Can I Use 網站告訴我們哪些瀏覽器有哪些功能（https://caniuse.com/）
• Chrome FrameViewer How-To （http://www.chromium.org/developers/how-tos/trace-event-profiling-tool/using-frameviewer）

2. 書籍

• High Performance Web Sites: 史蒂夫·索德斯（Steve Souders）撰寫的面向前端工程師的基礎知識–應該是每個Web開發人員都必須閱讀的內容。 請注意，某些技術會根據瀏覽器的實現而有所不同。 進行更改之前，請使用網絡跟蹤。.
• Even Faster Web Sites: 史蒂夫·索德斯（Steve Souders）針對Web開發人員的性能最佳實踐–這是高性能網站的後續書籍
• High Performance Browser Networking by Ilya Grigorik - 非常好的客戶端優化書。
• Systems Performance: Brendan Gregg撰寫的Enterprise and Cloud著重於服務器端可擴展性問題。

Tips

• 在Chrome瀏覽器中衡量性能時，請禁用或刪除firebug-lite擴展程序。 此擴展程序發出其他Web請求，包括使用阻止的HTTP請求第二次請求主頁。
• 事件（event）比計時器（timer）更有效，並且對移動電池壽命的影響較小。