前端工程與性能優(yōu)化
首先，我們把雅虎14條優(yōu)化原則，《高性能網(wǎng)站建設(shè)指南》以及《高性能網(wǎng)站建設(shè)進(jìn)階指南》中提到的優(yōu)化點(diǎn)做一次梳理，按照優(yōu)化方向分類，可以得到這樣一張表格：
| 優(yōu)化方向 | 優(yōu)化手段 |
|---|---|
| 請求數(shù)量 | 合并腳本和樣式表，CSS Sprites，拆分初始化負(fù)載，劃分主域 |
| 請求帶寬 | 開啟GZip，精簡JavaScript，移除重復(fù)腳本，圖像優(yōu)化 |
| 緩存利用 | 使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存 |
| 頁面結(jié)構(gòu) | 將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出 |
| 代碼校驗(yàn) | 避免CSS表達(dá)式，避免重定向 |
我們把以上這些已經(jīng)成熟應(yīng)用到實(shí)際生產(chǎn)中的優(yōu)化手段去除掉，留下那些還沒有很好實(shí)現(xiàn)的優(yōu)化原則。再來回顧一下之前的性能優(yōu)化分類：
| 優(yōu)化方向 | 優(yōu)化手段 |
|---|---|
| 請求數(shù)量 | 合并腳本和樣式表，拆分初始化負(fù)載 |
| 請求帶寬 | 移除重復(fù)腳本 |
| 緩存利用 | 添加Expires頭，配置ETag，使Ajax可緩存 |
| 頁面結(jié)構(gòu) | 將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出 |
詳細(xì)內(nèi)容：https://github.com/fouber/blog/issues/3
