快速定位網站性能問題，提早下班！

時間 2020-04-01

標籤快速定位網站性能問題提早下班欄目系統網絡简体版

原文原文鏈接

你們好，我是小雨小雨，致力於分享有趣的、實用的技術文章。
內容分爲翻譯和原創，若是有問題，歡迎隨時評論或私信，但願和你們一塊兒進步。
分享不易，但願可以獲得你們的支持和關注。javascript

查看network時間

直接來一張大圖你怕不怕？哈哈
我們先看看谷歌瀏覽器network中waterfall各字段的含義哈。簡單看下就成，用到了再查不耽誤的。css

Queueing: 排隊時間，好比出現如下幾種狀況的時候，將進入排隊html
1. 當前請求前有優先級更高的其餘請求
2. HTTP的1.0和1.1版本中，若是對一個域發送超過六個請求，那麼以後的請求須要等待以前請求處理完畢，這是瀏覽器對tcp鏈接數的限制。咱們能夠將資源託管到不一樣域下來緩解
3. 瀏覽器在進行其餘操做，好比分配硬盤內存
Stalled: 發送請求以前等待的時間。它可能由於進入隊列的任意緣由而被阻塞。這個時間包括代理協商的時間前端
DNS Lookup: dns解析時間。線路爲: 瀏覽器緩存 => 操做系統緩存 => 路由器緩存 => 本地hosts文件 => dns服務器java
Waiting (TTFB): 瀏覽器從發送請求到接收到服務器第一個字節的時間，全拼: Time To First Byte，包含這幾個操做: DNS解析 + TCP三次握手 + HTTP請求 + 第一字節返回node
Content Download: 內容下載時間web

非經常使用

ssl: ssl握手時間
Proxy negotiation: 代理協商時間
Request sent: 發送請求這一操做所花費的時間，通常狀況下很短
ServiceWorker Preparation: service worker啓動時間
Request to ServiceWorker: 請求發送到service worker的時間
Receiving Push: 收到服務端發送的數據的時間(http2.0支持)
Reading Push: 讀取以前緩存的服務器推送的數據的時間(http2.0支持)

Queueing&TTFBchrome

讓瀏覽器說話

常見的一個問題是：說說從輸入url到瀏覽器頁面展現這個流程，此次，只說瀏覽器接收到html後，瀏覽器作了什麼，而且是讓瀏覽器本身說，咱們就看着。瀏覽器

下面實例代碼:緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./normal.js"></script>
    <script defer src="./defer.js"></script>
    <script async src="./async.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function fengshiyu () {
            const box = document.querySelector('.box');
            const arr = new Array(1000).fill(1);
            let vDom = '';
            
            arr.forEach((a, i) => {
                vDom += `<p>${i}</p>`;
            });

            box.innerHTML = vDom;
        });
    </script>
</head>
<body>
    <img src="./aCxZpaq.png" alt="">
    <div class="box"></div>
    <h1>你哈哈哦</h1>
</body>
</html>

其中三個js文件都是近乎同樣的內容

const deferArr = new Array(1000).fill(2);

deferArr.forEach((element, i) => {
    console.log(i, element);
});

node啓動服務去服務這幾個文件，而後咱們聽瀏覽器說吧~

從這開始，我就不是小雨了，我是瀏覽器，記住，我是瀏覽器！

你們好，我是瀏覽器，剛纔小雨用我訪問了一個頁面，服務器大哥已經把內容返回給我了，我如今要給小雨展現出來。

上performance(谷歌瀏覽器開發者工具performance面板)~

首先，我得看看html裏都有啥(逐行消化解析)。

哦_{我看到了有html，有head，誒}還有幾個script，那我得根據狀況暫停一下了，不能憨憨同樣一直往下看，否則這幾個js要是操做dom了，那我不白渲染了嗎？

那我就先加載這幾個script吧，等等，小雨這個貨竟然還加defer和async，那就按個人規則來吧，我先把這三個script下載一下，對於defer和async能夠與html解析並行執行，下載完以後，除了defer外，我都得馬上執行，不敢有絲毫猶豫。defer呢，我得在document解析完，並在DOMContentLoad以前使用它，誒，就是這麼麻煩~

上途中上方是network時間線，下面是主線程時間線

怎麼？你說影響defer和async影響到html解析了？沒有啊，他們那是佔了normal的光~

下載完以後，就各自爲營，循序漸進的執行啦。

看到沒，就算defer寫到async的上面，也不必定就在async前面執行，defer確定得在DOMContentLoad以前執行，而async的話，啥時候完事啥時候執行。也就是說，只有defer不會影響html解析，因此啊，若是大家要想加快頁面顯示的話，就視狀況多用defer吧。還有，這倆屬性只有script在head中才會生效嗷。