一、瀏覽器加載過程：
1、建立連接過程
(1) 瀏覽器查找域名的IP地址
(2) 瀏覽器給web服務器發送一個HTTP請求
(3) 服務器發送永久重定向響應
(4) 瀏覽器跟蹤重定向地址
(5) 服務器“處理”請求
(6) 服務器發回一個HTML響應
2、瀏覽器渲染
解析HTML
↓
構建DOM樹
↓
渲染樹構建
↓
渲染樹布局
↓
繪制渲染樹
二、優化方法
1、啟用瀏覽器緩存
瀏覽器要根據域名找出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標頭，以便啟動緩存驗證。
2、頁面內容組織
① 為 HTML 文檔指定字符集，可讓瀏覽器立即開始執行腳本。
② 將內嵌樣式塊和 <link> 元素從文檔主體移至文檔標題，可改善顯示性能。
③ 將小型樣式表或者腳本內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。
④ 正確地排列外部樣式表與外部和內嵌腳本的順序，可增加下載時同時加載的數據量，並提高瀏覽器顯示網頁的速度。為確保能夠並行下載這CSS 文件，始終將外部 CSS 文件排在外部 JavaScript 文件前面。
PS：有圖有真相
VS：
3、HTML
① 使用HTML5新標簽，例如header、footer、section、nav、article。因為它們語義化，速度快，結構合理，瀏覽器上識別能力強。
② 減少HTML標簽嵌套深度，嵌套越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。
③ 為圖片指定大小，減少重排。
④ 壓縮HTML。
4、 CSS
① 使用CssSprite將零星的背景圖包含到一張圖中，通過background-position來使它顯示在正確的位置；只請求一張圖，減少了HTTP請求的次數。
② 模塊化、精簡css，提高復用率。
③ 減少漸變、陰影的使用。
④ 合理使用CSS3高性能動畫，Translate3d支持硬件加速。
⑤ 避免使用濾鏡。
⑥ 不使用@import。
⑦ 合並和壓縮CSS代碼。
5、JavaScript
① 暫緩 JavaScript 解析，暫緩解析不需要的 JavaScript（等到需要執行時再進行解析），可以提高網頁的初始加載速度。
② 使用事件委托機制，避免頻繁操作DOM節點。
③ 模塊化代碼：SeaJs。
④ 合並和壓縮JavaScript代碼。
⑤ 壓縮工具：YUI Compressor或JSMin等。
6、 圖片優化
① 圖片時頁面大部分加載時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式
② 壓縮圖片
三、實戰分析
1、 network
2、status看資源請求情況
3、timeline 可看頁面渲染情況
4、profiles可看函數執行情況
四、工具
1、Chrome Developer Tools —— 分析性能
2、PageSpeed —— 查看性能建議
3、Fiddler —— HTTP/HTTPS網絡調試
以上大多數總結自yahoo前端優化規則 & Chrome pagespeed的優化建議
1、建立連接過程
(1) 瀏覽器查找域名的IP地址
(2) 瀏覽器給web服務器發送一個HTTP請求
(3) 服務器發送永久重定向響應
(4) 瀏覽器跟蹤重定向地址
(5) 服務器“處理”請求
(6) 服務器發回一個HTML響應
2、瀏覽器渲染
解析HTML
↓
構建DOM樹
↓
渲染樹構建
↓
渲染樹布局
↓
繪制渲染樹
二、優化方法
1、啟用瀏覽器緩存
瀏覽器要根據域名找出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標頭，以便啟動緩存驗證。
2、頁面內容組織
① 為 HTML 文檔指定字符集，可讓瀏覽器立即開始執行腳本。
② 將內嵌樣式塊和 <link> 元素從文檔主體移至文檔標題，可改善顯示性能。
③ 將小型樣式表或者腳本內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。
④ 正確地排列外部樣式表與外部和內嵌腳本的順序，可增加下載時同時加載的數據量，並提高瀏覽器顯示網頁的速度。為確保能夠並行下載這CSS 文件，始終將外部 CSS 文件排在外部 JavaScript 文件前面。
PS：有圖有真相
VS：
3、HTML
① 使用HTML5新標簽，例如header、footer、section、nav、article。因為它們語義化，速度快，結構合理，瀏覽器上識別能力強。
② 減少HTML標簽嵌套深度，嵌套越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。
③ 為圖片指定大小，減少重排。
④ 壓縮HTML。
4、 CSS
① 使用CssSprite將零星的背景圖包含到一張圖中，通過background-position來使它顯示在正確的位置；只請求一張圖，減少了HTTP請求的次數。
② 模塊化、精簡css，提高復用率。
③ 減少漸變、陰影的使用。
④ 合理使用CSS3高性能動畫，Translate3d支持硬件加速。
⑤ 避免使用濾鏡。
⑥ 不使用@import。
⑦ 合並和壓縮CSS代碼。
5、JavaScript
① 暫緩 JavaScript 解析，暫緩解析不需要的 JavaScript（等到需要執行時再進行解析），可以提高網頁的初始加載速度。
② 使用事件委托機制，避免頻繁操作DOM節點。
③ 模塊化代碼：SeaJs。
④ 合並和壓縮JavaScript代碼。
⑤ 壓縮工具：YUI Compressor或JSMin等。
6、 圖片優化
① 圖片時頁面大部分加載時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式
② 壓縮圖片
三、實戰分析
1、 network
2、status看資源請求情況
3、timeline 可看頁面渲染情況
4、profiles可看函數執行情況
四、工具
1、Chrome Developer Tools —— 分析性能
2、PageSpeed —— 查看性能建議
3、Fiddler —— HTTP/HTTPS網絡調試
以上大多數總結自yahoo前端優化規則 & Chrome pagespeed的優化建議