談談前端頁面優化

最近在看前端網頁優化的文章， 來這裏作個總結吧 ！

優化， 爲何要作前端網頁優化尼 ！ 還不是由於網頁打開慢嗎 ？ 別人的都是秒開，就咱家的10秒開， 爲啥 ？ 瀏覽器對咱有意見 。。。。。。

好了， 廢話很少說了，直接上乾貨。

#### 首先咱們來拆解下，頁面加載到底慢在哪 ？

1. 白屏時間
2. 首屏時間
3. 頁面加載時長

其次咱們來看看 ，網頁是如何展現到瀏覽器上的吧 。
1: WebView 初始化（通常耗時在400ms， 只有移動端的hybrid）
2：DNS 服務器解析域名（耗時在150ms）
3：創建TCP連接。（300ms）
4：服務器響應，獲取獲取數據 ）
5：解析獲取到的html，生成DOM樹，渲染到頁面上

白屏時間通常指的就是 1 到 4的過程， 因爲還在請求數據， 這個時間頁面是空白的 。 那咱們該如何優化尼 ：

1. WebView初始化優化， 咱們是能夠在打開app以後 ，作一個webview預加載的（後臺運行，先初始化好），當要用到的時候，在直接拿出來用就能夠了，通常能夠節省200ms
2. DNS解析， 這裏能夠加一個dns預解析的 代碼以下
3. 這裏選用http2.0；多路複用的， 同域名下多個請求，創建一次tcp連接就能夠了，
4. 這步很關鍵了，下載速度跟你的資源大小有很大的關係。因此靜態資源越小越好；好比：nginx服務器走gzip壓縮，vue打包文件作路由懶加載（包切割）， 或者離線包 cnd服務，緩存 等等哈。
5. 這步的話 ， 主要避免重排。由於重排 渲染器須要從新計算dom樹， 很是耗性能。

嗨呀！ 寫到這裏 又詞窮了， 那等我想一想，明天再來寫吧 ！