Graphics Architecture

Overview

Each Aura Window owns a corresponding compositor layer. The layer tree corresponds roughly to the window tree (though Views also supports layers, so a single Aura Window can have nested Layers created by Views within that Window).
 
If the Window's layer has a texture that texture is drawn by the compositor. Aura is transitioning to using the Chromium Compositor ("CC"). At time of writing CC is part of WebKit, but there is a nascent effort to extract it into its own library within Chromium.
 
The Compositor maintains two trees of layers, one on the UI thread and one (optionally) on the Compositor thread. This improves performance for animations and interactive events like scrolling. See CC documentation for more information. The CC library talks to the GPU process via command buffer to do the final rendered output.

Pre-Layer Tree Unification World

At the time of writing we have two layer trees, one for the UI and one for content from the renderer process. The renderer process uses WebLayer directly, while the UI wraps it in a class ui::Layer in ui/compositor, which provides some additional utilities useful to Aura and Views.
 
Once CC is extracted into a standalone library we will explore replacing ui::Layer functionality with direct use of CCLayer.

Paint Scheduling/Draw Flow

Throughout these documents and in the source code you will see references to paint and draw. Paint is an operation performed mostly by the Views system to update the contents of the windows... this is a typically a software operation to update the contents of a Skia canvas. Draw is an operation performed by the compositor to draw the contents of layers' textures to the screen, including potentially compositing some of them against each other.
 

A draw can be triggered by two sources: the underlying native window owned by the RootWindowHost can be sent a redraw notification from the system (e.g. WM_PAINT or Expose), or an application event can trigger a redraw by calling ScheduleDraw() on any number of framework objects (Compositor, RootWindow, etc). In the latter case a task is posted that calls Draw().

 
Layer also supports a method SchedulePaint(), which is exposed through Window and also NativeWidgetAura and used by Views when some sub-region of the layer is to be marked invalid. The layer stores the current invalid rect which is a union of all invalid rects specified since the last validation.
 
When the compositor draws, it performs a depth-first walk of the layer tree, and if any of the layers it encounters has an invalid rectangle, it is asked to repaint its contents. The compositor does this via WebKit::WebContentLayerClient, implemented by ui::Layer. The layer asks its delegate to repaint via a call of OnPaintLayer() which takes a Skia canvas sized to the invalid rect. In Aura, the delegate is the Window, and the Window asks its delegate to repaint. In production this is often a NativeWidgetAura, a Views type. As mentioned earlier, Views can also have layers directly, and as such a View can also be a layer's delegate.
 
Once the draw is complete the invalid region is validated so no further paint notifications are sent until explicitly requested by a subsequent invalidation.

UI Framework-1: Aura Graphics Architecture的更多相关文章

  1. Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

    1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybr ...

  2. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  3. [转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

    本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic i ...

  4. 关于apicloud ios自定义模块引用第三方framework not found for architecture armv7

    1 .自定义模块 新建模块必须是静态库 2.使用的第三方framework 必须要把 .h文件开放出来 3.编译要用 真机模式 (上传模块以后,自定义load要编译,用生成的二维码调试) 4. 添加监 ...

  5. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  6. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  7. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  8. 07- Vue3 UI Framework - Switch 组件

    为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过 ...

  9. 08 - Vue3 UI Framework - Input 组件

    接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...

随机推荐

  1. Oracle 11g AWR生成报告

    1.生成单实例 AWR 报告: @$ORACLE_HOME/rdbms/admin/awrrpt.sql 2.生成 Oracle RAC AWR 报告: @$ORACLE_HOME/rdbms/adm ...

  2. js小结2

    1.includes和contains 对于字符串,数组来说,判断包含是includes,对classList是contains 2.编辑span内容,enter提交(如何避免keydown之后换行: ...

  3. 51nod 1098 最小方差 排序+前缀和+期望方差公式

    题目: 题目要我们,在m个数中,选取n个数,求出这n个数的方差,求方差的最小值. 1.我们知道,方差是描述稳定程度的,所以肯定是着n个数越密集,方差越小. 所以我们给这m个数排个序,从连续的n个数中找 ...

  4. EL与JSTL学习(二)——JSTL技术

    1.JSTL概述 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能. jstl出现的目的同el一样也是要代替jsp ...

  5. TP5 分页类,自定义样式

    结合X-admin 后台框架 在做项目,为了保持分页风格的一致,所以需要自定义 一个分页类. 一.在项目的 extend 目录,创建 cus 目录 二.创建 Page 分页类,代码如下 <?ph ...

  6. IIFE 萌新学习笔记

    立即执行函数表达式(IIFE) IIFE:Immediately-Invoked Function Expression(立即执行函数表达式) 一 常用写法: //经常使用的写法(function() ...

  7. 紫书 例题8-9 UVa 1451 (数形结合)

    这道题用了数形结合, 真的牛逼, 完全想到不到还可以这么做 因为题目求的是平均值, 是总数除以个数, 这个时候就可以联系 到斜率, 也就是说转化为给你一堆点, 让你求两点之间的最大斜率 要做两个处理 ...

  8. 紫书 习题 11-1 UVa 821 (Floyd)

    水题, Floyd一遍就完了. #include<cstdio> #include<algorithm> #define REP(i, a, b) for(int i = (a ...

  9. SpringBoot实战(二)Restful风格API接口

    在上一篇SpringBoot实战(一)HelloWorld的基础上,编写一个Restful风格的API接口: 1.根据MVC原则,创建一个简单的目录结构,包括controller和entity,分别创 ...

  10. 2015 Multi-University Training Contest 2 hdu 5306 Gorgeous Sequence

    Gorgeous Sequence Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...