关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可
~技术问答题~
返 回

No.822 【简单概括】从输入浏览器网址到页面渲染经历了什么?

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

首先浏览器会判断输入的是否是网址,如果是关键字这会调用默认设置的搜索引擎,是网址首先会执行当前页面的beforeonload事件。然后浏览器进程将URL发送给网络进程,发起URL请求。

再发起之前还会尝试去命中缓存,首先是命中强缓存,会依次从service worker、内存、硬盘、push cache里读取缓存,如果有命中就不发起请求。没有命中则正常发起请求,首先是DNS解析将域名解析为IP地址,找到对应的主机。

然后发起请求资源的请求,如果协议是HTTPS,还需要建立TLS连接。发起HTTP请求之前需要建立TCP连接,三次握手确保双方通信的可靠性之后发起HTTP请求,这个时候会尝试去命中协商缓存,如果没命中发送HTTP的请求行、请求头、请求体,等待服务端处理并响应,如果返回的状态码是301/302,则进行重定向,重新发起导航流程。否则根据content-type的类型响应具体的内容,浏览器拿到资源后四次挥手断开TCP连接,如果有开启connection:keep-alive可保持TCP连接,浏览器进入页面渲染阶段。

简要说明下浏览器拿到响应数据后的渲染过程?

整个过程也可以称之为渲染流水线:

首先是构建DOM树,将标签解析为一个个的Token,依次压入弹出token栈确认标签的父子关系,构建为一颗树结构。

接下来是构建CSSOM,将link标签、style标签、内联的css解析为styleSheet,将属性标准化,如将em转为px、颜色关键字转为rgb值、属性关键字转为具体数值,通过继承、层叠规则遍历DOM树匹配对应css属性,让每个DOM拥有各自对应的样式属性,在浏览器的elelemt-computed里可以看到。

接下来将CSSOM和DOM进行属性的计算,重新计算为一颗只包括可见元素的布局树,隐藏的元素不参与布局计算。

接下来是分层,例如绝对定位的元素能遮罩其他元素,是因为它们都不在一个图层,需要将布局树再次计算为一颗包含了上下级关系的图层树。

再接下来是绘制,根据图层关系逐步绘制,先绘制底部再绘制上层,按照顺序组成一个待绘制列表。

不过绘制也不是整个页面全部都绘制,优先是绘制浏览器视口以内的图层,所以还有一个分块的步骤,将图层划分更小的块,先绘制视口内的小块。

接下来是光栅化,使用GPU将当前视口的图块渲染为位图,将其保存到GPU内存里。

最后光栅化完毕,通知浏览器进程,将GPU内存里的位图显示在屏幕上。

重排:通过JS或CSS更改了元素的几何位置,触发重排,从布局阶段开始重新渲染整个流水线。 重绘:通过JS更改元素外观,触发重绘,从绘制阶段开始渲染流水线,省去了布局和分层阶段。 合成:不更改布局和外观属性,例如用transform实现动画,直接在合成线程完成动画操作,CSS的will-change属性,提前告知浏览器需要进行CSS动画,为其单独准备一个独立的层,之后通过合成线程完成动画。

原文在这里:https://juejin.cn/post/6945025017834897422

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会