浏览器渲染原理中的那些事儿,前端开发必看

参加浏览器渲染的一些概念

DOM(文档对象模型)
CSSOM(CSS对象模型)
Render Tree (渲染树)
Layout(布局)
Paint(绘制)
Rasterize (栅格化)
Layer(图层)
Composite(合成)

渲染过程

首先DOM、CSSOM大家耳熟能详, 二者就是文档加载之后创建的对象模型。前者描述了结构,后者描述了样式。

接着会将二者结合起来生成渲染树

在这里插入图片描述
上图中,我们可以看到,DOM中存在的一些元素比如head,因为是没必要显示的,所以不会出现在渲染树中的。即使是body中的节点,若设置了display:none,依旧是不会出现在渲染树中的。

当得到了渲染树之后,页面还不能够被渲染。这就好像我们有一些色块(盒模型),但我们不知道每一个盒子的位置,所以无法拼出完整的图形。
在这里插入图片描述
这时候Layout布局就出场了,他就是为了定位刚刚渲染树中各个节点的位置,使之能够拼成完整的可渲染的图层。

数一数,到目前为止,我们得到了文档DOM,渲染树,并且得到渲染树各个元素的所在的位置。似乎已经可以进行渲染了。的确,但此时渲染并非渲染到屏幕上,而是渲染到Layer图层上,这个概念和PS中的图层差不多,因为CSS是有z-index属性的,也就是展示给我们的页面其实并非是二维的,所以绘制的过程会在多个图层进行。图层与图层之间可能相互重叠,所以此时的渲染并不会真的出现在屏幕上。

(题外话:在Chrome中,Paint绘制分为两部分,一部分是准备绘图使用的列表数据,一部分是将数据已像素的形式栅格化(Rasterize )到图层上。)

有了渲染好的图层,才算是一切准备就绪,接下来会将各个图层按照层级与顺序关系合成(Composite)到到一起进而显示到屏幕上。

好了,总结一下整个流程如下,一图胜千言:
在这里插入图片描述
长出一口气,现在我们知道了从服务返回的字符串如何最终转换为了精美的网页。但不妨思考一个问题,我们为什么要知道这个呢?答案很简单,因为我们当我们想提升页面的响应速度,尤其是动画的时候这些概念就变的尤为重要。

提升动画性能

我们知道,实现动画方式多种多样,比如:

  • jquery有animatin的api
  • css 有keyframes动画(改变left,height样式等)
  • css3 的transform

但实际使用以上三种形式实际上有本质的区别,因为他们各自的触发的浏览器重新渲染的时机是不同的。通过JS或者CSS改变盒模型均会导致Layout -> Paint -> Composite的整个流程。相对而言,transform 仅仅是触发Composite 合成,不会重排也不会重绘。要知道这二者都是非常耗性能的。

其实不触发重排重绘也仅仅有transform以及opacity两个样式。但对于大部分动画都已经足够了。
在这里插入图片描述
本文仅仅是讲了浏览器渲染的原理,浏览器的机制还有很多,比如Chrome的多进程模型等等,有兴趣的可以深入探索。

已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页