浏览器渲染原理

最新推荐文章于 2023-10-17 19:37:56 发布

kkkkkkkkkrys

最新推荐文章于 2023-10-17 19:37:56 发布

阅读量1.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/krysliang/article/details/85840864

版权

一、介绍

1.浏览器的内核包括两个部分，一个是渲染引擎，另一个是js引擎。渲染引擎在每个浏览器中不一定相同，例如firefox中叫做Gecko，chrome和safari的是webkit，ie的是trident等。国内浏览器的内核一般都是ie的内核trident。

2.浏览器的工作大体流程如下

所以我们可以看到浏览器会解析三个东西

解析完成后，浏览器引擎就会通过DOM TREE和CSS RULE TREE来构造RENDER TREE（渲染树）

render 树不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

下面来详细了解这些过程

1.构建DOM

浏览器会遵守一套步骤将HTML文件转换为DOM树，宏观上，可以视为以下一个步骤

浏览器从本地磁盘或者网络读取HTML的原始字节，并根据文件的指定编码（例如UTF-8）将它们转换为字符串。{在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。}
将字符串转换成TOKEN，例如<html><head>等，token会标识出当前token是开始标签或是结束标签亦或是文本等信息，也就是说token会识别出节点之间的父子关系亦或是兄弟关系。
生成节点对象并构建DOM

构建DOM的过程并不是等所有的TOKEN都转换完成再去生成节点对象，而是一边生成token一边消耗token来生成节点对象。换句话说，每个token被生成之后，会；立刻消耗这个token所生成的节点对象。

例如下面的代码就会生成解析成下面这样的情况

关注