当我们在浏览器中输入一个URL后,发生了什么?

当我们在浏览器中输入一个URL后,发生了什么?

写在开头:这篇文章被我归入博客性能优化类别,是因为我认为如果我们要优化网站性能、提升用户体验,首要目标就是要知道用户在本地请求并加载你的网页的过程中,到底发生了什么,在此基础上我们才能更好的优化网页。
来源于第三方博客:点此前往

图源:知乎-张秋怡

浏览器解析并查询缓存

DNS查询

  • DNS查询顺序如下,若其中一步成功则直接跳到建立链接部分:
    • 浏览器自身DNS
    • 操作系统DNS
    • 本地hosts文件
    • 向域名服务器发送请求

建立链接

  • TCP三次握手(three-way handshaking)
    • 发送方:SYN(synchronize)
    • 接收方:SYN/ACK(acknowledgement),确认信息传达
    • 发送方:ACK – 确认接收方在线可收消息,握手结束
    • Accept

TCP三次握手的的好处在于:发送方可以确认接收方仍然在线,不会因为白发送而浪费资源。

发送HTTP请求

  • 报文首部(GET /index.html HTTP/1.1)
    • 方法
    • URL
    • HTTP版本
  • 空行(CR+LF)
  • 报文主体
注意: 1.HTTP是无连接无状态的,即HTTP在传输完成后就会断开(HTTP1.1以前),并且不会记录访问者的状态。
从HTTP/1.1开始才支持持久连接,即通信一次以后连接不中断。
正常来说,HTTP请求、响应方式为每请求一次就响应一次:
请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
若采用持久连接请求管线化方式:
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
使用管线化的条件:
  • 服务端需要支持管线化
  • 只有GET和HEAD可以进行管线化,POST请求有所限制
  • 管线化不会影响响应到来的顺序
2.关于CR(Carriage Return,回车)和LF(Line Feed,换行)
Dos和Windows采用CR/LF表示下一行 UNIX/Linux采用LF表示下一行 MAC OS系统则采用CR表示下一行

服务器发送响应

  • 报文首部(HTTP/1.1 200 OK)
    • HTTP版本
    • 响应状态码
    • 状态码信息
  • 空行(CR+LF)
  • 报文主体

客户端收到页面,浏览器渲染页面

执行以下过程:

解析HTML

  • 根据DOCTYPE来确定文档类型(最常见的就是HTML5,注意如果是HTML4的话有严格和宽松模式之分)
  • 构建DOM树(根据HTML构建类似于二叉树的结构树)
  • 下载资源
    • CSS – 构建CSSOM树
    • js – 一般下载后立即执行,会阻塞页面渲染

浏览器渲染

在聊浏览器渲染之前,我们先明确一个概念: 事实上,我们看到的页面并不是直观所见的一层图页,而是由许多DOM元素渲染层(Layers)组成的,如下图。

页面的渲染过程

所以一个的页面的渲染过程由如下几步构成:
  • 构建渲染树(Render Tree): 根据DOM和CSSOM树渲染,不可见元素不被会渲染

  • 布局(layout): CPU根据渲染树布局计算元素的具体位置和大小,转换成绝对像素,并且根据样式,分割成多个独立的渲染层(Layers),将每一层对应到位图中
  • 绘制(Paint): GPU根据每个渲染层(Layers)的位图绘制每个点,即像素填充,并且将所以渲染层缓存,如果下次页面变动但是渲染层没变就不会触发重绘。
  • 层级合成(Compositing): 顾名思义,即处理多层渲染层之间的关系,将其合成为一个完整的页面。

重绘和重排

重绘(repaint):
  • 元素视觉表现属性被改变即触发重绘,如改变visibility,color等,不会影响到dom结构
reflow(重排):
  • 与repaint区别就是:所有影响dom的元素布局的事件都会触发重排。同时也会触发repaint。
  • 这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
reflow常见情况:
  • 增删改DOM节点
  • 移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
  • 修改width、display等CSS样式
  • resize窗口或是滚动的时候
  • 修改网页默认字体(不建议)
  • display:none会触发reflow和repaint,而visibility:hidden只会产生repaint

显而易见,要提高页面性能,首要目标就是减少重绘重排,具体方法包括但不限于以下几种:

  • 压缩DOM深度,以免内层元素改变而导致多个外层都改变。
  • 对于没用的元素,尽量设置为display:none,减轻绘制压力。
  • 在对DOM进行大量元素操作时,我们可以使用利用DocumentFragment对象进行操作,最后再一次性装载进DOM结构中。
  • 指定img的大小:由于img是内联元素,所以在加载后会改变宽高,严重的会导致整个页面重排,所以最好在渲染前就设置好其宽高,或者让其脱离文档流。

DOM渲染层(Layers)与GPU硬件加速

知道了浏览器页面的渲染合成过程后,我们不难得出一个结论:
如果我们把会发生大量重绘重排的元素提取出来,单独触发一个渲染层(Layer),就不会把其他元素一起带着重绘,这会大大提高页面性能。
那么如何触发渲染层,让GPU来加速绘制呢?最简单的方法有以下三种:
will-change: transform;
will-change: opacity;
transform: translateZ(0);
PS:使用Layers来触发GPU加速(硬件加速)也会带来负面影响,如电量损失过快、占用内存和GPU等。所以在使用中要注意不能滥用,在常触发重绘和重排的元素上使用即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注