浏览器渲染原理

mac2025-12-05  9

浏览器渲染原理

我们知道执行js有一个js引擎,那么执行渲染也有一个渲染引擎。同样渲染引擎在不同浏览器中也是不相同的。比如在 Firefox中叫做Gecko,在Chrome和Safari中都是基于WebKit开发的。

浏览器接收到HTML文件并转换为DOM树

当我们打开一个网页时,浏览器都会去请求对应的HTML文件。虽然我们平时写代码时会分为JS、CSS、HTML 文件 ,也就是字符串,但是计算机硬件是不理解这些字符串的,所以在网络中传输的都是 0 和 1 这些字节数据。当浏览器接收到这些字节以后它会将这些字节数据转换为字符串,也就是我们写的代码。

字节数据=>字符串

当数据转换为字符串以后,浏览器会先将这些字符串通过词法分析转换为标记(token),这一过程在词法分析中叫做 标记化(tokenization))

字节数据=>字符串=>Toke

那么什么是标记呢?这其实属于编译原理这一块的内容了。简单来说,标记还是字符串,是构成代码的最小单位。这一过程会将代码分拆成一块块,并给这些内容打上标记,便于理解这些最小单位的代码是什么意思。 当结束标记化后,这些标记会紧接着转换为 Node,最后这些 Node 会根据不同 Node 之前的联系构建为一颗 DOM 树。

字节数据=>字符串=>Token=>Node=>DOM

当然,在解析HTML文件时浏览器还会遇到CSS和JS文件,这时浏览器也回去下载并解析这些文件

最新回复(0)