浏览器渲染与内核

浏览器内核可以分成两部分:渲染引擎与JS引擎。最开始渲染引擎与JS引擎并没有明确的区分,但随着JS引擎越来越独立,内核就越来越倾向于只指渲染引擎。

渲染过程

不同浏览器内核的渲染方式不同,但整体流程基本一致:

  1. 自上而下,首先解析HTML标签,生成DOM Tree
  2. 在解析到<link>或者<style>标签时,开始解析CSS,生成CSSOM,值的注意的是此时解析HTML标签与解析CSS是并行执行的。
  3. 当遇到<script>标签后,浏览器会立即开始解析脚本,并停止解析文档,因为脚本有可能会改动DOMCSS,继续解析会浪费资源,所以应当将<script>标签放于<body></body>后。
  4. DOM TreeCSSOM生成后,将两者结合进行布局,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型,可称为渲染树render tree
  5. 根据计算好的信息绘制整个页面,系统会遍历渲染树,并调用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引擎

JS引擎的作用比较统一,在浏览器的实现中必须含有DOM(文档对象模型,是W3C组织推荐的处理XML的标准编程接口)和BOM(浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,例如window对象)。浏览器一般使用公共API来创建对象来负责将DOM对象反射进JavaScriptJS引擎负责对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