• 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. gRPC+etcd的优势分析

      相比webService等可跨平台,跨语言的服务相比,gRPC更增加了以下优势 1.可以采用二进制传输,速度更快 (使用TCP传输层,而不是Http2应用层) 2.集群服务,统一注册,可靠性高( 好的 ...

    2. Solr学习总结（七）Solr搜索引擎的整体架构

      经过前面一段时间的努力,终于把我所知道的关于solr 的内容都总结完了.前面讲到了solr 的安装配置,web管理后台的使用,solr 的查询参数和查询语法,还说到了solr的客户端 solrnet  ...

    3. [Head First设计模式]一个人的平安夜——单例模式

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

    4. ACCESS应用笔记<五>——慢慢要学会做项目管理·

      综上 第一次写access学习笔记是8月19号的事情,现在已经10月31号 以下是之前的笔记目录: <一> http://www.cnblogs.com/weibaar/p/3923466 ...

    5. css3的基本样式

      一.css3字体(@font-face) 二.css3动画 三.css3多列 四.CSS3 outline-offset 属性 五.CSS3 resize 属性

    6. PhpStorm 9.03 集成 开源中国(oschina.net)的Git项目，提交SVN时注意事项

      第一步:配置 git.exe File -> Default Settings -> Version Control -> Git -> Path go Git executa ...

    7. Linux C 中 fork() 函数详解

      一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork() 函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

    8. Linux C fcntl()函数详解

      fcntl系统调用 功能描述:根据文件描述词来操作文件的特性. 用法: int fcntl(int fd, int cmd);  int fcntl(int fd, int cmd, long arg ...

    9. Python转码问题的解决方法：UnicodeDecodeError:‘gbk' codec can't decode bytes in position

      在开发过程中遇到了错误:UnicodeDecodeError: ‘gbk' codec can't decode bytes in position 678-679...这是因为遇到了非法字符, 解决 ...

    10. 坑爹的私有API

      iOS私有API扫描工作总结 背景 苹果提供的iOS开发框架分PrivateFramework和Framework,PrivateFramework下的库是绝对不允许在提交的iOS应用中使用的,只允许 ...