浏览器-03 WebKit 渲染1
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的更多相关文章
- 浏览器-04 WebKit 渲染2
渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/set ...
- WebKit 渲染过程
webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 Webkit渲染过程 ...
- 浏览器的 16ms 渲染帧
标签 归档 关于arttle Land 浏览器的 16ms 渲染帧 DOM JavaScript 异步 性能 重绘 由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷 ...
- 浏览器的 16ms 渲染帧--摘抄
由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能. 浏览器会利用这个间隔 16ms(1000ms/60)适当地对绘制 ...
- 聊聊浏览器（webkit）资源加载机制
一些准备 在开始这个话题之前,我们有必要简单回顾一下 浏览器(webkit)的网页渲染过程(如果想要详细了解这个过程,可以戳我几年前写的一篇文章.): 我们知道,浏览器在渲染过程中,如遇到节点需要依赖 ...
- document.compatMode(判断当前浏览器采用的渲染方式)
转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...
- 【repost】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
- 浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具 [2]常见引擎 渲染引擎: fire ...
- 【转】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
随机推荐
- MySQL基本命令
1.修改root用户登录密码: [root@17track bin]# /usr/local/mysql/bin/mysqladmin -u root password 'MyPassword' my ...
- js 时间操作和随机数操作
function Data() { var date = new Date(); var year = date.getFullYear(); ; var strDate = date.getDate ...
- ppt2013技术整理
1. 显示选择窗格 便于选择该页的所有元素.分组.隐藏与显示等. 位于:开始-编辑-选择-选择窗格 2. 显示动画窗格 便于调节页面中元素的动画状态. 位于:动画-高级动画-动画窗格 3. 绑定动画触 ...
- JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- DataTable的过滤需要的数据
DataView dv = datatable.DefaultView; (1) dv.RowFilter = "RowsId>3"; //此 ...
- Scene
Unity 中场景切换 http://www.cnphp6.com/archives/62868 场景管理插件Scene Manager http://blog.csdn.net/onerain88/ ...
- 在Application中集成Microsoft Translator服务之翻译语言代码
Microsoft Translator支持多种语言,当我们获取服务时使用这些代码来表示我们是使用哪种语言翻译成什么语言,以下是相关语言对应的代码和中文名 为了方便我已经将数据库上传到云盘上,读者可 ...
- iframe的自适应高度
<iframe src="index.html" id="iframepage" name="iframepage" frameBor ...
- Js中文排序（拼音首字母）
演示地址:http://lar5.sinaapp.com/ 1.index.html <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- 【转】8G内存下MySQL的优化详细方案
对于任何一个数据库管理系统来说,内存的分配使用绝对可以算的上是其核心之一了,所以很多希望更为深入了解某数据库管理系统的人,都会希望一窥究竟,我也不例外. 这里给出方案 按照下面的设置试试看: key_ ...
- 浏览器-04 WebKit 渲染2