渲染树render tree
CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。
- DOM树和CSSOM树连接在一起形成render tree .
- render tree只包含了用于渲染页面的节点
- 布局计算了每一个对象的准确的位置以及大小
- 绘画是最后一步，绘画要求利用render tree来将像素显示到屏幕上
第一步是结合DOM树和CSSOM树形成“render tree”，渲染树用来描述所有可见的DOM内容，并且将CSSOM样式信息附加到节点上。
为了形成渲染树，浏览器大致做的事情有:
- 从DOM树根节点开始，遍历每一个可见的节点
- 一些节点是完全不可见的（比如 script标签，meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出
- 一些节点是通过CSS样式隐藏了，这些节点同样被忽略——例如上例中的span节点在render tree中被忽略，因为span样式是display:none;
- 对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式
- 显示可见节点（节点包括内容和被计算的样式）
记住
- 记住“visibility:hidden”和“display：none”之间的不同，“visibility:hidden”将元素设置为不可见，但是同样在布局上占领一定空间（例如，它会被渲染成为空盒子），但是“display:none”的元素是将节点从整个render tree中移除，所以不是布局中的一部分 。
最后输出的是一个render包括了屏幕上可见内容的样式信息和内容信息。
我们知道了哪些元素应该被显示以及元素的样式，但是我们还没有计算元素在设备中的确切的位置和大小——这是“布局”阶段，同样也被叫做“reflow”。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
上面的页面展示了两个div：第一个div是整个视图的一半，第二个div是父亲宽度的一半——也就是说是整个视图的25%。
布局的输出是“盒子模型”，并且将相对定位转化成屏幕上的绝对像素。
最后，我们只差将render tree上的所有节点转化成屏幕上的确切像素——这个步骤通常被称为“painting”或者“rasterizing”。
每个步骤都要花费一些时间，谷歌浏览器开封工具为我们描述了一些步骤所花费的时间：
- 构造render tree和计算位置以及大小信息被捕捉在时间轴上的“Layout”时间中
- 一旦布局完成，浏览器计算"Paint Setup"和“Paint”事件用来描述render tree转化成屏幕上世纪像素的时间。
显示构造render tree以及布局和paint的时间受到页面的大小，被应用的样式和正在运行的设备影响。
页面越大，浏览器将要做更多工作；样式越复杂，painting阶段所花费的时间也越多。
但是，我们的页面完成了！WOOOO！
让我们快速的浏览下浏览器所做的事情：
- 处理HTML标签建立DOM树
- 处理CSS标签建立CSSOM树
- 连接CSSOM树和DOM树形成一个render树
- 在render树上运行布局来计算每个节点的形状
- 在屏幕上画每一个节点
虽然我们的页面很简单，但是它进行了大量的工作！下一章我们讨论怎样对渲染进行优化。
渲染树render tree的更多相关文章
- render tree与css解析
浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧,我们知道DOM树为javascript提供了一些列的访问接口(DOM API),但这棵树 ...
- 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系（转载 学习中。。。）
在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...
- vue入门：（底层渲染实现render函数、实例生命周期）
vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...
- 使用行为树(Behavior Tree)实现游戏AI
——————————————————————— 谈到游戏AI,很明显智能体拥有的知识条目越多,便显得更智能,但维护庞大数量的知识条目是个噩梦:使用有限状态机(FSM),分层有限状态机(HFSM),决策 ...
- 后缀树(suffix tree)
参考: 从前缀树谈到后缀树 后缀树 Suffix Tree-后缀树 字典树(trie树).后缀树 一.前缀树 简述:又名单词查找树,tries树,一种多路树形结构,常用来操作字符串(但不限于字符串), ...
- 线段树 Interval Tree
一.线段树 线段树既是线段也是树,并且是一棵二叉树,每个结点是一条线段,每条线段的左右儿子线段分别是该线段的左半和右半区间,递归定义之后就是一棵线段树. 例题:给定N条线段,{[2, 5], [4, ...
- 使用行为树(Behavior Tree)实现网游奖励掉落系统
原地址:http://blog.csdn.net/akara/article/details/6165421 [原创]使用行为树(Behavior Tree)实现网游奖励掉落系统by AKara 20 ...
- 树-伸展树(Splay Tree)
伸展树概念 伸展树(Splay Tree)是一种二叉排序树,它能在O(log n)内完成插入.查找和删除操作.它由Daniel Sleator和Robert Tarjan创造. (01) 伸展树属于二 ...
- 数据结构之树（Tree）(一) ：树
ps:好久没用动手写blog了,要在这条路上不断发展,就需要不停的学习,不停的思考与总结,当把写blog作为一种习惯,就是自我成长的证明,Fighting!. 一.简介 树是一种重要的非线性数据结构, ...
随机推荐
- 千呼万唤始出来：ArchLinux for Espressobin
前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...
- ffmpeg H264 编解码配置
ffmpeg H264编解码前面有文章介绍下,本文主要介绍一些参数配置. 编码: int InitEncoderCodec( int iWidth, int iHeight) { AVCodec * ...
- ElasticSearchserver操作命令
在win7环境,进入elasticsearch安装文件夹的bin文件夹: 1. elasticsearch.bat 就能够启动elasticsearch了.执行这个插件的优点是:elasticsear ...
- 关于CSS和CSS3的布局小知识（干货）
最近在网站偶然看到的这个网站,进去看了下讲的CSS布局,感觉还不错,讲易懂且实用推荐给大家. http://zh.learnlayout.com/
- 高性能MySQL（二）
MySQL基准测试 为什么需要benchmark 验证基于系统的假设,确认是否符合实际情况 重现系统中的某些异常行为,以解决它们 测试系统当前的运行情况,如果不清楚当前性能,就无法确认优化效果 模拟比 ...
- 【转】IDA 调试 Android
最近都在学一些反编译安卓相关的东西,其实网上有很多教程关于用 IDA 调试 Android 的过程,主要记录一下我遇到的坑 首先 Android手机要是root过的 还要注意的一点是apk中的 And ...
- Python学习笔记14：标准库之信号量（signal包）
signal包负责在Python程序内部处理信号.典型的操作包含预设信号处理函数,暂停并等待信号,以及定时发出SIGALRM等. 要注意,signal包主要是针对UNIX平台(比方Linux, MAC ...
- Creating Tabbed Applications
新建一个空工程,如图 新建类 using System; using UIKit; namespace TabbedApplication { public class TabController : ...
- C#特性类的使用
特性类的使用过程: 第一步:定义一个特性类,定义一些成员来包含验证时需要的数据:第二步:创建特性类实例:创建一个特性类的实例,里面包含着验证某一个属性或者字段需要的数据.将该实例关联到某个属性上面.第 ...
- 九度OJ 1135：字符串排序 （排序）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1559 解决:807 题目描述: 先输入你要输入的字符串的个数.然后换行输入该组字符串.每个字符串以回车结束,每个字符串少于一百个字符. 如 ...