[toc] ### 1.網絡優化策略 1. 減少http請求，合并js，css，合理內嵌css, js 2. 設置服務端緩存，提高服務端處理速度，強緩存，協商緩存 ```js 強緩存：// Expires/Cache-Control 協商緩存：// Etag/last-modified, if-modified-since/last-modified ``` 3. 避免重定向，重定向會降低響應速度(301, 302) 4. 使用dns-prefetch，實現dns預解析 ```js <link ref="dns-prefetch" href="" > ``` 5. 域名分片技術，將資源放到不同的域名下。解決同一個域名最多處理6個tcp鏈接問題 6. 采用cdn，加快訪問速度 ``` cdn：內容分發網絡，指派最近的網絡服務提供資源 ``` 7. gzip壓縮優化對傳輸資源進行體積壓縮(html, js, css) ```js Content-Encoding: gzip ``` 8. 加載數據優化級： + preload(預先請求當前頁面需要的資源)，首頁的內容都用preload + prefetch（空閑的時候請求資源，將數據緩存到http緩存中），子頁的內容都用prefetch ```js <link ref="preload" href="style.css"> ``` ### 2.減少重繪和重排 關鍵渲染路徑： ```js js觸發視覺變化 -> 樣式計算 -> 重排布局(回流) -> 重繪繪制 -> 合成 ``` 重排（回流）Reflow：添加元素，刪除元素，修改大小，移動元素位置，獲取位置相關信息 重繪Repaint：頁面中元素樣式的改變并不影響它在文檔流中的位置 + 脫離文檔流：absolute定位 + 渲染時給圖片固定寬高 + 盡量使用css3動畫(scale替代width，因為css3繪制會少一些) + will-change: transform，gpu加速，會產生一個覆蓋的圖層，變化不會影響文檔流 ### 3.靜態文件優化 #### 1.圖片優化 + 圖片懶加載，原生的圖片懶加載，loading="lazy" ```js <img loading="lazy" src="./images/1.jpg" width="300" height="450" /> ``` + 減少圖片尺寸 + img 設置 alt 屬性，也可以提升 seo 優化，圖片給寬高 + 采用 base64url減少圖片請求 + 采用漸進式圖片，從模糊到清晰，ui提供 #### 2.HTML優化 + 語義化html，nav, section, bottom，提高 seo #### 3.css優化 1.減少偽類選擇器，減少樣式層數，減少通配符 2.刪除空行，注釋，無意義單位，css壓縮 3.抽離css：使用外鏈css，可以對css進行緩存 4.減少@import使用，因為@import采用的是串行加載 #### 4.JS優化 1. 使用async, defer 異步加載文件 2. 減少dom操作 3. 操作dom時，使用虛擬dom，最后再一口氣添加到真實dom 4. webWorker