浏览器渲染页面过程

浏览器渲染页面

• 从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上
  • DNS 查询
  • TCP 连接
  • HTTP 请求
  • 服务器响应
  • 客户端渲染

DNS 查询

• 我们在浏览器输入网址，其实就是要向服务器请求我们想要的页面内容，所有浏览器首先要确认的是域名所对应的服务器在哪里。将域名解析成对应的服务器IP地址这项工作，是由DNS服务器来完成的。
• 客户端收到你输入的域名地址后，它首先去找本地的hosts文件，检查在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果没有，再去找DNS服务器。一般用户很少去编辑修改hosts文件。

TCP 连接

• 拿到 ip 后 3次握手

• 客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

http 请求与响应

• 与服务器建立了连接后，就可以向服务器发起请求了。这里我们先看下请求报文的结构（如下图）

• 服务器接收请求

  • 服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

• 返回响应结果

  • 响应报文
    

  • 在响应结果中都会有个一个HTTP状态码，比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常，并能了解具体的错误

关闭 tcp 链接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

客户端渲染

• 浏览器对内容的渲染

  • 处理 HTML 标记并构建 DOM 树
  • 处理 CSS 标记并构建 CSSOM 树
  • 将 DOM 与 CSSOM 合并成一个渲染树
  • 根据渲染树来布局，以计算每个节点的几何信息
  • 将各个节点绘制到屏幕上

• 谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。

  • 默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。

  • JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。
    存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。另外：

  • 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
    JavaScript 可以查询和修改 DOM 与 CSSOM。

  • CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
    所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

    • CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
    • JavaScript 应尽量少影响 DOM 的构建。