浏览器从输入URL到页面加载过程(+1白话精简讲解)

423 阅读2分钟

介绍

这是一个很常见的问题,我们每天都在经历这件事,但是却不能说出具体的过程,同时这也是前端面试的一个考点,所以每个学习前端的人都应该了解这个过程。

本文以Chrome浏览器为例,其渲染引擎为Webkit

接下来让我们一步一步走

输入URL后

可概括为以下几个过程:

  • 浏览器从DNS服务器获取域名的IP地址(DNS解析)
  • 浏览器与该IP服务器建立TCP连接
  • 浏览器发送HTTP请求
  • 服务器接收请求并返回HTTP报文
  • 浏览器接收返回内容

拿到返回内容后

先放两张很容易搜到的流程图

可概括为以下几个过程:

  • 渲染引擎同时解析HTML文档和样式(CSS和Style中),两者分别生成DOM树和CSSOM树
  • 将DOM中的"可见内容"(除head或display: none等等)和CSSOM合并(attachment)成RenderTree(渲染树)
  • RenderTree构建完毕后进行布局(layout),即为每个节点分配坐标
  • 遍历RenderTree,Painting(绘制)每个节点

解析器遇到 script 标记时会立即解析并执行脚本,文档的解析将停止,直到脚本执行完毕

补充

什么是CSSOM?

CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动

为什么Script会阻碍文档的解析?

因为这两者公用同一个线程,且Script优先级较高

如何避免上一个问题?

  • defer: 当浏览器遇到具有defer属性的脚本时,它会阻止加载和执行脚本,直到HTML文档中的所有元素都已解析为止
  • async: 使用 async 属性时,浏览器会异步加载和执行脚本,同时继续解析HTML中的其他元素,包括其他脚本元素

HTML都解析完成后才会绘制RenderTree么?

并不是。浏览器会尽早的把内容显示出来,所以每解析一部分就会绘制一部分。

希望你看完能有所收获