前端性能優化知識點彙總

面試必談的--前端性能優化

爲何作優化

提供給用戶最佳體驗

#有哪些差的體驗
- 白屏很久才顯示內容
- h5浪費用戶流量

優化方案大概分爲如下幾種：

一、下降請求數量
    a、減小獲取數據的接口數（初始數據儘可能經過一個接口返回）
    b、減小js、css的數量（提取公共js、css利用緩存、減小後續加載訪問。有些代碼直接注入頁面無需外鍊形式訪問加載。）
    c、圖片懶加載
二、下降文件大小
    a、圖片壓縮以及使用webp
    b、壓縮js、css
    c、gzip（設置content-encoding:gzip）
    d、icon或者svg繪製圖標
三、加快請求速度
    a、[DNS預解析][1] 
    b、減小域名數量(頁面、js、css、image、接口域名、同種類型文本請求儘可能同域名。)
    c、靜態資源cdn分發
    d、提早加載（提早加載一部分可能被用戶訪問的圖片或者數據信息）
四、緩存
    a、http協議緩存
    b、離線數據緩存localStorage
五、渲染
    a、js、css優化(按照規範來寫--google規範)
    b、服務器渲染

DNS預解析
google規範