CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

  • DOM树和CSSOM树连接在一起形成render tree .
  • render tree只包含了用于渲染页面的节点
  • 布局计算了每一个对象的准确的位置以及大小
  • 绘画是最后一步，绘画要求利用render tree来将像素显示到屏幕上

第一步是结合DOM树和CSSOM树形成“render tree”，渲染树用来描述所有可见的DOM内容，并且将CSSOM样式信息附加到节点上。

为了形成渲染树，浏览器大致做的事情有:

  1. 从DOM树根节点开始，遍历每一个可见的节点

    • 一些节点是完全不可见的（比如 script标签，meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出
    • 一些节点是通过CSS样式隐藏了，这些节点同样被忽略——例如上例中的span节点在render tree中被忽略，因为span样式是display:none;
  2. 对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式
  3. 显示可见节点（节点包括内容和被计算的样式）

记住

  • 记住“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！

让我们快速的浏览下浏览器所做的事情：

  1. 处理HTML标签建立DOM树
  2. 处理CSS标签建立CSSOM树
  3. 连接CSSOM树和DOM树形成一个render树
  4. 在render树上运行布局来计算每个节点的形状
  5. 在屏幕上画每一个节点

虽然我们的页面很简单，但是它进行了大量的工作！下一章我们讨论怎样对渲染进行优化。

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en

渲染树render tree的更多相关文章

  1. render tree与css解析

    浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧,我们知道DOM树为javascript提供了一些列的访问接口(DOM API),但这棵树 ...

  2. 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系（转载 学习中。。。）

    在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...

  3. vue入门：（底层渲染实现render函数、实例生命周期）

    vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...

  4. 使用行为树(Behavior Tree)实现游戏AI

    ——————————————————————— 谈到游戏AI,很明显智能体拥有的知识条目越多,便显得更智能,但维护庞大数量的知识条目是个噩梦:使用有限状态机(FSM),分层有限状态机(HFSM),决策 ...

  5. 后缀树(suffix tree)

    参考: 从前缀树谈到后缀树 后缀树 Suffix Tree-后缀树 字典树(trie树).后缀树 一.前缀树 简述:又名单词查找树,tries树,一种多路树形结构,常用来操作字符串(但不限于字符串), ...

  6. 线段树 Interval Tree

    一.线段树 线段树既是线段也是树,并且是一棵二叉树,每个结点是一条线段,每条线段的左右儿子线段分别是该线段的左半和右半区间,递归定义之后就是一棵线段树. 例题:给定N条线段,{[2, 5], [4, ...

  7. 使用行为树(Behavior Tree)实现网游奖励掉落系统

    原地址:http://blog.csdn.net/akara/article/details/6165421 [原创]使用行为树(Behavior Tree)实现网游奖励掉落系统by AKara 20 ...

  8. 树-伸展树(Splay Tree)

    伸展树概念 伸展树(Splay Tree)是一种二叉排序树,它能在O(log n)内完成插入.查找和删除操作.它由Daniel Sleator和Robert Tarjan创造. (01) 伸展树属于二 ...

  9. 数据结构之树（Tree）(一) ：树

    ps:好久没用动手写blog了,要在这条路上不断发展,就需要不停的学习,不停的思考与总结,当把写blog作为一种习惯,就是自我成长的证明,Fighting!. 一.简介 树是一种重要的非线性数据结构, ...

随机推荐

  1. 分布式缓存之Memcache

    〇.为什么要用分布式缓存 1.软件从单机到分布式 走向分布式第一步就是解决:多台机器共享登录信息的问题. 例如:现在有三台机器组成了一个Web的应用集群,其中一台机器用户登录,然后其他另外两台机器共享 ...

  2. 使用Crashlytics来保存应用崩溃信息

    使用Crashlytics来保存应用崩溃信息 本文首发于InfoQ,版权归InfoQ所有,转载请保留原文链接. 简介 Crashlytic 成立于2011年,是专门为移动应用开者发提供的保存和分析应用 ...

  3. 邁向IT專家成功之路的三十則鐵律 鐵律十九：IT人待業之道-寬心

    說來很多人可能不相信,筆者從來不把失業當作是一件嚴重的事,相反的我會把它當作是一個很好的轉機.針對一個隨時做好準備的IT人,三個月或半年沒有上班完全沒有甚麼好擔心的.只是如何善用待業的時間,說實在的真 ...

  4. Unity -- 用EasyAR制作出AR红包

    第一部分:前言 实现功能:打开APP或运行该demo后,会从天而降红包,有些红包是空的(大一点的),抖动的红包里面“有钱”,点击之后会产生相应的交互.   第二部分:预览 所用到的资源:   红包模型 ...

  5. SSH错误：packet_write_wait: Connection to 10.57.19.250 port 22: Broken pipe

    现象:ssh连接以后,服务器会主动断开连接,wireshark抓包,发线服务器会tcp rst,断开ssh连接 解决尝试:1.修改会话超时时间:2.客户端主动间隔性向服务器发送保活报文:3.服务端主动 ...

  6. 转： svn服务器路径名修改（不需要全部重新拉取文件）

    svn路径名修改之后, 一大波的研发代码都可能面临变更.还有有一个svn relote神器 大家可以借助各自的SVN工具中哦relote命令完成路径的切换,而不需要全部重新download所有的新路径 ...

  7. log4net报错Could not load type 'System.Security.Claims.ClaimsIdentity'

    使用log4net,在win7上可以正常使用,但是在部分xp电脑上可以生成access数据库,但是无法写数据到mdb 排除了程序原因,怀疑是xp缺少什么dll之类的 偶然查到log4net的调试方法: ...

  8. karaf中利用Bundle引入外部log4j配置文件

    环境准备: 1.在karaf_home下新建 config及logs目录 2.将mylog4j.properties拷贝到config文件夹下 查看log4j-1.2.17.jar/MANIFEST. ...

  9. XSS过滤

    XSS过滤封装用法 封装到app01/form.py文件中进行验证 from django.forms import Form,widgets,fields class ArticleForm(For ...

  10. [javase学习笔记]-8.7 静态代码块

    这一节我们看一个比較特殊的概念,那就是静态代码块. 前面我们也提到过代码块,就是一段独立的代码空间.那么什么是静态代码块呢?说白了,就是用statickeyword修饰的代码块. 我们来看一个样例: ...