THINK . DESIGN . CODE

易旭昕的个人博客,关注Android,Qt,WebKit

Chrome 渲染流水线演化的未来

前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化,对目前 60 左右版本的 Chrome 的渲染流水线进行解析,文末也讨论了当前渲染流水线的一些不足和未来演化的方向。 当前的渲染流水线过于复杂和冗长,特别是对于非合成器动画来说,过多的线程/进程间交互增加了不少额外开销,异步光栅化的...

2017-12-11 15:54:25

阅读数 771

评论数 0

浏览器渲染流水线解析与网页动画性能优化

若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解...

2017-10-28 17:13:44

阅读数 1261

评论数 0

How Rendering Work (in WebKit and Blink)

文章包括的主要内容如下 — 渲染基础 - DOM & RenderObject & RenderLayer WebView,绘制与混合,多线程渲染 硬件加速 分块渲染 图层混合加速 网页游戏渲染 - Canvas & WebGL

2014-04-14 16:18:44

阅读数 7921

评论数 3

Why your Android Apps Suck

Why I wrote this article? When I learn more about Android's graphics system, and do more work about how to use CPU/GPU in more paralleled way to i...

2013-03-26 23:06:19

阅读数 3606

评论数 0

微信小游戏 - 小游戏 vs H5 游戏性能对比和分析

这是个人关于微信小游戏系列文章的第三篇,在这系列文章里会描述 —— 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行; 对小游戏在 Android 平台的运行时架构进行分析; 通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for And...

2018-03-06 18:12:53

阅读数 4970

评论数 0

微信小游戏 - 运行时分析

这是个人关于微信小游戏系列文章的第二篇,在这系列文章里会描述 —— 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行; 对小游戏在 Android 平台的运行时架构进行分析; 通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for A...

2018-02-13 15:33:48

阅读数 2544

评论数 2

微信小游戏 - Canvas/WebGL Demo 移植

这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 —— 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行; 对小游戏在 Android 平台的运行时架构进行分析; 通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for A...

2018-02-12 15:30:02

阅读数 2458

评论数 0

浏览器渲染流水线解析(四)

5 非合成器动画性能分析和优化指南前面已经我们已经把非合成器动画区分为 Blink 触发,无法由合成器运行的动画和由 Timer/RAF 驱动的 JS 动画两类,因为前者可以认为是后者的一个简化版本,所以这一章主要讨论 Timer/RAF 驱动的 JS 动画。5.1 动画流水线从上图可以看出非合成...

2017-10-27 11:09:02

阅读数 645

评论数 0

浏览器渲染流水线解析(三)

4 合成器动画性能分析和优化指南4.1 动画流水线 上图显示了合成器动画的渲染流水线示意图,根据 Android WebView 平台的实现进行绘制,其它平台可能略微不同,但对后面的性能分析,在大部分情况下影响不大 整个流水线的大概过程是: 位于 Browser 进程 UI 线程的窗口管理器接...

2017-10-21 17:04:50

阅读数 657

评论数 0

浏览器渲染流水线解析(二)

2. 网页动画动画可以看做是一个连续的帧序列的组合。我们把网页的动画分成两大类 —— 一类是合成器动画,一类是非合成器动画(UC 内部也将其称为内核动画,虽然这不是 Chrome 官方的术语)。 合成器动画顾名思义,动画的每一帧都是由 Layer Compositor 生成并输出的,合成器自身驱动...

2017-10-16 16:14:54

阅读数 655

评论数 0

浏览器渲染流水线解析(一)

浏览器渲染流水线解析若干年前,我写过一篇介绍浏览器渲染流水线的文章 - [How Rendering Work (in WebKit and Blink)][1],这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的...

2017-09-26 19:51:03

阅读数 897

评论数 0

Android 5.0+ 系统 WebView 可见性及合成器内存管理

WebView Ancestor View 不可见/可见 WebView 不可见/可见 WebView Window 不可见/可见 WebView Detach/Attach WebView Pause/Resume  系统 WebView (Android 5.0+) 没有影...

2017-03-08 16:38:20

阅读数 1095

评论数 0

对页端开发高性能(交互/动画) Mobile WebApp 的一些思考

我个人相信,基于 Open Web 技术开发的 Mobile WebApp 应用,按当前现状的普遍质量而言,在交互/动画方面还有很大的提高空间。但是这需要内核开发者和页端开发者的共同努力。

2017-01-20 16:56:03

阅读数 1743

评论数 1

参加 Google 开发者日,与开发者关系团队交流的一些记录

写一篇流水账,记得什么就写什么,大概就是参加 Google 开发者日,与开发者关系团队交流的一些内容和想法的记录。

2016-12-12 18:53:07

阅读数 1155

评论数 0

手机腾讯网渲染性能分析

手机腾讯网可以说是渲染性能优化的典范,可以作为所有手机新闻门户首页的模板。 1. 它使用合成图层非常有目的性,一分不多一分不少; 2. 整个合成图层树结构十分合理,并且非常稳定,变化极少; 网页即使在较低端的手机上运行,无论是上下/左右划动,惯性滚动,图片轮播动画等都能够达到让人满意的流畅度。

2016-10-29 16:19:06

阅读数 1305

评论数 0

Transform Animation, Inline Transform and Overlap

这篇文章的目的在于说明在 Chrome 里面 Transform Animation 和 Inline Transform 对 Layer Overlap 计算的影响,而这个影响又会对一个 Render Layer 是否生成 Composited Layer(合成图层)产生难以察觉的微妙影响,而最...

2016-10-28 14:39:27

阅读数 1463

评论数 2

Page Rendering - Main Frame and Impl Frame

这是准备在内核组技术分享会上做的一次技术分享,主要是介绍网页渲染里面 Main Frame 和 Impl Frame 的含义,从而让读者对网页绘制的完整过程有一个基本概念。另外还略略说明了 Chromium 正在进行中的一些较大的架构/性能优化项目,说明它们是如何通过减少 Main Frame 和...

2016-01-28 14:39:24

阅读数 2050

评论数 0

理解 Embedder,理解 Chromium 的系统层次结构

理解 Embedder,理解 Chromium 的系统层次结构标签: Chromium作者:易旭昕在 Chromium 官方的文档里面,我们经常会看到 blink’s embedder 或者 content’s embedder 这样的称谓,理解 embedder 的概念,对我们理解 Chromi...

2015-09-02 16:13:51

阅读数 2674

评论数 1

Chromium 代码研究的一些感想

自己研究 Chromium 的代码(主要是 Android WebView 这个平台的代码),也有相当长的一段时间了,在这里把自己的一些感想记录下来,如果对他人有所帮助,也算是有些益处。 在研究过程中最大的感受,Chromium 非常重视架构的合理性和灵活性,每一个模块内聚性,独立性,还有接口和...

2015-04-27 15:11:33

阅读数 3957

评论数 2

Debugging of Chrome Android WebView

Debugging of Chrome Android WebViewChrome Android WebView Debugging作者: 易旭昕 (@roger2yi)本文主要描述如何将 Chrome Android WebView (下文简称CAW)的代码从 AOSP 中抽离出来,编译成独立...

2014-08-16 18:21:40

阅读数 4288

评论数 0

提示
确定要删除当前文章?
取消 删除