浏览器渲染与内核

浏览器渲染与内核

浏览器内核可以分成两部分：渲染引擎与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引擎。

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://segmentfault.com/a/1190000010298038
https://imweb.io/topic/56841c864c44bcc56092e3fa
posted @   WindRunnerMax  阅读(287)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS
✕