浏览器原理

浏览器原理

采用多线程,一旦有一个页面卡了,其他页面不会受影响

到网络进程获取到数据之后,会通过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)]