简体中文

浏览器渲染与内核

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

渲染过程

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

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