浏览器渲染与内核
Posted WindrunnerMax
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器渲染与内核相关的知识，希望对你有一定的参考价值。
浏览器渲染与内核
浏览器内核可以分成两部分：渲染引擎与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引擎
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://imweb.io/topic/56841c864c44bcc56092e3fa
以上是关于浏览器渲染与内核的主要内容，如果未能解决你的问题，请参考以下文章