当我们打开一个网页,浏览器会将网页的内容呈现给我们,了解一个网页从请求开始到完全呈现的过程,可以让我们更好地开发高性能的网站
请求阶段
当我们从浏览器的导航栏输入完URL后,浏览器会进行一系列的动作,去获取文档的内容
DNS解析
访问网站时,浏览器需要查找域名对应的IP
- 浏览器先查找本地hosts文件是否有对应的域名指向,如果有则直接获取对应的IP
- 如果本地没有配置,则查找本地是否有该域名的DNS缓存,如果有则取缓存中保存的IP(缓存只会在本地保留一段时间)
- 如果缓存中不存在,则请求本机配置的DNS服务器,获取域名IP
建立连接
查找到IP之后,浏览器通过TCP协议的“SYN-ACK/SYN-ACK”三次握手消息,尝试与服务器进行通信
TLS加密
如果我们使用的是https协议,除了通过三次握手建立连接之外,还需要进行TLS协商,建立加密连接
- 客户端向服务端请求数字证书
- 服务端将证书公钥传输给客户端
- 客户端验证证书的合法性,如果证书受信(或用户选择信任不受信的证书),浏览器会生成一串随机key,并用公钥加密后发送给服务端(非对称加密)
- 服务端接收到加密的key后,通过私钥解密获取key
- 服务端使用key加密传输内容(对称加密)发送给客户端,客户端通过key解密内容
请求响应
连接建立完毕后,开始传输数据,TCP链接通过拥塞控制算法(参考文章)。第一个响应包通常是14KB大小,客户端收到之后,下个包的大小会增加到之前包的2倍,直到达到设定的阈值或者遇到丢包。通过反复地探索网络传输能力来确定适合的传输速度,页面内容(只包含HTML内容)小于14KB对于web性能的优化来说是一个比较重要的点
解析阶段
浏览器收到第一块数据时,开始解析收到的内容,即使页面大于14KB,浏览器也会根据其要交给有的数据进行解析,所以在前14KB中包含浏览器所需的内容对于优化是很重要的。尽管接收到数据就开始解析,浏览器需要将HTML、CSS、JS全部解析完成,才能将页面展示到屏幕上
构建DOM树
浏览器将HTML字符串转化为DOM数的过程大体上分为三步:
- HTML文本转化为token
- 将token转化为携带其属性及属性值的节点
- 将节点连接,组织成DOM树
良好的HTML文档格式,会提高构建DOM树的效率,节点数量越多,构建DOM的时间越长;
HTML解析的过程中,如果遇到非阻塞资源(图片、link、外联async/defer script等),会跳过等待,继续解析后面的HTML,但是需要注意以下几点:
- link css虽然不阻塞HTML的解析,但是如果解析过程中遇到普通的(不带async/defer)script标签,因为js会阻塞HTML解析,而js有操作css的api,需要等待之前的css解析完毕
- 添加defer属性的script不会阻塞HTML解析,会在HTML解析完成后执行js,执行完后浏览器会才会触发DOMContentLoaded事件
- 添加async属性的script不会阻塞HTML解析,但是当js文件下载完成后,会立即执行js代码,如果HTML解析完成后,js文件未下载完成,浏览器会触发DOMContentLoaded,不会等待js下载
如果遇到阻塞资源(不带async/defer的script标签等),浏览器会暂停HTML的解析,优先去解析当前资源
构建CSSOM树
CSSOM的构建和DOM类似,浏览器遍历css规则,将样式属性添加到每个关联的节点上,先从适用于节点的最通用规则开始,逐渐应用更具体的规则递归地优化计算样式
渲染阶段
当解析完HTML和CSS(构建完DOM和CSSOM)之后,浏览器开始进行页面的渲染,将之前构建的DOM和CSSOM进行合并,然后绘制到屏幕上
渲染树
DOM和CSSOM进行组合生成渲染树,渲染树会从DOM的根节点开始遍历,将对每个可见的节点(display属性不等于none)应用CSSOM上对应的样式规则,确定每个节点的计算样式
计算布局(Layout)
页面上多数节点都是一个盒模型,布局是确定渲染树中每个节点在页面中的宽高、位置的过程。
渲染树构建完成后,浏览器开始从根节点遍历,根据视区的大小和每个元素的盒模型属性,来确定元素的尺寸和位置,如果遇到不确定尺寸的元素(未定义宽高的图片),会为之提供占位符,当尺寸确定后重新计算
当对布局计算完成后,如果发生影响页面布局的动作,浏览器会重新计算节点大小、位置,此过程叫做回流(重排)
绘制(Paint)
当布局计算完成后,浏览器需要结合视区的尺寸以及页面的滚动,确定出页面中需要展示的元素,并将元素转化为实际的像素数据
- 为了能够达到60fps的绘制效果,样式计算、布局计算、绘制这些过程需要在1000ms / 60 = 16.67ms内完成
- 绘制过程是可以分层的,一些特定的元素(video、canvas、css属性包含3D变换/will-change/opacity的元素等),会将绘制过程提升到自己的层上,虽然提高了内存的管理成本,但是也提高了绘制性能
图层合并(Compositing)
分图层绘制完成之后,浏览器会将每个图层进行合成,如果页面发生变化,只重新绘制相应的图层,理想情况下,图层之间的绘制是不能互相影响的,可以减少重绘范围,但是如果发生了回流,会从Layout重新开始
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!