首页 > 其他 > 详细

浏览器内核原理

时间:2021-03-27 12:44:09      阅读:42      评论:0      收藏:0      [点我收藏+]

浏览器内核英文是Rendering Engine/Layout Engine,准确翻译应该是渲染引擎/排版引擎/模板引擎(指是同一个);
浏览器内核分为两部分,除了渲染引擎之外,就是JavaScript引擎,由于现在JavaScript引擎越来越独立,内核就倾向于只指渲染引擎。
不同的浏览器内核对网页编写语法的解释有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果可能不同,这也是网页编写开发人员需要在不同内核的浏览器中测试网页显示效果的原因。

1.什么是渲染引擎/排版引擎/模板引擎?

渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要渲染引擎。
在Mozilla将其渲染引擎(Gecko)作为独立于浏览器的一个配件之后,“渲染引擎”这个词汇才被广泛使用。也就是说,除了Mozilla浏览器,其它浏览器也可以使用Gecko作自己渲染引擎。IE的渲染引擎被称为Trident,被用在许多Windows的应用程式上。

2.什么是JavaScript引擎?

JavaScript引擎就是能够提供执行JavaScript代码的运行环境。要想了解这一概念,需要了解编译原理的基础概念和现代语言需要的新编译技术。
JavaScript引擎包括以下部分:编译器、解释器、JIT工具、垃圾回收器和分析工具(profiler)

3.渲染引擎和JavaScript引擎之间的关系

在网页的工作过程需要使用渲染引擎和JavaScript引擎。从模块上看,它们是两个独立的模块,分别负责完成不同的任务:
3.1 JS引擎负责解析执行JS代码,而渲染引擎负责渲染网页页面。
3.2 JS引擎提供调用接口被渲染引擎使用,渲染引擎使用JS引擎来处理JS代码并获取结果。
3.3 JS引擎需要能够访问渲染引擎构建的DOM树,JS引擎需要提供桥接的接口,渲染引擎则根据桥接接口来提供让JS访问DOM的能力。
在HTML5的能力中,很多是通过JS接口提供给开发者的,所以这部分同样需要根据桥接接口来实现具体类,以便让 JS引擎能够回调渲染引擎的具体实现。

4.浏览器渲染过程

浏览器渲染大体上分为以下五步
A.处理html生成 DOM(Document Object Model)Tree
B.处理css生成 CSSOM(CSS Object Model)Tree
C.DOM树与CSS-DOM树合并为Render树
D.对Render树进行布局计算
E.遍历Render树的每一个节点绘制到屏幕
 
A.DOM树生成
浏览器把得到的html代码转换为一个DOM树
需要注意:html文档中的每一个tag标签都是一个DOM树的节点(文本节点也是) ;DOM树的根节点就是document对象 ;js动态生成的DOM节点也在DOM树上
B.CSSOM树生成
浏览器把所有的样式解析为样式结构体 (包括css样式和浏览器默认样式,当然浏览器识别不了的样式不能解析 )最后生成了CSSOM树
C.Render树生成
Render树叫渲染树 ,它是由DOM树和CSSOM树合成的。渲染树的每一个节点都有自己的style样式 ,渲染树上没有隐藏的节点,比如display:none和无样式head节点 ,因为这些节点不会呈现也不影响呈现。注意:visibility:hidden会存在渲染树,因为它占有空间,会影响布局
D.布局计算
根据Render树的样式计算布局 ,输出的结果称为box盒模型。盒模型精确表示了每一个元素的位置和大小 ,所有相对度量单位都转化为了绝对单位。
E.绘制
最后将信息渲染到屏幕中每一个真实的像素点 ,这个过程叫绘制或者rasterizing格栅化。

5. 什么是浏览器渲染引擎的重排和重绘?

5.1 重排

当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他相邻元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为“重排”。
换句话说,改变了页面中某元素的位置、尺寸大小,进而也就改变了他的占地面积。那这个元素修改了占地面积后,其后紧邻的元素就得挪动位置。给她让地儿(或者向前赶赶)。紧邻的元素挪动了,那紧邻元素后边的元素也会连锁效应式的修改。这就好比一排人排队。前边的人突然变胖了、变瘦了、向前挪了、向后挤了、都会导致队伍中后边的人也跟随之改变位置,由此导致一连串的人都挪动位置。这时浏览器就要重新排版各个受到影响的元素的位置。反应在渲染引擎的工作流程中也就是浏览器需要重新计算元素位置信息并布局render树。这就是重排。

5.2 重绘

完成重排后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。因为重排在重绘的上一步,所以重排发生后自然会导致重绘。

5.3 为什么页面会慢

因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫reflow。

浏览器内核原理

原文:https://www.cnblogs.com/mu--yu/p/14585092.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!