1. 解析 url 中域名到 ip ( 比如查找www.baidu.com 这个域名）
1.1 先查看浏览器是否有解析过该域名，是否还有它的缓存，浏览器的缓存事件2~10 分钟左右，具体看 dns 解析生效的时间，找到有缓存的 id 则返回，没有则进行下一步
1.2 浏览器向系统发起查询，系统向配置的 dns 服务器查询，如果找到则返回，如果没有则进行下一步，下面就是 dns 服务器的接力
1.3 首先向根 dns 服务器去查询（全球 dns根服务器只有13台【日本1台，澳大利亚2台，欧洲2台，美国9台】，还有其他镜像），根服务器会返回 com 所在的 dns 服务器的地址（这种顶级域名所在的dns 解析服务器称为顶级 dns 解析服务器）
1.4 再向com 所在的顶级 dns 解析服务器发起查询，会返回 baidu.com 所在的 dns 服务器的地址
1.5 再向 baidu.com 所在的 dns 服务器发起查询，查询到 www.baidu.com 的服务器 ip地址返回，查不到则报错说明域名解析有问题或者域名过期等
2. 找到 ip,开始进行三次握手，客户端和服务端建立通信连接
3. 连接建立后，客户端向服务器发起查询请求
4. 服务器内部处理，返回网页字符串 htmlstring (网页的状态：init - loading - interactive - complete)
5. 浏览器收到 htmlstring，开始进行解析构建 dom 树
5.1. 从 html 标签开始解析构建 dom 树
5.2. 遇见 link 引入的 css 资源的话，新起线程去加载 css 并构建 cssom ，css不会阻塞 dom 树的构建
5.3. 遇见 script 引入 js 资源，阻止 dom 树的解析构建，去加载 js ，加载完成后再继续 dom 树的解析构建，所以需要把js 放在 body 底部
5.3.1. 如果 script 引入 js时声明了 defer 属性，表示这个资源延迟执行，不阻塞 dom 树的解析构建，
defer 声明的 js 会在 DOMContentLoaded 执行前执行。如果多个声明 defer 属性的 js 他们是按照声明的顺序来执行
5.3.2 如果script 引入 js时声明了 async 属性,表示这个资源异步执行，不阻塞 dom 树的解析构建，async 声明的 js 会在 onLoad执行前执行。如果多个声明 async 属性的 js，他们不按照声明的顺序来执行
5.4. 当 dom 属性解析构建完成后， cssom 也构建完成了，合并生成渲染树（render Tree)，此时浏览器开始描述这些元素的属性
5.5. 根据这些元素的属性生成渲染层或者合成层，合成层是一个独立的层级，利用这个特性来优化渲染
5.6. 渲染层合成层生成完毕后，浏览器呈现引擎去掉用底层的显卡，来绘制页面内容，显示到屏幕上
网友评论