浏览器渲染与内核

浏览器渲染与内核

浏览器内核可以分成两部分:渲染引擎与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
  • 12
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北航程序员小C

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值