怎样简单理解浏览器内核

浏览器内核可以分为两部分: 

1. 渲染引擎

2. JS引擎

 

渲染引擎的作用是将html代码和css代码解析为用户看到的网页. JS引擎的作用是读取网页中的js代码并执行它. 

下面是常见的渲染引擎和JS引擎:

浏览器名称　　　　渲染引擎　　　　JS引擎

Firefox　　　　　　Gecko　　　　　SpiderMonkey

Safari　　　　　　  WebKit　　　　  SquirrelFish

Chrome　　　　　  Blink　　　　　  V8

IE　　　　　　　　Trident　　　　   IE9之前使用 Jscript, IE9之后使用 Chakra

Edge　　　　　　  EdgeHTML　　   Chakra

 

-------------------------------------------------------------------------------------------------------------------------------------------------

 

1. 渲染引擎

对于渲染引擎来讲, 他的工作主要是下面这四步: 

第一步: 解析代码, 将html代码解析为DOM, 将CSS代码解析为CSSOM;

第二步: 对象合成, 将DOM和CSSOM合成为一棵渲染树;

第三步: 布局, 计算出渲染树的位置;

第四步: 绘制, 将渲染树绘制到屏幕上;

 

这四步并非严格按照顺序执行, 不是说第一步完成以后才执行第二步, 而是边下载 / 边解析 / 边合成 / 边布局 /边绘制.

 

2. JS引擎

对于JS引擎来讲, 他的工作主要是下面这四步: 

第一步: 读取代码, 进行词法分析, 将代码分解为词元;

第二步: 对词元进行语法分析, 并将代码整理成语法树;

第三步: 使用翻译器, 将代码转换为字节码;

第四步: 使用字节码解释器, 将字节码转换为机器码并执行;

 

这里的第三步和第四步在目前有所改变, 引入了即时编译技术(JIT), 生成的字节码只会在执行到相应位置, 才会将其编译为机器码, 并将结果缓存, 这样做的目的其实是遵循了代码功能使用中的二八定律, 可以显著提升程序的运行速度.