web前端性能優化

web前端性能優化

• 資源的合併與壓縮
• 圖片編解碼原理和類型選擇
• 瀏覽器渲染機制
• 懶加載預加載
• 瀏覽器存儲
• 緩存機制
• PWA
• Vue-SSR

基礎優化

• 資源的合併與壓縮

• 做用

1.減小http請求數量
2.減小請求資源的大小
複製代碼

• 實現方式

1.html壓縮
2.css壓縮
3.js的壓縮和混亂
4.文件合併
5.開啓gzip
複製代碼

請求過程當中一些潛在的性能優化點？
dns是否能夠經過緩存減小dns查詢時間？
網絡請求的過程走最近的網絡環境？
相同的靜態資源是否能夠緩存？
可否減小請求http請求大小？
減小http請求？
服務端渲染？
複製代碼

圖片優化

• png8/png24/png32之間的區別

png8: 256色+支持透明
png24: 2^24色+不支持透明
png32: 2^24色+支持透明
複製代碼

• 不一樣格式圖片經常使用的業務場景

1.jpg有損壓縮，壓縮率高，不支持透明不須要透明圖片的業務場景）
2.png支持透明，瀏覽器兼容好（須要透明圖片的業務場景）
3.webp壓縮程度更好，在ios webview有兼容性問題（安卓所有）
4.svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景（圖片樣式相對簡單的業務場景）
複製代碼

進階優化

• 懶加載和預加載

1、懶加載
1.圖片進入可視區域以後請求圖片資源
2.對於電商等圖片不少，頁面很長的業務場景適用
3.減小無資源的加載
4.併發加載的資源過多會阻塞js的加載，影響網站的正常使用
2、預加載
1.圖片等靜態資源在使用以前的提早請求
2.資源使用到時能從緩存中加載，提高用戶體驗
3.頁面展現的依賴關係維護
複製代碼

• 瀏覽器重繪與迴流

迴流：當render tree中的一部分（或所有）由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建，當頁面佈局和幾何屬性改變時就須要迴流。
重繪：當render tree的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。
迴流必將引發重繪而重繪不必定會引發迴流

複製代碼

• 觸發頁面重佈局的屬性

1.盒子模型相關屬性會觸發重佈局
2.定位屬性及浮動也會觸發重佈局
3.改變節點內部文字結構也會觸發重佈局
複製代碼

• 新建DOM的過程

1.獲取DOM後分割爲多個圖層
2.對每一個圖層的節點計算樣式結果（Recalculate style--樣式重計算）
3.爲每一個節點生成圖形和位置（Layout--迴流和重佈局）
4.將每一個節點繪製填充到圖層位圖中（Paint Setup和Paint--重繪）
5.圖層做爲紋理上傳至GPU
6.符合多個圖層到頁面上生成最終屏幕圖像（Composite Layers--圖層重組）
複製代碼

• 實戰優化點

1.用translate替代top改變
2.用opacity替代visibility
3.不要一條一條地修改DOM的樣式，預先定義好class，而後修改DOM的className
4.把DOM離線後修改，好比：先把DOM給display:none（有一次Reflow）,而後你修改100次，而後再把它顯示出來
5.不要把DOM結點的屬性值放在一個循環裏當成循環裏的變量
6.不要使用table佈局，可能很小的一個小改動會形成整個table的從新佈局
7.動畫實現的速度的選擇
8.對於動畫新建圖層
9.啓用GPU硬件加速
複製代碼

瀏覽器存儲

• Cookie

1.由於HTTP請求無狀態，因此須要cookie去維護客戶端狀態
2.過時時間expire
3.cookie的生成方式
(1).http response header中的set-cookie
(2).js中能夠經過document.cookie能夠讀寫cookie
4.僅僅做爲瀏覽器存儲(大小4KB左右，能力被localstorage替代)
5.cookie中在相關域名下面----cdn的流量損耗
6.httponly
複製代碼

• LocalStorage

1.HTML5設計出來專門用於瀏覽器存儲的
2.大小爲5M左右
3.僅在客戶端使用，不和服務端進行通訊
4.接口封裝較好
5.瀏覽器本地緩存方案
複製代碼

• SessionStorage

1.會議級別的瀏覽器存儲
2.大小爲5M左右
3.僅在客戶端使用，不和服務端進行通訊
4.接口封裝較好
5.對於表單信息的維護
複製代碼

• IndexedDB

1.IndexedDB是一種低級API，用於客戶端存儲大量結構化數據。該API使用索引來實現對該數據的高性能搜索。雖然WebStorage對於存儲較少許的數據頗有用，但對於存儲更大量的結構化數據來講，這種方法不太有用。IndexedDB提供了一個解決方案。
2.爲應用建立離線版本。
複製代碼

• PWA

PWA(Progressive Web Apps)是一種Web Apps新模型，並非具體指某一種前沿的技術或者某一個單一的知識點，咱們從英語縮寫來看，這是一個漸進式的Web App，是經過一系列新的Web特性，配合優秀的UI交互設計，逐步的加強Web App的用戶體驗。
1.可靠性：在沒有網絡的環境中也能提供基本的頁面訪問，而不會出現"未鏈接到互聯網"的頁面。
2.快速性:針對網頁渲染及網絡數據訪問有較好優化。
3.融入性：應用能夠被增長到手機桌面，而且和普通應用同樣有全屏、推送等特性。
4.lighthouse
複製代碼

• Service Worker

Service Worker是一個腳本，瀏覽器獨立於當前網頁，將其在後臺運行，爲實現一些不依賴頁面或者用戶交互的特性打開了一扇大門。在將來這一些特性將包括推送消息，背景後臺同步，geofencing（地理圍欄定位），但它將推出的第一個首要特性，就是攔截和處理網絡請求的能力，包括以編程方式來管理被緩存的響應。
 應用：
 1.使用攔截和處理網絡請求的能力，去實現一個離線應用。
 2.使用Service Worker在後臺運行同時能和頁面通訊的能力，去實現大規模
 
複製代碼