Web頁面加載，如何分析頁面性能？如何進行優化？

1、瀏覽器加載過程：
一、創建鏈接過程

(1) 瀏覽器查找域名的IP地址

　　(2) 瀏覽器給web服務器發送一個HTTP請求

　　(3) 服務器發送永久重定向響應

　　(4) 瀏覽器跟蹤重定向地址

　　(5) 服務器「處理」請求

　　(6) 服務器發回一個HTML響應
二、瀏覽器渲染

解析HTML
↓
構建DOM樹
↓
渲染樹構建
↓
渲染樹佈局
↓
繪製渲染樹
2、優化方法
一、啓用瀏覽器緩存
　　瀏覽器要根據域名找出IP地址，而DNS查找過程的第一步是在瀏覽器緩存中查找，根據Chrome的PageSpeed給出的建議：要利用瀏覽器緩存存儲可緩存的資源。在 HTTP 標頭中爲靜態資源設置有效期或最長存在時間，可指示瀏覽器從本地磁盤中加載之前下載的資源而不是從網絡中加載。
HTTP 1.1提供的緩存方法主要有兩種：
(1) Expires和Cache-Control：max-age. 即內容在緩存中的生命有效期。第一次請求後將在生命有效期以內直接從本地緩存中拿取。
　　(2) Last-Modified和ETag.：Last-Modified標記文件最後一次修改的時間，瀏覽器請求是在頭部加入上次請求緩存下來的Last-Modified時間，若兩次請求期間服務器的內容沒有修改，服務器返回304 Not Modified，則不下載資源，瀏覽器直接使用本地緩存；不然，服務器會返回200以及更新後的版本。ETag是服務器對於文件生成的Hash散列，其生成算法與最後一次修改的時間相關。瀏覽器第二次請求發送上次的ETag信息，服務器經過簡單的比對就知道是否應該返回304仍是200。PageSpeed建議，要爲資源指定Last-Modified或ETag標頭，以便啓動緩存驗證。
二、頁面內容組織
　　① 爲 HTML 文檔指定字符集，可以讓瀏覽器當即開始執行腳本。
　　② 將內嵌樣式塊和 <link> 元素從文檔主體移至文檔標題，可改善顯示性能。
　　③ 將小型樣式表或者腳本內嵌到主 HTML 網頁中，可減小在下載其餘資源時的往返時間 (RTT) 和延遲時間。
④ 正確地排列外部樣式表與外部和內嵌腳本的順序，可增長下載時同時加載的數據量，並提升瀏覽器顯示網頁的速度。爲確保可以並行下載這CSS 文件，始終將外部 CSS 文件排在外部 JavaScript 文件前面。
PS：有圖有真相
VS：

三、HTML
　　① 使用HTML5新標籤，例如header、footer、section、nav、article。由於它們語義化，速度快，結構合理，瀏覽器上識別能力強。
　　② 減小HTML標籤嵌套深度，嵌套越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。
　　③ 爲圖片指定大小，減小重排。
　　④ 壓縮HTML。
四、 CSS
　　① 使用CssSprite將零星的背景圖包含到一張圖中，經過background-position來使它顯示在正確的位置；只請求一張圖，減小了HTTP請求的次數。
　　② 模塊化、精簡css，提升複用率。
　　③ 減小漸變、陰影的使用。
　　④ 合理使用CSS3高性能動畫，Translate3d支持硬件加速。
　　⑤ 避免使用濾鏡。
　　⑥ 不使用@import。
　　⑦ 合併和壓縮CSS代碼。

五、JavaScript
　　① 暫緩 JavaScript 解析，暫緩解析不須要的 JavaScript（等到須要執行時再進行解析），能夠提升網頁的初始加載速度。
　　② 使用事件委託機制，避免頻繁操做DOM節點。
　　③ 模塊化代碼：SeaJs。
　　④ 合併和壓縮JavaScript代碼。
　　⑤ 壓縮工具：YUI Compressor或JSMin等。
六、 圖片優化
① 圖片時頁面大部分加載時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式
② 壓縮圖片
3、實戰分析
一、 network
二、status看資源請求狀況
三、timeline 可看頁面渲染狀況
四、profiles可看函數執行狀況
4、工具 一、Chrome Developer Tools —— 分析性能 二、PageSpeed —— 查看性能建議 　　三、Fiddler —— HTTP/HTTPS網絡調試 以上大多數總結自yahoo前端優化規則 & Chrome pagespeed的優化建議