直出伺服器怎麼樣

① 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的執行