想要成為一名合格的Web前端工程師，Web前端性能優化是一個必須要掌握的知識，那麼應該怎麼進行Web前端性能優化呢？
1、CSS精靈
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
更多前端資源，WX搜索：“實戰前端”；
2、代碼壓縮
（1）將table改為div佈局
儘量將table標籤佈局HTML重構div佈局，可以節約至少40%的代碼量。由於div代碼少於table佈局的HTML網頁，所以搜索引擎索引權重也優於table佈局的HTML網頁。
（2）縮減精簡div、span、ul、li等系列標籤
佈局DIV+CSS網頁時候，有時候可以節約一些DIV佈局代碼，減少代碼量。
（3）刪除多餘空格
刪除多餘空格換行，可以有效地壓縮HTML代碼佔用字節，一般在開發完成後可以對HTML中代碼進行刪除換行和空格內容。
（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開發技術分享 的文章
