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

2019年8月24日 168次阅读 来源: muffinfish

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

原文发表在我的个人博客: kmknkk.xin

《当我们在浏览器中输入一个URL后，发生了什么？》
图源：知乎-张秋怡

浏览器解析并查询缓存

DNS查询

  • DNS查询顺序如下，若其中一步成功则直接跳到建立链接部分：

    • 浏览器自身DNS
    • 操作系统DNS
    • 本地hosts文件
    • 向域名服务器发送请求

建立链接

  • TCP三次握手(three-way handshaking)

    • 发送方:SYN(synchronize)
    • 接收方:SYN/ACK(acknowledgement),确认信息传达
    • 发送方:ACK – 确认接收方在线可收消息，握手结束
    • Accept

《当我们在浏览器中输入一个URL后，发生了什么？》

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

发送HTTP请求

  • 报文首部(GET /index.html HTTP/1.1)

    • 方法
    • URL
    • HTTP版本
  • 空行(CR+LF)
  • 报文主体

注意:
1.HTTP是无连接、无状态的，即HTTP在传输完成后就会断开(HTTP1.1以前)，并且不会记录访问者的状态。

从HTTP/1.1开始才默认支持持久化连接，即通信一次以后连接不中断，HTTP/1.0需要手动设置：keep-alive。

正常来说，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)
  • 报文主体

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

执行以下过程：
《当我们在浏览器中输入一个URL后，发生了什么？》

解析HTML

  • 根据DOCTYPE来确定文档类型(最常见的就是HTML5,注意如果是HTML4的话有严格和宽松模式之分)
  • 构建DOM树(根据HTML构建类似于二叉树的结构树)

  • 下载资源

    • CSS – 构建CSSOM树
    • js – 等下下载并执行后解析

浏览器渲染

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

《当我们在浏览器中输入一个URL后，发生了什么？》

页面的渲染过程

所以一个的页面的渲染过程由如下几步构成：

  • 构建渲染树(Render Tree): 根据DOM和CSSOM树渲染，不可见元素不被会渲染

《当我们在浏览器中输入一个URL后，发生了什么？》

  • 布局(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等。所以在使用中要注意不能滥用，在常触发重绘和重排的元素上使用即可。

    原文作者：muffinfish
    原文地址: https://segmentfault.com/a/1190000015725567
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞