从输入url到页面加载完成,发生了什么?
这个问题非常重要,因为后续的内容都将以这个问题答案为骨架展开。我们现在站在性能优化的角度一起简单地复习一下这个经典的过程:首先我们通过DNS将url解析为对应的IP地址,然后与这个IP地址确定的那台服务器建立起TCP网络连接,随后我们向服务端抛出我们的HTTP请求,服务端处理完我们的请求后把目标数据放在HTTP相应里面返回给客户端,拿到相应数据的浏览器就可以开始渲染的过程,渲染完毕就可以呈现给用户,并等待相应用户操作(如下图)。
我们将这个过程切分为如下的过程片段:
- DNS解析
- TCP连接
- HTTP请求抛出
- 服务端处理请求,HTTP相应返回
- 浏览器拿到相应数据,解析响应内容,把解析的结果展示给用户
大家谨记,我们任何一个用户端的产品,都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡,从而打磨出用户满意的速度
从原理到实践:各个击破
我们接下来要做的事情,就是针对这五个过程进行分解,各个提问,各个击破。
具体来说,DNS解析花时间,能不能尽量减少解析次数或者把解析前置?能——浏览器DNS缓存和DNS prefetch。TCP每次的三次握手都急死人,有没有解决方案?有——长链接,预链接,接入SPDY协议。如果说这两个优化往往都需要我们和团队的服务端工程师协作完成,前端单方面努力很有限,那么HTTP请求呢?——在减少请求次数和减少请求体积方面,我们应该是专家!再者服务器越远,一次请求就越慢,那部署时把静态资源放在离我们更近的CDN上是不是就能够快一些?
以上提到的都是网络层面的性能优化,再往下走就是浏览器端的性能优化——这部分涉及资源加载优化、服务端渲染、浏览器缓存机制的作用、DOM树的构建、网页排版和渲染过程、回流与重绘的考量、DOM操作的合理规避等等——这才是前端工程师可以真正施展拳脚的地方,学习这些知识,不仅可以帮助我们从根本上提升页面性能,更能够大大加深个人对浏览器底层原理、运行机制的理解,一举两得!
我们整个的知识图谱,用思维导图展示如下:
本文转自《前端性能优化原理与实践》