大概這些方面吧。

1、 JavaScript 壓縮

2、 載入資源（何時、什麼順序、要不要現在載入）

3、 快取

4、 應用效能分析

5、 使用負載均衡方案

6、 為了更快的啟動時間考慮一下同構

7、 使用索引加速資料庫查詢

8、 使用更快的轉譯方案

9、 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

10、圖片編碼

有錯請指正，缺少請補充

提起Web前端效能最佳化的問題，前端開發人員非常熟悉，對於一個網站而言，即使內容和功能再優秀，如果使用者需要花費很久的時間才能開啟，這樣遲早會消耗使用者的耐心，並最終失去使用者。

那如何才能最佳化前端效能？歸納為三步

位元組數也就是通常說的減少資原始檔（js、css、image、video...）的大小。

1、壓縮

前端使用uglify混淆壓縮

後端開啟gzip

對圖片進行壓縮，使用壓縮比例更高的格式（WebP）

2、快取

強快取（http狀態碼：200），不用請求伺服器直接使用本地快取，協商快取（http狀態碼：304），使用時先請求伺服器若被告知快取沒過期則使用本地快取，不用下載資源，使用localstorage對資料進行儲存。

3、針對首屏最佳化

對非關鍵資源延遲載入、非同步載入，減少首屏資源大小

1、合併請求

使用http2.0的多路複用合併請求配置combo，在無法使用http2.0的情況下作為一種合併資源請求的手段。

2、減少圖片請求數

使用spite圖，使用svg-symbol。

3、針對一些場景採用css、js內聯的方式。

4、使用強快取減少了一次伺服器請求。

5、非關鍵資源延遲、非同步載入，減少了首屏資源連線數。

1、bigpipe分塊輸出

這裡主要是因為要完成一整個頁面的輸出後端需要處理很多個任務，我們可以將這些多個任務進行分塊，誰先完成誰就先輸出，最終透過JS回填的方式輸出DOM節點，這種方式主要解決了直出頁面阻塞的問題。

2、bigrender分塊渲染

常規的手段就是採用前端模板渲染頁面，針對首屏時間主要減少了首次構建DOM樹時的節點數

3、針對reflow，repaint，composit路徑處理。

4、涉及到動畫時關於layer的概念render layer、graphics layer。

5、css放在頭部、js放底部避免阻塞DOM樹的構建，關於css、js的位置對於頁面渲染的影響大家可以關注下相關的文章。核心：css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染，JS會阻塞DOM樹的構建，CSS會阻塞JS的執行。

想要成為一名合格的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大小和汙染