浏览器内核可以分成两部分:渲染引擎与JS
引擎。最开始渲染引擎与JS
引擎并没有明确的区分,但随着JS
引擎越来越独立,内核就越来越倾向于只指渲染引擎。
不同浏览器内核的渲染方式不同,但整体流程基本一致:
- 自上而下,首先解析
HTML
标签,生成DOM Tree
。 - 在解析到
<link>
或者<style>
标签时,开始解析CSS
,生成CSSOM
,值的注意的是此时解析HTML
标签与解析CSS
是并行执行的。 - 当遇到
<script>
标签后,浏览器会立即开始解析脚本,并停止解析文档,因为脚本有可能会改动DOM
与CSS
,继续解析会浪费资源,所以应当将<script>
标签放于<body></body>
后。 - 当
DOM Tree
与CSSOM
生成后,将两者结合进行布局,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型,可称为渲染树render tree
。 - 根据计算好的信息绘制整个页面,系统会遍历渲染树,并调用
paint
方法,将内容显示在屏幕上。
当render tree
中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color
,则就叫称为重绘。
当render tree
中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流,也可以称为重新布局。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree
。
IE
浏览器:Trident
内核,也是俗称的IE
内核。Chrome
浏览器:统称为Chromium
内核或Chrome
内核,以前是Webkit
内核,现在是Blink
内核。Firefox
浏览器:Gecko
内核,俗称Firefox
内核。Safari
浏览器:Webkit
内核。Opera
浏览器:最初是自己的Presto
内核,后来是Webkit
,现在是Blink
内核。
JS
引擎的作用比较统一,在浏览器的实现中必须含有DOM
(文档对象模型,是W3C
组织推荐的处理XML
的标准编程接口)和BOM
(浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,例如window
对象)。浏览器一般使用公共API
来创建对象来负责将DOM
对象反射进JavaScript
。JS
引擎负责对JavaScript
进行解释、编译和执行,以使网页达到一些动态的效果。
Chrome
浏览器:V8
引擎。Safari
浏览器:JavaScriptCore
引擎。Firefox
浏览器:TraceMonkey
引擎。Opera
浏览器:Carakan
引擎。IE3~IE8
浏览器:JScript
引擎。Edge
浏览器:Chakra
引擎。
https://github.com/WindrunnerMax/EveryDay
https://segmentfault.com/a/1190000010298038
https://imweb.io/topic/56841c864c44bcc56092e3fa