16 易旭昕

尚未进行身份认证

我要认证

Roger in UC Mobile Ltd., focus on graphics stack (rendering architecture) research of WebKit based Browser in Android platform, include the graphics stack of WebKit itself along with the graphics stack of Android platform, and design how to combine t

等级
TA的排名 2w+

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

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

2018-03-06 18:12:53

微信小游戏 - 运行时分析

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

2018-02-13 15:33:48

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

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

2018-02-12 15:30:02

Chrome 渲染流水线演化的未来

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

2017-12-11 15:54:25

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

若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析,能让大部分页端同学都能够看的明白,并以此作为指引来分析和优化页面的渲染/动画性能。 有些基本概念

2017-10-28 17:13:44

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

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

2017-10-27 11:09:02

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

4 合成器动画性能分析和优化指南4.1 动画流水线 上图显示了合成器动画的渲染流水线示意图,根据 Android WebView 平台的实现进行绘制,其它平台可能略微不同,但对后面的性能分析,在大部分情况下影响不大整个流水线的大概过程是:位于 Browser 进程 UI 线程的窗口管理器接收到来自操作系统的屏幕刷新垂直同步信号(VSync),开始准备输出新的一帧,它首先给位于 Rendere

2017-10-21 17:04:50

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

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

2017-10-16 16:14:54

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

浏览器渲染流水线解析若干年前,我写过一篇介绍浏览器渲染流水线的文章 - [How Rendering Work (in WebKit and Blink)][1],这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析,能让大部分页端同学都能够看的明白,并以此作为指引来分析和优化页面的渲染

2017-09-26 19:51:03

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

WebViewAncestor View 不可见/可见WebView不可见/可见WebView Window 不可见/可见WebView Detach/AttachWebView Pause/Resume 系统 WebView (Android 5.0+)没有影响没有影响更新 WebView 可见性状态,影

2017-03-08 16:38:20

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

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

2017-01-20 16:56:03

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

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

2016-12-12 18:53:07

手机腾讯网渲染性能分析

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

2016-10-29 16:19:06

Transform Animation, Inline Transform and Overlap

这篇文章的目的在于说明在 Chrome 里面 Transform Animation 和 Inline Transform 对 Layer Overlap 计算的影响,而这个影响又会对一个 Render Layer 是否生成 Composited Layer(合成图层)产生难以察觉的微妙影响,而最终可能导致网页的渲染性能的明显变化。文章的末尾会考察一个手机凤凰网的例子并给出一些页端优化的建议。

2016-10-28 14:39:27

Page Rendering - Main Frame and Impl Frame

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

2016-01-28 14:39:24

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

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

2015-09-02 16:13:51

Chromium 代码研究的一些感想

自己研究 Chromium 的代码(主要是 Android WebView 这个平台的代码),也有相当长的一段时间了,在这里把自己的一些感想记录下来,如果对他人有所帮助,也算是有些益处。在研究过程中最大的感受,Chromium 非常重视架构的合理性和灵活性,每一个模块内聚性,独立性,还有接口和实现的分离都做的很好,对外的接口十分清晰,包括供外部调用的接口,需要外部提供实现的抽象接口(XXX

2015-04-27 15:11:33

Debugging of Chrome Android WebView

Debugging of Chrome Android WebViewChrome Android WebView Debugging作者: 易旭昕 (@roger2yi)本文主要描述如何将 Chrome Android WebView (下文简称CAW)的代码从 AOSP 中抽离出来,编译成独立的应用,方便对 CAW 的 Java/C++ 代码进行跟踪调试。相关的代码位于 GitHub Chro...

2014-08-16 18:21:40

关于 Apple Metal API 的一些想法

在看完 Metal 的开发文档后,除了官方所宣称的一些优点外(比如说更容易理解和使用的 API,更直接和精细的硬件控制,减少 GPU 使用过程中的 CPU 额外开销等等),从我有限的 GLES 开发经验看来,以下一些方面更让人兴奋。更方便和友好的多线程 GPU 渲染支持GLES 的设计,所有东西都必须跟一个 GL Context 绑定,由 GL Context 内部所控制的状态机驱使,而 GL C...

2014-06-05 13:12:01

How Rendering Work (in WebKit and Blink)

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

2014-04-14 16:18:44

查看更多

勋章 我的勋章
    暂无奖章