Chromium 软件渲染

  • 软件渲染就是利用CPU,根据一定的算法来计算生成网页的内容;
  • Chromium都是用软件渲染的技术来完成页面的绘制工作(除非强行打开硬件加速绘制);

软件渲染基础和架构

  • Renderer进程:

    • RenderWidget对象,它负责调度页面渲染和页面更新等操作以及和Browser进程的通信;
    • PlatformCanvas,即SkiaCanvas,Render树的绘制操作中Canvas的元素的实现;
  • Browser进程:
    • RenderWidgetHos 对象,负责同Renderer进程的通信;
    • BackingStore,它是一个后端的存储空间,大小通常是网页可视区域的大小,该空间存储的就是页面的绘制结果;
  • 两个进程之间的通信: WebKit 负责遍历Render树,每个RenderObject节点根据需要来绘制自己和子节点的内容到目标存储,就是SkiaCanvas所对应的共享内存的Bitmap 中;之后,RenderWidgetHostbitmap复制到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的更多相关文章

    1. 浏览器-08 chromium 渲染2

      Chromium 硬件加速合成 一个网页通常可以包

    2. 浏览器的 16ms 渲染帧

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

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

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

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

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

    5. 浏览器-10 Chromium 移动版

      移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...

    6. 浏览器-04 WebKit 渲染2

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

    7. BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程

      1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox        Gecko 引擎 Safari        WebKit 引擎 Chrom ...

    8. 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

      页面响应加载的顺序:   1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...

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

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

    随机推荐

    1. <<< 数据库基础知识

      相关概念: 1.数据 (DATA) : 数据是描述现实世界事物的符号标记, 是指用物理符号记录下来的可以鉴别的信息. 包括:数字.文字.图形.声音.及其他特殊符号 2.数据库(DATABASE) :按 ...

    2. 机器学习笔记----四大降维方法之PCA(内带python及matlab实现)

      大家看了之后,可以点一波关注或者推荐一下,以后我也会尽心尽力地写出好的文章和大家分享. 本文先导:在我们平时看NBA的时候,可能我们只关心球员是否能把球打进,而不太关心这个球的颜色,品牌,只要有3D效 ...

    3. 如何用java自带的工具生成证书

      一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

    4. JS 加载html 在IE7 IE8下 可调试

      实际背景 就是都是HTML 公共头部底部  然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...

    5. 【09-23】js原型继承学习笔记

      js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

    6. CSS 和 JS 动画哪个更快

      基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

    7. linux下共享库的注意点之-fpic

      在编译共享库必须加上-fpic.这是为什么呢? 首先看一个简单的例子: #include <stdio.h> int fun1() { printf("fun1\n") ...

    8. 2014 Multi-University Training Contest 9#1009

      Just a JokeTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tot ...

    9. PHP mkdir 0777权限问题

      在linux系统中,即使我们使用root帐号去手工执行php命令: mkdir('test', 0777); 结果文件的权限依然为: drwxr-xr-x 2 root root 4096 Jun 1 ...

    10. PHP定时备份MySQL,mysqldump语法大全

      几个常用操作: 1.备份 # 只导出表结构 d:/PHP/xampp/mysql/bin/mysqldump -h127.0.0.1 -P3306 -uroot -p123456 snsgou_sns ...