想要成為一名合格的Web前端工程師，Web前端效能最佳化是一個必須要掌握的知識，那麼應該怎麼進行Web前端效能最佳化呢？
1、CSS精靈
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
2、程式碼壓縮
（1）將table改為div佈局
儘量將table標籤佈局HTML重構div佈局，可以節約至少40%的程式碼量。由於div程式碼少於table佈局的HTML網頁，所以搜尋引擎索引權重也優於table佈局的HTML網頁。
（2）縮減精簡div、span、ul、li等系列標籤
佈局DIV+CSS網頁時候，有時候可以節約一些DIV佈局程式碼，減少程式碼量。
（4）表格型別佈局時候適當使用table替代div佈局
如果是本身是表格資料列表排版，我們最好選擇table，因為表格佈局使用table優於div佈局，使用table佈局卻比div佈局節約HTML標籤程式碼和節約CSS樣式。
（5）網頁GZIP壓縮
自己的伺服器推薦設定網頁Gzip壓縮功能。
3、高質量的JS程式碼肯定能省很多事，封裝JS以及重複呼叫方法能夠減少很多操作。
4、減少對DOM的操作
（1）建立臨時父元素。
（2）建立子元素，並新增內容，設定屬性。
（3）把子元素加入到臨時父元素中。
（4）把臨時父元素新增到DOM樹。
或：（1）找到要新增位置的元素。
（2）改變該元素內容為需要的HTML。
5、使用JSON格式來進行資料交換
原理：JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式，是理想的資料交換格式。同時，JSON是JavaScript原生格式，這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。
6、高效使用HTML標籤和CSS樣式
7、使用CDN加速（內容分發網路）
CDN的全稱是Content Delivery Network，即內容分發網路。CDN是構建在現有網路基礎之上的智慧虛擬網路，依靠部署在各地的邊緣伺服器，透過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。CDN的關鍵技術主要有內容儲存和分發技術。
8、精簡CSS和JS檔案
9、注意控制Cookie大小和汙染
想要成為一名合格的Web前端工程師，Web前端效能最佳化是一個必須要掌握的知識，那麼應該怎麼進行Web前端效能最佳化呢？
1、CSS精靈
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
2、程式碼壓縮
（1）將table改為div佈局
儘量將table標籤佈局HTML重構div佈局，可以節約至少40%的程式碼量。由於div程式碼少於table佈局的HTML網頁，所以搜尋引擎索引權重也優於table佈局的HTML網頁。
（2）縮減精簡div、span、ul、li等系列標籤
佈局DIV+CSS網頁時候，有時候可以節約一些DIV佈局程式碼，減少程式碼量。
（4）表格型別佈局時候適當使用table替代div佈局
如果是本身是表格資料列表排版，我們最好選擇table，因為表格佈局使用table優於div佈局，使用table佈局卻比div佈局節約HTML標籤程式碼和節約CSS樣式。
（5）網頁GZIP壓縮
自己的伺服器推薦設定網頁Gzip壓縮功能。
3、高質量的JS程式碼肯定能省很多事，封裝JS以及重複呼叫方法能夠減少很多操作。
4、減少對DOM的操作
（1）建立臨時父元素。
（2）建立子元素，並新增內容，設定屬性。
（3）把子元素加入到臨時父元素中。
（4）把臨時父元素新增到DOM樹。
或：（1）找到要新增位置的元素。
（2）改變該元素內容為需要的HTML。
5、使用JSON格式來進行資料交換
原理：JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式，是理想的資料交換格式。同時，JSON是JavaScript原生格式，這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。
6、高效使用HTML標籤和CSS樣式
7、使用CDN加速（內容分發網路）
CDN的全稱是Content Delivery Network，即內容分發網路。CDN是構建在現有網路基礎之上的智慧虛擬網路，依靠部署在各地的邊緣伺服器，透過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。CDN的關鍵技術主要有內容儲存和分發技術。
8、精簡CSS和JS檔案
9、注意控制Cookie大小和汙染