每個前端工程師都應該懂的前端性能優化總結：-有解無憂

采用css雪碧圖（css sprite/css圖片精靈）技術

采用css雪碧圖（css sprite/css圖片精靈）技術，把一些小圖合并到一張大圖上，使用的時候通過背景圖片定位，定位到具體的某一張小圖片上
css代碼如下：

.pubBg{
	background: url('././img/sprit.png') no-repeat;
  background-size: 0 0 /*和原圖大小保持一致*/
}
.box {
	background-position: x y; /*通過背景定位，定位到具體的位置，展示不同的圖片即可*/
}

html代碼：

<div ></div>

優點：減少HTTP的請求次數或者減少請求資料的大小，因為頁面中每發送一次http請求，都需要完成請求+回應這個完整的http事務，會消耗一些時間，也可能會導致http鏈接通道的阻塞，為了提高頁面加載速度和運行的性能，我們應該減少http的請求次數和減少請求內容的大小（請求內容越大，消耗的時間越長），

在專案中，我們最好把css或者js檔案進行合并或者壓縮，尤其是在移動端開發的時候，如果css或者j s內容不是很多，我們可以采用內嵌式，以此減少http的請求次數，加快頁面加載速度

css合并成一個，js也最好合并
首頁通過一些工具（例如： webpack）把合并后的css或者js壓縮成x xx.min.js減少檔案大小
服務器開啟資源檔案的GZIP壓縮
通過一些自動化工具完成css以及js的合并壓縮，或者再完成less轉css，es6轉es5等操作，我們這種自動化構建模式，稱之為前端“工程化”開發

采用圖片懶加載技術，在頁面開始加載的時候，不請求真實圖片地址，而是用默認圖占位，當前頁面加載完成后，在根據相關的條件依次加載真實圖片（減少頁面首次加載http請求的次數）

在實際專案中，我們開始圖片都不加載，頁面首次加載完成后，先把第一螢屏中可以看見的圖片進行加載，隨著頁面滾動，再把下面區域中能夠呈現出來的圖片進行加載，
根據圖片的惡懶加載技術，還可以擴充出，資料的懶加載

開始加載頁面的時候，我們只把首屏或者前兩屏的資料從服務器端進行請求（有些網站首屏資料是后端渲染好，整體回傳給客戶端呈現的）
當頁面下拉，滾動到某個區域，再把這個區域需要的資料進行請求，（請求回來做資料系結以及圖片延遲加載等）
分頁展示技術采用的也是資料的懶加載思想實作的：如果我們請求獲取的資料是很多的資料，我們最好分批請求，開始只請求一頁的資料，當用戶點擊其他頁的時候，再請求那頁的資料

對于不經常更新的資料，最好采用瀏覽器的304快取左處理，主要由服務器處理（減少http請求次數）

例：第一個請求css和js下來，瀏覽器會把請求的內容快取起來，如果做了304處理，用戶再次請求css和js，直接從快取中讀取，不再請求服務器獲取（減少http請求次數）
當用戶強制重繪頁面，或者當前快取的css和js發生了變動，都會重新從服務器獲取
對于客戶端來講，我們還可以基于localStorage來做一些本地存盤，

使用字體圖示代替一些頁面中的位圖（圖片），這樣不僅做適配的時候方便，而且更加輕量級，而且減少了htttp請求次數（類似雪碧圖）

如果當前頁面中出現了AUDIO或者VIDEO標簽，我們最好設定它們的preload為none,頁面加載的時候，音視瞥澩不進行加載，播放的時候再進行加載，（減少頁面首次加載HTTP請求的次數）

preload為auto，頁面首次加載的時候就把音視瞥澩進行加載；
preload為metadata: 頁面首次加載的時候只把音視瞥澩的頭部資訊進行加載

在客戶端和服務器端進行資料通信的時候，我們盡量采用json格式進行資料傳輸

優勢：

json格式資料，能夠清晰明了的展示資料結構，而且也方便我們獲取和操作
相對于很早以前的xml格式傳輸，json格式的資料更加輕量級
客戶端和服務器端都支持json格式資料的處理，處理起來非常的方便

在真實專案中，并不是所有的資料都要基于json，我們盡可能這樣做，但對于某些特殊需求（例如檔案流傳輸或者檔案傳輸），使用json就合不合適了

采用CDN加速

cdn: 分布式（地域分布式）

關于撰寫代碼時候的一些優化技巧

除了減少http請求次數和大小可以優化性能，在撰寫代碼的時候，也可以進行一些優化，讓頁面性能有所提升（不好的代碼撰寫習慣，會導致頁面性能消耗太大，例如：記憶體泄露）

在撰寫js代碼的時候，盡量減少對DOM的操作，在js中操作DOM是一個非常消耗性能的事情，但是我們又不可能避免的操作DOM，我們只能盡量減少對于DOM的操作

操作DOM弊端：

DOM存在映射機制（js中的DOM元素物件和頁面的DOM結構是存在映射機制的，一改則都是改），這種映射機制，是瀏覽器按照W3C標準完成對JS語言的構建和DOM的構建（其實就是構建了一個監聽機制），操作DOM是同時要修改兩個地方，相對于一些其他的js編程來說是消耗性能的，
頁面中的DOM結構改變或者樣式改變，會觸發瀏覽器的回流（瀏覽器會把DOM結構重新進行計算，這個操作很消耗性能）和重繪（把一個元素的樣式重新渲染）

撰寫代碼的時候，更多的使用異步編程

同步編程會導致：上面的東西完不成，下面任務也做不了，開發的時候，可以把某一個區域模塊都設定為異步編程，這樣只要模塊之間沒有必然的先后順序，都可以獨立進行加載，不會受到上面模塊的堵塞影響（用的比較少），
尤其是ajax資料請求，我們一般都要使用異步編程，最好是基于promise設計模式進行管理（專案中經常使用fetch、vue axios等插件，來進行ajax請求處理，因為這些插件中就是基于promise設計模式對ajax進行封裝處理）