前端性能優化經常使用總結

時間 2020-04-10

原文原文鏈接

性能優化優勢

一、加快頁面展現和運行速度
二、節約服務器帶寬流量
三、減小服務器壓力web

哪方面須要作性能優化？

在這以前，咱們先分析一個頁面從發起請求到展現到用戶大概流程：
一、DNS 查詢
二、發送 HTTP 請求
三、等待服務器響應
四、下載服務器響應內容
五、解析 HTML、CSS、JS
六、渲染 HTML、CSS、JS 和圖片
七、響應用戶事件瀏覽器

針對 DNS 查詢優化

減小 DNS 查詢的次數緩存

減小網站所用的域名個數，減小 DNS 查詢時間建議一個網站使用至少 2 個域，但很少於 4 個域來提供資源

針對發送 HTTP 請求優化

本地存儲性能優化

使用較小的圖片，合理使用 base64 內嵌圖片服務器

在頁面使用的背景圖片很少且較小的狀況下，能夠將圖片轉化成 base64 編碼嵌入到 HTML 頁面或 CSS 文件中，這樣能夠減小頁面的 HTTP 請求數。須要注意的是，要保證圖片較小，通常圖片大小超過 2KB 就不推薦使用 base64 嵌入顯示了。

使用 CDN 加速異步

雪碧圖前端性能

優化原理來於web優化中的減小http請求數量，經過減小頁面圖片的數量來實現

儘量合併 JS 代碼async

提取公共方法，進行面向對象設計等……

針對等待服務器響應方面的優化

合理設置 HTTP 緩存
使用 CDN 緩存
閒話 CDN
CDN是什麼？使用CDN有什麼優點？佈局

針對下載服務器響應內容優化

延遲(defer)加載/異步(async)加載依賴
懶加載
靜態資源打包，開啓 Gzip 壓縮，減小資源下載負擔

針對渲染 HTML、CSS、JS 和圖片優化

最小化重繪和迴流

批量修改元素樣式、避免 table 佈局等針對響應用戶事件優化儘可能不在前端作複雜的運算

避免 HTML 中書寫 CSS 代碼

由於這樣難以維護。

使用 Viewport 加速頁面的渲染

使用語義化標籤

減小 CSS 代碼，增長可讀性和 SEO

減小標籤的使用

DOM 解析是一個大量遍歷的過程，減小沒必要要的標籤，能下降遍歷的次數

避免 src、href 等的值爲空

由於即時它們爲空，瀏覽器也會發起 HTTP 請求

把 CSS 資源引用放到 HTML 文件頂部

通常推薦將全部 CSS 資源儘早指定在 HTML 文檔 <head> 中，這樣瀏覽器能夠優先下載 CSS 並儘早完成頁面渲染。

CSS 動畫使用 translate、scale 代替 top、height

儘可能使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計算

優化選擇器路徑

使用 .c {} 而不是 .a .b .c {}

選擇器合併

共同的屬性內容提起出來，壓縮空間和資源開銷。

精準樣式

使用 padding-left: 10px 而不是 padding: 0 0 0 10px。

避免通配符

.a .b * {} 這樣的選擇器，根據從右到左的解析順序在解析過程當中遇到通配符 * {} 會遍歷整個 DOM，性能大大損耗。

少用 float

float 在渲染時計算量比較大，可使用 flex 佈局。

爲 0 值去單位

增長兼容性

壓縮文件大小，減小資源下載負擔

預先設定圖片大小

儘可能預先設定圖片大小在加載大量的圖片元素時，儘可能預先限定圖片的尺寸大小，不然在圖片加載過程當中會更新圖片的排版信息，產生大量的重排

JavaScript 資源引用放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部能夠防止 JavaScript 的加載和解析執行對頁面渲染形成阻塞。因爲 JavaScript 資源默認是解析阻塞的，除非被標記爲異步或者經過其餘的異步方式加載，不然會阻塞 HTML DOM 解析和 CSS 渲染的過程。

DOM 的多個讀操做（或多個寫操做），應該放在一塊兒。不要兩個讀操做之間，加入一個寫操做。

CSS 能作的事情，儘可能不用 JS 來作

畢竟 JS 的解析執行比較粗暴，而 CSS 效率更高

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。