浏览器原理
采用多线程,一旦有一个页面卡了,其他页面不会受影响
到网络进程获取到数据之后,会通过safeBrowsing来检查是不是恶意站点,是的话会提示是恶意页面,(站点安全系统,护检查是不是在谷歌黑名单里面),如果不是恶意的,然后会通过渲染器进程来渲染页面,浏览器进程会通过IPC管道将数据传递给渲染器进程,渲染器进程的任务就是把html,css,js,image渲染成交互的web页面,渲染器进程的主线程会解析html
Tokeniser:将html解析成多个标记.
构建DOM的大致过程如下:
- 通过网络获取字节流和字符;
- 对字符序列进行分词操作,得到一个个token;
- 根据token序列分析语法,得到一个个节点node;
- 根据node序列,分析并构建DOM树。
dom有元素节点,文本节点,属性节点
----------------------------------------------分隔---------------------------
CSSOM
在CSS文档中,也同样拥有节点,它的节点与DOM树中的节点是对应的。
1.解析CSS文件(如果是link的)
2.将字节转换成字符。
3.确定tokens(标签)
4.将tokens转换成节点
5.最后根据节点构建CSSOM树。
css或者图片需要从网上下载或者从缓存直接加载,他们不会阻塞html解析,不会影响Dom的生成.但是执行到js就会停止,因为浏览器不知道js会不会改变dom结构,接下来需要解析css,并确定dom节点的计算样式,h2和h3有浏览器内置的样式,会遍历dom和就算好的样式,生成Layout 树,里面每个节点包含了x,y坐标,和边框大小,但是两个树不一定一样
Dom只关心html,不关心css,layout tree是根据dom和css计算出来的
之后会遍历layout tree 生成绘制记录表(考虑到z-index会影响节点绘制的层级关系),里面记录了绘制的顺序,这个阶段叫做绘制
,后面就是栅格化
重绘(少了布局和重绘)和重排:重新走布局和绘制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V03v7bJ9-1645538735504)(https://gitee.com/liangqinchuang/pictures/raw/master/image-20220222212318747.png)]