前端面试-网络-输入url地址后到页面渲染中间发生了什么
一、输入url地址后到页面渲染中间发生了什么
- 协议端口补全
- 当输入url地址后，浏览器会根据自动补全http/https及端口号80/443
- ASCII编码转换
- 浏览器的url请求仅支持ASCII编码，对于不满足的特殊符号或中文等，会自动进行ASCII编码转换
- encodeURIComponent进行编码转换
- decodeURIComponent进行解码转换
- 浏览器根据url地址查找本地缓存，若命中本地强缓存，则直接使用本地缓存资源，不再发起ajax请求
- 若没有命中缓存，则进行DNS域名解析来获取域名对应的IP地址
- 浏览器向服务器发起tcp连接申请，完成三次握手后，连接通道建立
- 若使用了HTTPS协议，还会进行SSL/TLS握手，建立加密通道，使用SSL时，会确定是否使用HTTP2
- 通道建立完成后，浏览器会决定要附带哪些cookie到请求头中
- 浏览器设置好请求头、协议版本、cookie后，发起GET请求
- 服务器接收到请求后，进行数据处理后，返回响应报文到浏览器
- 浏览器根据使用的协议版本、connection字段的约定，决定是否保留tcp连接
- 浏览器根据响应状态码决定如何处理这次请求
- 浏览器根据这次返回的Content-Type字段识别响应类型，若为
text/html，则对响应内容进行html解析，否则做其他处理
- 浏览器根据响应头字段set-cookie、cache-control等字段，决定是否进行cookie设置、内容缓存（强缓存/协商缓存）
- 浏览器开始自上而下解析HTML（浏览器渲染原理过程）
- 浏览器会启动渲染主进程，调用渲染主线程来执行html解析，生成DOM树和CSSOM树
- 浏览器为了提高性能，会对外部的css、js资源进行预解析
- 当遇到link标签时，外部css资源还未下载完毕，不会停止html解析
- 当遇到script标签时，外部的js资源还未下载完毕，会终止html解析，等待js下载完毕后，再执行html解析，因为js可能会对dom进行操作
- 样式计算：生成带样式的DOM树
- 渲染主线程会遍历DOM树节点，并生成每个节点的最终样式
- 即red会变成rgba格式，em会变成px
- 布局：遍历新的DOM树，生成每个节点的几何信息，即布局树
- 即生成每个节点元素的宽高、位置等几何信息
- display:none的元素没有几何信息
- ::after等为元素会生成对应的几何信息
- 分层：根据渲染规则，对布局树进行分层，然后交给合成线程
- 绘制：
- 合成线程拿到分层后的DOM树后，会生成对应的指令集（即如何绘制）
- 分块：绘制完成后，会对每个层进行分块，变成更小的块
- 光栅化：
- 拿到块后，会调用GPU线程来执行光栅化，光栅化的结果就是生成一个个位图
- 光栅化会优先处理靠近视图内的块信息
- 画：
- 合成线程拿到每个块、位图信息后，生成一个个指引
- 指引会标识每个位图在屏幕中的位置，以及如何旋转、缩放等
- 即形变、旋转是发生在合成线程，与渲染主线程无关，这就是transform高效率的原因
- 生成指引后，合成线程会调用GPU进程，GPU进程会产生系统调用，通过硬件实现屏幕成像
- html渲染的过程中，还会触发各种钩子，如当DOM树解析完毕后，会触发DOMContentLoad事件，当所有资源加载完毕后会触发Load事件
- DOMContentLoad
- 仅能保证DOM解析完毕，但无法保证外部样式下载解析完毕
- 适用于不依赖外部样式、图片资源的初始化操作
- Load
- 当所有资源加载完毕后触发，包括外部样式和图片资源
- 适用于所有资源加载完毕后的初始化操作
