一、DNS(Domain Name System) 域名解析
根据输入的 URL 域名找到真实 IP 地址,在查找的过程中,首先 DNS 会查询是否有缓存。
-
从浏览器中查找,不同浏览器设置的缓存时间不同,一般在2-30分钟;
-
从操作系统中查找;
-
从路由器中查找;
-
从 ISP 中查找;
-
域名服务器递归查询,首先从顶级域名(一般顶级域名已经在缓存中了),再到二级域名,以此类推。
二、建立TCP 连接
根据 IP 地址,客户端与服务端进行三次握手,建立连接(参考文章TCP的三次握手与四次握手)。
三、传输数据
连接后,客户端向服务端发起 HTTP 请求,服务器接收到请求后,返回请求静态资源,并同时调用 apache 服务器请求接口数据。
四、关闭 TCP 连接
数据传输完成,客户端与服务端进行四次挥手,关闭连接。
五、渲染页面
对于浏览器根据服务端返回的静态资源,浏览器使用 Native GUI 引擎渲染 HTML 和 CSS ;使用 JS 引擎加载 JS 。
- 将 HTML 节点解析成 DOM 树结构
从 HTML 字节码到 DOM 树结构的流程:字节(Bytes) => 字符串(Characters) => Tokens => 节点(Nodes) => DOM
计算机只能识别0和1的字节,根据字节的编码规则将字节转换成字符串,再将字符串转化为 W3C 定义的各种标签,生成 tokens(令牌),匹配字符串,将 tokens 按照规则转换为包含属性和规则的节点对象(nodes),根据每个节点的层次关系(父子节点关系)和规则转换为直观的树形结构。HTML 是增量构建的,在 HTML 文件还在传输时,这个转换过程就已经开始了。最终得到完整的 DOM(Document Object Module文档对象模型)
- 将 CSS 解析成 CSSOM 规则树
CSS 构建的过程跟 DOM 差不多,只不过 CSS 会涉及到复杂的计算,如 CSS 的属性来源,匹配不同的类(id 或者 class),确认复写规则及权重,最后确定每个节点的样式值,形成 CSSOM(CSS Object Module CSS对象模型)。
- 将 DOM 与 CSSOM 组合成 Render-tree(渲染树)
从 DOM 节点开始遍历 HTML 上和 CSS 上的可见节点;
对于每个可见的节点,为其找到适配的 CSSOM并组合他们;
将所有的节点根据层级关系和规则构建成 render-tree 树。
- 加载 JavaScript 脚本
虽然 HTML\CSS 与 JS 是通过不同的引擎加载,但是却是互斥的,即加载 HTML\CSS 时,JS 会停止加载,相反亦然,这是因为 JS 引擎可以操作 DOM,改变样式、内容等。所以当执行了 JS 之后,渲染树要重新构建。