【前端性能優(yōu)化方式總結(jié)】
一昌犹、減少HTTP請求
1.合并文件
將css、js分別合并到一個文件中把敢。
減少文件請求燥爷。
2.CSS Sprites（雪碧圖）
減少圖片請求蜈亩。
3.圖片地圖（不推薦）
把多張圖片整合到一張圖片中。雖然文件的總體大小不會改變前翎，但是可以減少HTTP請求次數(shù)稚配。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能使用，如導(dǎo)航欄鱼填。確定圖片的坐標(biāo)和可能會比較繁瑣且容易出錯药有，同時使用圖片地圖導(dǎo)航也不具有可讀性，因此不推薦這種方法苹丸。
4.內(nèi)聯(lián)圖像（暫時沒有得到主流瀏覽器的支持）
使用data:URL 模式可以在web頁面中包含圖片但無需任何額外的HTTP請求。
二苇经、減少DNS查找次數(shù)（DNS緩存）
現(xiàn)代的瀏覽器都有自己的緩存機制赘理。這里不需要我們手動做什么。
三扇单、緩存時間
緩存時間長優(yōu)點：減少DNS的重復(fù)查找商模，節(jié)省時間?
緩存時間短優(yōu)點：能夠及時的檢測網(wǎng)站服務(wù)器IP地址的變化，保證訪問的正確性
設(shè)置適當(dāng)?shù)木彺鏁r間，減少DNS的查找施流，同時保證訪問的正確性响疚。
四、使用多域名瞪醋，實現(xiàn)網(wǎng)站資源(html忿晕、圖片、腳本等)的并行下載
將網(wǎng)站資源放到不同的域名下银受，可以實現(xiàn)資源文件的并行下載践盼。
【注意】
多域名可以實現(xiàn)并行下載，但會增加DNS的查找次數(shù)宾巍。
一般原則：
把這些頁面中的內(nèi)容分割成至少兩部分但不超過四部分咕幻。
五、使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN–Content delivery network)
1.基本認(rèn)知
內(nèi)容分發(fā)網(wǎng)絡(luò)是由一系列分散到各個不同地理位置上的Web服務(wù)器組成的顶霞，它提高了網(wǎng)站內(nèi)容的傳輸速度肄程。
用于向用戶傳輸內(nèi)容的服務(wù)器主要是根據(jù)和用戶在網(wǎng)絡(luò)上的靠近程度來指定的。
2.原理
使用CDN选浑，就相當(dāng)于在離你最近的地方绷耍，放置一臺性能好、連接順暢的副本服務(wù)器鲜侥，讓你能夠以最近的距離褂始，最快的速度獲取內(nèi)容。
用戶請求路由的第一跳就到達(dá)了CDN服務(wù)器描函，當(dāng)CDN中存在瀏覽器請求的資源時崎苗，從CDN直接返回給瀏覽器，最短路徑返回響應(yīng)舀寓，加快用戶訪問速度胆数，減少數(shù)據(jù)中心負(fù)載壓力。
【缺點】
CDN服務(wù)成本非常高互墓，需要建立多臺服務(wù)器必尼。
【適用】
CDN緩存的一般是靜態(tài)資源，如圖片篡撵、文件判莉、CSS、script腳本育谬、靜態(tài)網(wǎng)頁等券盅，這些文件訪問頻度很高，將其緩存在CDN可極大改善網(wǎng)頁的打開速度膛檀。
六锰镀、添加Expire/Cache-Control頭娘侍，緩存http響應(yīng)內(nèi)容
（Expire屬于HTTP/1.0，Cache-Control屬于HTTP/1.1泳炉。這兩者起到的作用是一致的憾筏。）
緩存請求的內(nèi)容，減少后續(xù)http請求花鹅。
Expires：存儲的值代表氧腰，資源在本地的過期時間。
Cache-Control：存儲的值代表翠胰，距離緩存過期還有多少秒容贝。
七、啟用Gzip壓縮
通過減小http響應(yīng)的大小之景，節(jié)省http響應(yīng)時間斤富。Gzip可以壓縮所有可能的文件類型。
【啟用方式】
請求頭中添加：Accept-Encoding: gzip?
響應(yīng)頭會返回：Content-Encoding: gzip锻狗。并以客戶端標(biāo)出的壓縮方式满力，對響應(yīng)內(nèi)容進(jìn)行壓縮。
八轻纪、css放在<head>中油额，script放在最下面（</body>之前）
css放在<head>中，能夠提高網(wǎng)頁渲染性能刻帚，避免網(wǎng)頁出現(xiàn)白屏或者是沒有樣式的內(nèi)容潦嘶。
九、減少cookie傳輸
十崇众、把JavaScript和CSS都放到外部文件中
使用外部文件可以提高頁面速度掂僵，因為JavaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存。
內(nèi)置在HTML文檔中的JavaScript 和CSS則會在每次請求中隨HTML文檔重新下載顷歌。
十一 锰蓬、壓縮 JavaScript 和 CSS
去除代碼不必要的字符減少文件大小從而節(jié)省下載時間。?
方法：?
（1）去除不必要的空白符（空格眯漩、換行芹扭、tab縮進(jìn)）、格式符赦抖、注釋符?
（2）簡寫方法名舱卡、參數(shù)名來壓縮js腳本?
十二、LazyLoad Images
在頁面剛加載的時候只加載第一屏圖片摹芙，當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片灼狰。
十三、引入textarea/script元素做延遲解析異步渲染
【關(guān)于圖片可以做的優(yōu)化總結(jié)】
1.切圖后進(jìn)行圖片壓縮
2.懶加載浮禾。初始渲染只加載首屏圖片交胚，用戶繼續(xù)滾動再加載后續(xù)圖片。
3.CSS?Sprites（雪碧圖）
4.base64編碼圖片盈电，將圖片嵌入html或css文件中蝴簇，不再單獨請求
5.svg代替圖片
6.html5 canvas畫圖
7.Responsive設(shè)計（響應(yīng)式圖片）
【粗略理解】
避免項目中為了適應(yīng)不同大小的設(shè)備，存儲多張相同的圖片匆帚。
使用一張圖熬词，通過@media媒體查詢，為圖片設(shè)置不同的大小吸重。
#待續(xù)......
