- 相關(guān)推薦
關(guān)于前端性能優(yōu)化
1、什么是前端性能優(yōu)化？
從用戶訪問資源到資源完整展現(xiàn)在用戶面前的過程中，通過技術(shù)手段和優(yōu)化策略，縮短每個(gè)步驟的處理時(shí)間從而提升整個(gè)資源的訪問和呈現(xiàn)速度。
2、為什么要做前端性能優(yōu)化？
在構(gòu)建web站點(diǎn)的過程中，任何一個(gè)細(xì)節(jié)都有可能影響網(wǎng)站的訪問速度，如果不了解性能優(yōu)化知識(shí)，很多不利于網(wǎng)站訪問速度的因素會(huì)產(chǎn)生，從而嚴(yán)重影響網(wǎng)站的性能，導(dǎo)致網(wǎng)站訪問速度變慢，用戶體驗(yàn)低下，最終導(dǎo)致用戶流失。
3、如何進(jìn)行前端性能優(yōu)化
性能黃金法則：只有10%-20%的最終用戶響應(yīng)時(shí)間花在接收請求的HTML文檔上，剩下的80%-90%時(shí)間花在HTML文檔所引用的所有組件(圖片，script，css，flash等等)進(jìn)行的HTTP請求上。
yahoo前端性能團(tuán)隊(duì)總結(jié)的35條黃金定律請見：http://blog.csdn.net/zhouziyu2011/article/details/60468287
1)內(nèi)容層面
① DNS解析優(yōu)化
DNS緩存、減少DNS查詢次數(shù)（減少來自不同domain的請求的數(shù)量）；
② 避免重定向
重定向至少訪問兩個(gè)不同地址，會(huì)減慢訪問速度；
③ 杜絕404
404代表服務(wù)器沒有找到資源，網(wǎng)頁中需要加載一個(gè)外部腳本，結(jié)果返回一個(gè)404，不僅阻塞了其他腳本下載，客戶端還會(huì)將下載回來的內(nèi)容(404)當(dāng)成JavaScript去解析。
2)網(wǎng)絡(luò)傳輸階段
① 減少傳輸過程中實(shí)體的大小
a.緩存：添加Expires 或Cache-Control報(bào)文頭
對(duì)一個(gè)網(wǎng)站而言，CSS、JavaScript、圖片等靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。通過設(shè)置http頭中的cache-control和expires的屬性，可設(shè)定瀏覽器緩存，添加Expires報(bào)文頭，將靜態(tài)內(nèi)容設(shè)為永不過期，或者很長時(shí)間后才過期；添加Cache-Control報(bào)文頭，來控制網(wǎng)頁的緩存。
b.cookie優(yōu)化
去除沒有必要的cookie，如果網(wǎng)頁不需要cookie就完全禁掉。
將cookie的大小減到最小。
注意cookie設(shè)置的domain級(jí)別，沒有必要時(shí)不要影響到sub-domain
設(shè)置合適的過期時(shí)間，較長的過期時(shí)間可以提高響應(yīng)速度。
c.文件壓縮
Accept-Encoding：g-zip，Gzip壓縮傳輸文件通常可以減少70%網(wǎng)頁內(nèi)容的大小，包括腳本、樣式表、圖片等文件。
② 減少請求的次數(shù)
a.文件適當(dāng)?shù)暮喜?/p>
將多個(gè)JS腳本文件合并成一個(gè)文件，將多個(gè)CSS樣式表文件合并成一個(gè)文件，以此來減少文件的下載次數(shù)。
b.雪碧圖
把小圖標(biāo)合成一張大圖，通過給元素的公共css設(shè)置background-image為該合成圖，這樣每個(gè)元素都會(huì)以該合成圖為背景，而且頁面也只加載一張合成圖，然后再給每個(gè)元素單獨(dú)微調(diào)其background-position。把多個(gè)請求合并成一個(gè)。
③ 異步加載
通過async和defer關(guān)鍵字或動(dòng)態(tài)創(chuàng)建
【前端性能優(yōu)化】相關(guān)文章：
判斷剎車盤的性能的技巧10-22
怎么判斷剎車盤性能10-18
網(wǎng)站優(yōu)化技巧07-17
如何提升大型機(jī)性能參考09-20
夯基的優(yōu)化訓(xùn)練10-25
SEO網(wǎng)站優(yōu)化技巧10-10
優(yōu)化淘寶的寶貝排名的方法06-17
搭建網(wǎng)站的優(yōu)化技巧08-02