【前端性能優(yōu)化方式總結(jié)】
一、減少HTTP請求
1.合并文件
將css、js分別合并到一個文件中。
減少文件請求。
2.CSS Sprites（雪碧圖）
減少圖片請求。
3.圖片地圖（不推薦）
把多張圖片整合到一張圖片中。雖然文件的總體大小不會改變，但是可以減少HTTP請求次數(shù)。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能使用，如導航欄。確定圖片的坐標和可能會比較繁瑣且容易出錯，同時使用圖片地圖導航也不具有可讀性，因此不推薦這種方法。
4.內(nèi)聯(lián)圖像（暫時沒有得到主流瀏覽器的支持）
使用data:URL 模式可以在web頁面中包含圖片但無需任何額外的HTTP請求。
二、減少DNS查找次數(shù)（DNS緩存）
現(xiàn)代的瀏覽器都有自己的緩存機制。這里不需要我們手動做什么。
三、緩存時間
緩存時間長優(yōu)點：減少DNS的重復查找，節(jié)省時間?
緩存時間短優(yōu)點：能夠及時的檢測網(wǎng)站服務(wù)器IP地址的變化，保證訪問的正確性
設(shè)置適當?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.基本認知
內(nèi)容分發(fā)網(wǎng)絡(luò)是由一系列分散到各個不同地理位置上的Web服務(wù)器組成的，它提高了網(wǎng)站內(nèi)容的傳輸速度。
用于向用戶傳輸內(nèi)容的服務(wù)器主要是根據(jù)和用戶在網(wǎng)絡(luò)上的靠近程度來指定的。
2.原理
使用CDN，就相當于在離你最近的地方，放置一臺性能好、連接順暢的副本服務(wù)器，讓你能夠以最近的距離，最快的速度獲取內(nèi)容。
用戶請求路由的第一跳就到達了CDN服務(wù)器，當CDN中存在瀏覽器請求的資源時，從CDN直接返回給瀏覽器，最短路徑返回響應(yīng)，加快用戶訪問速度，減少數(shù)據(jù)中心負載壓力。
【缺點】
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。并以客戶端標出的壓縮方式，對響應(yīng)內(nèi)容進行壓縮。
八、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縮進）、格式符、注釋符?
（2）簡寫方法名、參數(shù)名來壓縮js腳本?
十二、LazyLoad Images
在頁面剛加載的時候只加載第一屏圖片，當用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。
十三、引入textarea/script元素做延遲解析異步渲染
【關(guān)于圖片可以做的優(yōu)化總結(jié)】
1.切圖后進行圖片壓縮
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ù)......
