Web前端性能優化

Web前端性能優化，應該怎麼作？

0.5922019.08.09 19:17:36字數 890閱讀 427

想要成爲一名合格的Web前端工程師，Web前端性能優化是一個必需要掌握的知識，那麼應該怎麼進行Web前端性能優化呢？

 

一、CSS精靈

CSS Sprites在國內不少人叫CSS精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少的，因此無需顧忌這個問題。

二、代碼壓縮

（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壓縮功能。

三、高質量的JS代碼確定能省不少事，封裝JS以及重複調用方法可以減小不少操做。

 

四、減小對DOM的操做

（1）建立臨時父元素。

（2）建立子元素，並添加內容，設置屬性。

（3）把子元素加入到臨時父元素中。

（4）把臨時父元素添加到DOM樹。

或：（1）找到要添加位置的元素。

（2）改變該元素內容爲須要的HTML。

五、使用JSON格式來進行數據交換

原理：JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。

六、高效使用HTML標籤和CSS樣式

七、使用CDN加速（內容分發網絡）

CDN的全稱是Content Delivery Network，即內容分發網絡。CDN是構建在現有網絡基礎之上的智能虛擬網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

八、精簡CSS和JS文件

九、注意控制Cookie大小和污染

 本文引自： https://www.jianshu.com/p/681273927093