前端性能優化

網絡環境 優化重點之一
DNS尋址
DNS之ip和域名之間相互轉換
輸入ip後自動轉爲域名，是作了一次301跳轉
301:永久跳轉 302：暫時跳轉 304：瀏覽器緩存，圖片緩存解決:在圖片後面加參數如 ?v=20200101
DNS從右到左解析，最開始解析最後的.cn/.us

性能檢測。webpagetest

加載順序
渲染流程

本地js性能監測：
chrome://tracing/
頁面性能分析：
www.webpagetest.com
加載方式三種：
同步加載：都加載完才能展現給用戶看，如HTML，css。
分級加載：同步+異步相結合，先給用戶加載重要信息好比Logo/核心功能，後面加載不重要的。
按需加載：用戶不觸發該功能咱們就不加載。或者用戶不觸發，可是帶寬閒置，咱們再加載。

本地存儲
SessionStorage: 臨時存儲神器，關閉頁面標籤自動回收，頁面刷新不會被回收，不能夠跨頁面交互。
Cookie：兼容性最好，幾乎全部的瀏覽器都支持。缺點是大小有限制。
localStorage:幾乎全部瀏覽器都支持，數據存放在xxuser/AppData/Local/Google/ ..../Local Storage，大小限制約爲5M.

openDatabase: 就是一個完整的數據庫，使用起來跟mySQL沒有區別。數據存放在xxuser/AppData/Google/Chrome/User Data/Default/databases目錄下。
indexDB:
瀏覽器緩存JS文件的機制不透明。

bigpipe簡介
佔位--請求後填充

優化術語定義：
技術類：
首屏時間（加載到第一屏的功能點，要求可見可用，所消耗的時間點）
白屏時間：從進入頁面到headbody解析的時間
可操時間：與模塊相關，主要是測試核心模塊的使用率，以及用戶感知
連通率：多爲視頻站點。時間爲縱軸，主要是對應時間用戶看到視頻或者聽到聲音的比例。

產品類：
pv一次訪問一次pv
uv
day日活躍用戶數量
Mau 月活用戶人數
跳出率：跳出時間留下來的人/pv

經常使用圖片優化方法：
圖片很差的地方：佔用帶寬，圖片自己與分辨率相關，不一樣設備看到圖片要求也不同。
頁面中圖片的加載效果：
有一種是加載先變模糊而後清晰，另外一種是很清晰，可是逐行加載顯示。
其實他們的區別是壓縮算法不同。模糊到清晰是小波算法，逐行顯示是離散餘弦變換，瀏覽器根據不一樣圖片選擇不一樣渲染算法。
備選技術：CSS效果、CSS動畫，體積很小，提供與分辨率無關的效果。

CSS-Sprites工具：
http://alloyteam.github.io/gopng -- 騰訊 -- 簡單好用，麻煩的地方是每次須要本身改圖片，本身定位
http://fis.baidu.com/ -- 百度 -- 自動化

<picture></picture>標籤，響應式圖片設計。
<video></video>在不一樣瀏覽器上UI有差異，可是支持自定義UI，隱藏video標籤自己UI。

站點視頻優化：
即便視頻資源<video>標籤放在圖片資源<img>前面，瀏覽器會認爲video是多媒體資源然後置，把video放在最後加載。
資源前置方法：在資源放在最前面用link標籤方式預加載到內存，後面再用video標籤去從內存讀取。

高性能DOM：只能從避免觸發repaint/reflow入手。

reflow（迴流）: 根據各類樣式計算全部元素的盒子模型，並放到相應位置。 -- 理解爲計算盒子位置和安放盒子
當位置發生改變，不管是自身仍是兄弟元素髮生改變，必定會發生迴流。
repaint（重繪）:當頁面中的盒子屬性（位置、大小、顏色等）肯定下來後，瀏覽器便把盒子繪製一遍，因而頁面內容出現了。-- 理解爲繪製盒子長相
只要位置沒有發生改變，只是所看到的頁面自己視覺發生改變了，就必定會發生重繪。
迴流必定觸發重繪，可是重繪不必定觸發迴流。
DOM元素的添加、修改（內容）、刪除會同時觸發迴流和重繪。

如何減小觸發repaint/reflow:
如減小display屬性修改次數，用document fragment合併屢次修改等。

Chrome Developer Tools查看重繪：
豎向三個點 -- More Tools -- Rendering -- 勾選Paint Flashing，這時瀏覽器重繪的部分就會高亮顯示。

結語：編碼實際上是填空題，80%的時間用來思考，10%的時間用來編碼，10%的時間用來調優。性能優化最困難的地方是發現問題。性能優化不是單獨前端領域就能解決問題。不少問題並非代碼問題，多是外部環境如CDN掛掉了。