每個前端工程師都應該懂的前端性能優化總結：

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

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

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

<br />html代碼：<br />

<div class="pubBg box"></div>

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

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

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

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

在實際項目中，我們開始圖片都不加載，頁面首次加載完成後，先把第一屏幕中可以看見的圖片進行加載，隨着頁面滾動，再把下面區域中能夠呈現出來的圖片進行加載。<br />根據圖片的惡懶加載技術，還可以擴充出，數據的懶加載

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

對於不經常更新的數據，最好採用瀏覽器的304緩存左處理，主要由服務器處理（減少http請求次數）

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

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

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

preload爲auto，頁面首次加載的時候就把音視頻資源進行加載；<br />preload爲metadata: 頁面首次加載的時候只把音視頻資源的頭部信息進行加載<br />

在客戶端和服務器端進行數據通信的時候，我們儘量採用json格式進行數據傳輸

優勢：

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

在真實項目中，並不是所有的數據都要基於json，我們儘可能這樣做，但對於某些特殊需求（例如文件流傳輸或者文檔傳輸），使用json就合不合適了

採用CDN加速

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

關於編寫代碼時候的一些優化技巧

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

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

操作DOM弊端：

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

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

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

3. 在實際項目中，我們儘可能避免一次性循環過多的數據（因爲循環操作是同步編程），尤其是避免while導致的死循環操作
4. css選擇器優化

• 儘量減少標籤選擇器的使用
• 儘量少使用id選擇器，多使用樣式類選擇器（通用性比較強）
• 減少選擇器前面的前綴（選擇器是從右向左查找的，前綴多，查詢的時間多）

5. 避免使用css表達式
6. 減少頁面中的冗餘代碼，儘可能提高方法的重複使用率："低耦合高內聚"
7. 最好css放在head中，js放在body尾部，讓頁面加載的時候，先加載css，再加載js(先呈現頁面，再給用戶提供操作)
8. js中避免使用eval

• 性能消耗大
• 代碼壓縮後，容易出現代碼執行錯話問題

9. js中儘量減少閉包使用

• 閉包會形成一個不銷燬的棧內存，過多的棧內存累積會影響頁面的性能
• 還會容易造成內存的泄漏

閉包也有自己的優勢：保存和保護，我們不能避免，我們只能儘量減少

10. 在做dom事件綁定的時候，儘量避免一個個的事件綁定，而是採用性能更高的事件委託來實現

• 事件委託（事件代理）
• 把事件綁定給外層容器，當裏面的後代元素相關行爲被觸發，外層容器綁定的方法也會被觸發執行（冒泡傳播機制導致）通過事件源是誰，我們做不同的操作即可

11. 儘量使用css3動畫代替js動畫，因爲css3的動畫或者變形都開啓了硬件加速，性能比js動畫好。
12. 編寫js代碼的時候，儘可能使用設計模式來構建體系，方便後期的維護，也提高了擴充性
13. css中減少對濾鏡的使用，頁面中減少隊友flash的使用

關於頁面的SEO優化技巧

1. 頁面中杜絕出現死鏈接（404頁面），而且對於用戶輸入一個錯誤頁面，我們要引導到404提示頁面中（服務器處理的）。
2. 避免瀏覽器中異常錯誤拋出

• 儘量避免代碼出錯
• 使用try catch做異常信息捕獲

3. 增加頁面關鍵詞優化

總結

這篇文章主要分享了一些前端性能優化的方法，從不同角度考慮，比如減少http請求，編寫代碼的一些優化技巧，頁面seo優化的一些技巧等，如果想了解更多，請掃碼下面的二維碼，關注公衆號：<br />