• WebKit是一个渲染引擎,而不是一个浏览器;
  • DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问页面中的任何元素的相关属性,并可对DOM进行相应的添加、删除和更新操作等;
  • 基于DOM树的一些可视的节点,WebKit来根据需要来创建相应的RenderObject节点,这些节点也构成了Render树;
  • 基于Render树,WebKit也会根据需要来为它们中的某些节点创建新的RenderLayer节点, 从而形成RenderLayer树;
  • WebKit的布局计算和浏览器的渲染,GPU硬件加速都依赖Render树和RenderLayer树;

Render树

Render树的建立

  • Render树节点和DOM树节点不是一一对应关系;下面情况下需要建立新的Render节点:

    • DOM树的document节点;
    • DOM树中的可视化节点,如HTML,BODY,DIV等;
    • 某些情况下需要建立匿名的Render节点,该节点不对应于DOM树中的任何节点;
  • Render树建立后,布局运算会计算出相关的属性;其中有位置,大小,是否浮动等;渲染引擎利用这些信息绘制这些元素;

RenderObject类及其子类

  • RenderObject是Render树的节点基础类,提供了一组公共的接口;它在DOM树创建或DOM中有动态加入元素时创建;
  • 它有很多的子类,这些子类可能对应一些DOM 树中的节点,如RenderText,有些则是容器类,如RenderBlock;

匿名RenderBlock对象

  • CSS中有块级元素和内嵌元素之分;RenderBlock用来表示块级元素,;
  • 为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象;因为RenderBlock的子女必须都是内嵌的元素或都是非内嵌的元素;所以,当它包

    浏览器-03 WebKit 渲染1的更多相关文章

    1. 浏览器-04 WebKit 渲染2

      渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/set ...

    2. WebKit 渲染过程

      webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 Webkit渲染过程 ...

    3. 浏览器的 16ms 渲染帧

      标签 归档 关于arttle Land 浏览器的 16ms 渲染帧 DOM JavaScript 异步 性能 重绘 由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷 ...

    4. 浏览器的 16ms 渲染帧--摘抄

      由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能. 浏览器会利用这个间隔 16ms(1000ms/60)适当地对绘制 ...

    5. 聊聊浏览器（webkit）资源加载机制

      一些准备 在开始这个话题之前,我们有必要简单回顾一下 浏览器(webkit)的网页渲染过程(如果想要详细了解这个过程,可以戳我几年前写的一篇文章.): 我们知道,浏览器在渲染过程中,如遇到节点需要依赖 ...

    6. document.compatMode(判断当前浏览器采用的渲染方式)

      转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...

    7. 【repost】浏览器内核、渲染引擎、js引擎

      [1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...

    8. 浏览器内核、渲染引擎、js引擎

      [1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具 [2]常见引擎 渲染引擎: fire ...

    9. 【转】浏览器内核、渲染引擎、js引擎

      [1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...

    随机推荐

    1. Windows的基本内容

      1, 进程间通信:是指进程间进行信息交换 低级方式:信号量通信(可以交换的信息量少的时候) 高级通信方式(3种):1.共享存储器系统(剪贴板) 2.消息传递系统(进程间的数据交换以消息(message ...

    2. C#FTP操作类含下载上传删除获取目录文件及子目录列表等等

      ftp登陆格式  : ftp://[帐号]:[密码]@[IP]:[端口] ftp://用户名:密码@FTP服务器IP或域名:FTP命令端口/路径/文件名 直接上代码吧,根据需要选择函数,可根据业务自己 ...

    3. Path Sum

      需如下树节点求和 5  /  \ 4     8  /     /  \ 11  13    4 / \     /  \  7    2      5   1 JavaScript实现 window ...

    4. [Head First设计模式]云南米线馆中的设计模式——模版方法模式

      系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

    5. [NHibernate]存储过程的使用（二）

      目录 写在前面 文档与系列文章 创建对象 更新对象 总结 写在前面 上篇文章介绍了如何使用MyGeneration代码生成器生成存储过程,以及nhibernate中通过存储过程删除数据的内容,这篇文章 ...

    6. silverlight_容器

      Canvas絕對佈局 定位Canvas.Top.Canvas.Left ZIndex屬性 若制定2個控制項重疊,那麼後聲明控制項會覆蓋先聲明的控制項.此時可以使用Canvas.ZIndex屬性來改變它 ...

    7. Swift3.0P1 语法指南——函数

      原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

    8. HTML5CSS3特效-上下跳动的小球-遁地龙卷风

      (-1)写在前面 我用的是chrome49,这个idea是我在stackoverflow上回答问题时看到了,多谢这位同行,加深了我对很多技术点的理解,最近刚到北京,忙碌了一两天,在后续的日子里,会被安 ...

    9. js求时间差

      var date1=new Date();  //开始时间 alert("aa"); var date2=new Date();    //结束时间 var date3=date2 ...

    10. 2016年11月27日--面向对象：多态、类库、委托、is和as运算符、泛型集合

      1.虚方法 virtual 重写 override 父类中的方法,在子类中并不适用,那么子类需要自主更改继承的方法或者是属性,那父类中加了virtual关键字的方法才可以被子类重写,子类重写父类的方法 ...