快速定位网站性能问题，提前下班！

2020-03-31 本文已影响0人小雨小雨丶

大家好，我是小雨小雨，致力于分享有趣的、实用的技术文章。
内容分为翻译和原创，如果有问题，欢迎随时评论或私信，希望和大家一起进步。
分享不易，希望能够得到大家的支持和关注。

查看network时间

直接来一张大图你怕不怕？哈哈
咱们先看看谷歌浏览器network中waterfall各字段的含义哈。简单看下就成，用到了再查不耽误的。

image

Queueing: 排队时间，比如出现以下几种情况的时候，将进入排队
1. 当前请求前有优先级更高的其他请求
2. HTTP的1.0和1.1版本中，如果对一个域发送超过六个请求，那么之后的请求需要等待之前请求处理完毕，这是浏览器对tcp连接数的限制。我们可以将资源托管到不同域下来缓解
3. 浏览器在进行其他操作，比如分配硬盘内存
Stalled: 发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间
DNS Lookup: dns解析时间。线路为: 浏览器缓存 => 操作系统缓存 => 路由器缓存 => 本地hosts文件 => dns服务器
Waiting (TTFB): 浏览器从发送请求到接收到服务器第一个字节的时间，全拼: Time To First Byte，包含这几个操作: DNS解析 + TCP三次握手 + HTTP请求 + 第一字节返回
Content Download: 内容下载时间

非常用

ssl: ssl握手时间
Proxy negotiation: 代理协商时间
Request sent: 发送请求这一操作所花费的时间，一般情况下很短
ServiceWorker Preparation: service worker启动时间
Request to ServiceWorker: 请求发送到service worker的时间
Receiving Push: 收到服务端发送的数据的时间(http2.0支持)
Reading Push: 读取之前缓存的服务器推送的数据的时间(http2.0支持)

Queueing&TTFB

让浏览器说话

常见的一个问题是：说说从输入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之前使用它，诶，就是这么麻烦~

image

上途中上方是network时间线，下面是主线程时间线

怎么？你说影响defer和async影响到html解析了？没有啊，他们那是占了normal的光~

下载完之后，就各自为营，按部就班的执行啦。

image

看到没，就算defer写到async的上面，也不一定就在async前面执行，defer肯定得在DOMContentLoad之前执行，而async的话，啥时候完事啥时候执行。也就是说，只有defer不会影响html解析，所以啊，如果你们要想加快页面显示的话，就视情况多用defer吧。还有，这俩属性只有script在head中才会生效嗷。