浏览器-07 chromium 渲染1
Chromium 软件渲染
- 软件渲染就是利用
CPU
,根据一定的算法来计算生成网页的内容; Chromium
都是用软件渲染的技术来完成页面的绘制工作(除非强行打开硬件加速绘制);
软件渲染基础和架构
Renderer
进程:RenderWidget
对象,它负责调度页面渲染和页面更新等操作以及和Browser
进程的通信;PlatformCanvas
,即SkiaCanvas
,Render
树的绘制操作中Canvas
的元素的实现;
Browser
进程:RenderWidgetHos
对象,负责同Renderer
进程的通信;BackingStore
,它是一个后端的存储空间,大小通常是网页可视区域的大小,该空间存储的就是页面的绘制结果;
- 两个进程之间的通信:
WebKit
负责遍历Render
树,每个RenderObject
节点根据需要来绘制自己和子节点的内容到目标存储,就是SkiaCanvas
所对应的共享内存的Bitmap
中;之后,RenderWidgetHost
把bitmap
复制到backingstore
的相应区域中,并调用paint
来把自己绘制到窗口中;
具体渲染过程
发起重新绘制某些区域的请求
- 前端请求:包括从
browser
进程发起的请求,可能是browser
自身的,也有可能是其他窗口系统; - 后端请求:由页面自身发起更新部分区域的请求,如
HTML
元素或者样式的改变,动画等等。
例子:JS
代码每隔50ms更新元素;
Renderer
进程的message loop
调用处理Invalidation
的回调函数,该函数主要调用RenderWidget::DoDeferredUpdate
来完成绘制请求;RenderWidget::DoDeferredUpdate
首先调用layout
来触发检查是否有需要重新计算的布局和更新请求;RenderWidget
调用TransportDIB
来创建共享内存,内存大小为绘制区域的高×宽×4,同时调用Skia
来创建一 个canvas
,它的绘制目标是一个使用共享内存存储的bitmap
;- 当渲染该页面的全部或者部分时,
ScrollView
请求按照从前到后顺序遍历并绘制所有的RenderLayer
的内容到目标的bitmap
中,每个RenderLayer
的绘制通过以下步骤来完成:- 首先计算重绘的区域是否和自己有重叠,如果有, 则要求该
layer
中的所有RenderObject
对象绘制自己;
- 首先计算重绘的区域是否和自己有重叠,如果有, 则要求该
- 绘制完成后,发送
UpdateRect
的消息给browser
进程,Renderer
进程同时返回完成绘制;Browser
进程接受到消息后首先由BackingStoreManager
来获取或者创建BackingStoreX
,大小是 Viewport,包浏览器-07 chromium 渲染1的更多相关文章
- 浏览器-08 chromium 渲染2
Chromium 硬件加速合成 一个网页通常可以包
- 浏览器的 16ms 渲染帧
标签 归档 关于arttle Land 浏览器的 16ms 渲染帧 DOM JavaScript 异步 性能 重绘 由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷 ...
- 浏览器的 16ms 渲染帧--摘抄
由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能. 浏览器会利用这个间隔 16ms(1000ms/60)适当地对绘制 ...
- document.compatMode(判断当前浏览器采用的渲染方式)
转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...
- 浏览器-10 Chromium 移动版
移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...
- 浏览器-04 WebKit 渲染2
渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/set ...
- BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox Gecko 引擎 Safari WebKit 引擎 Chrom ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- 【repost】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
随机推荐
- C#把DataTable中数据一次插入数据库的方法
现在实际的情况是这样的: 客户有一台打卡机,员工打卡的信息全部储存在打卡机的Access数据库里面,现在客户引入了一种新的管理系统,需要将Access数据库中的打卡数据同步到SQL Server数据库 ...
- JSP与EL隐式对象
一,JSP隐式对象 隐式对象是可以直接使用的,无需声明.因为在JSP转译为servlet文件后,会自动声明其对象. 隐式对象① 说明 out 对应JspWriter对象,其内部关联一个PrintWri ...
- C语言基础(4)-原码,反码,补码及sizeof关键字
1. 原码 +7的原码是0000 0111 -7的原码是1000 0111 +0的原码是0000 0000 -0的原码是1000 0000 2. 反码 一个数如果值为正,那么反码和原码相同. 一个数如 ...
- 关于hg的命令
整理的创建分支合并一个分支的代码步骤:1.创建一个目录用于作为本地仓库mkdir Center2.将远端代码克隆到本地仓库(这时我的位置在刚创建的Center目录下)hg clone HTTP DIR ...
- JSP脚本中的9个内置对象
JSP脚本中包含9个内置对象,这9个内置对象都是Servlet API接口的实例,只是JSP规范对它们进行了默认初始化.也就是说它们已经是对象,可以直接使用. 我们随意打开一个由JSP页面生成的Ser ...
- 【荐2】Total Commander 7.57 配置选项 个性化设置备份,,,开启时如何自动最大化???(二)
最近安装了下新版的“Total Commander 7.56”,发现它的默认设置是如此的不好用,现把对其个性化设置备份如下(符合大部分用户的操作习惯): 默认打开Total Commander 7.5 ...
- 升级到 PHP-7 遇到的坑 及 经验分享
注意:上面这张图是QQ群网友分享的,图中提到的“被移除的函数”,call_user_func 和 call_user_func_array 在 PHP-7.0 的正式版中是可用的,也许是当时的 测试版 ...
- PHP 获取中国时间,即上海时区时间
/** * 获取中国时间,即上海时区时间 * @param <type> $format * @return <type> */ function getChinaTime($ ...
- JVM参数OmitStackTraceInFastThrow:不打印NullPointerException异常堆栈
查看线上日志,遇到一个诡异的问题,就是系统大量空指针的异常,但是没有打印堆栈,导致不方便定位问题. 经过一番代码调试,确定并非程序代码问题.没有线索之后,从Google找到了答案:是因为在server ...
- 模拟javascript中的sort排序
一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr ...
- 浏览器-08 chromium 渲染2