997fa6d9167bb84d29ee101615d96704
不到 2KB 的 JS 居然使白屏时间增加 200ms !

看到这个标题,我也是震惊了!但现实就是这么残酷,还好经过一个小小的优化之后呢,这个 JS 的下载时间缩短到不超过 10ms。是的,就是不超过 10ms。看到这里的时候,估计你是这个表情:

来!看看庐山真面目。

相信大家一定遇到过这种场景:在一个网站中,引入了第三方网站的资源。比如 JS,或者 CSS,又或者其他字体库,也可能是一张图片。但这个资源并不大,像我们标题说的一样,可能只有几 KB,但却要下载好久。

标题所说的那个 JS 就是上面那个场景。下载的平均时间是 250ms 左右,下面是其中一个请求的时间:

可以看到,这个内容下载下来一共花了 293.29ms,但是 Content Download 的时间只用了 2.05ms,也就是说,几乎所有的时间成本都花在了建立连接上,SSL 就已经花去了 173.34ms,我们再看看这个 SSL 消耗了多少流量:

top Created with Sketch.