从输入 URL 到页面加载完成,发生了什么?

381

我们现在站在性能优化的角度,一起简单地复习一遍这个经典的过程:首先我们需要通过 DNS(域名解析系统)将 URL 解析为对应的 IP 地址,然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接,随后我们向服务端抛出我们的 HTTP 请求,服务端处理完我们的请求之后,把目标数据放在 HTTP 响应里返回给客户端,拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕,页面便呈现给了用户,并时刻等待响应用户的操作(如下图所示)。

我们将这个过程切分为如下的过程片段:
a. DNS 解析
b. TCP 连接
c. HTTP 请求抛出
d. 服务端处理请求,HTTP 响应返回
e. 浏览器拿到响应数据,解析响应内容,把解析的结果展示给用户

大家谨记,我们任何一个用户端的产品,都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡,从而打磨出用户满意的速度。

网络层面的优化:
DNS解析花时间,尽量减少解析次数或者把解析前置,使用浏览器DNS缓存和DNS prefetch。
TCP三次握手如何优化,长链接、预链接、接入SPDY协议。
HTTP请求,减少请求次数和请求体积。
服务器离我们越远,一次请求就越慢,静态资源放在离我们更近的CDN上。
浏览器端的优化:
资源加载的优化
服务端的优化
浏览器缓存的机制的利用
DOM树的构建
网页排版和渲染过程
回流与重绘的考量
DOM操作的合理规避
......