• 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类及其子类

  • RenderObjectRender树的节点基础类,提供了一组公共的接口;它在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. <<< jquery简介、开头语法、在线开发手册

      简介 jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多).jQuery在2006年1月由美国人John Resig在纽约的b ...

    2. 介绍对称加密的另一个算法——PBE

      除了DES,我们还知道有DESede(TripleDES,就是3DES).AES.Blowfish.RC2.RC4(ARCFOUR)等多种对称加密方式,其实现方式大同小异,这里介绍对称加密的另一个算法 ...

    3. C#------连接SQLServer和MySQL字符串

      <connectionStrings> <add name="ConnectionStrings" connectionString="Data Sou ...

    4. 第六章 大数据,6.3 突破传统,4k大屏的沉浸式体验(作者: 彦川、小丛)

      6.3 突破传统,4k大屏的沉浸式体验 前言 能够在 4K 的页面上表演,对设计师和前端开发来说,即是机会也是挑战,我们可以有更大的空间设计宏观的场景,炫酷的转场,让观众感受影院式视觉体验,但是,又必 ...

    5. 浅谈 PHP 与手机 APP 开发(API 接口开发) -- 转载

      转载自:http://www.thinkphp.cn/topic/5023.html 这个帖子写给不太了解PHP与API开发的人 一.先简单回答两个问题: 1.PHP 可以开发客户端? 答:不可以,因 ...

    6. jquery实现 复选框 全选

      $("#checkAll").change(function () { $(this).closest("table") .find(":checkb ...

    7. java.lang.NoSuchFieldError 异常原因

      一般都是因为 class 或 jar 包重复 导致的 , 也有可能是编译器的问题. 我碰到的问题是,在项目api 接口jar包里定义了一个Config.java,然后在业务层service 项目 的相 ...

    8. Linux C 堆内存管理函数malloc()、calloc()、realloc()、free()详解

      C 编程中,经常需要操作的内存可分为下面几个类别: 堆栈区(stack):由编译器自动分配与释放,存放函数的参数值,局部变量,临时变量等等,它们获取的方式都是由编译器自动执行的 堆区(heap):一般 ...

    9. saltstack-部署

      安装epel源(所有主机安装) [root@salt-server /]# wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/r ...

    10. exception catch doesn't work?? (python 3)

      exception catch doesn't work?? (python 3) except u.URLError, e: ^ SyntaxError: invalid syntax in Pyt ...