浏览器
关注
分享
扫一扫
文章平均质量分 74
易旭昕
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
展开
-
Transform Animation, Inline Transform and Overlap
这篇文章的目的在于说明在 Chrome 里面 Transform Animation 和 Inline Transform 对 Layer Overlap 计算的影响，而这个影响又会对一个 Render Layer 是否生成 Composited Layer（合成图层）产生难以察觉的微妙影响，而最终可能导致网页的渲染性能的明显变化。文章的末尾会考察一个手机凤凰网的例子并给出一些页端优化的建议。原创 2016-10-28 14:39:27 · 2192 阅读 · 2 评论 -
How Rendering Work (in WebKit and Blink)
文章包括的主要内容如下 —渲染基础 － DOM ＆ RenderObject & RenderLayerWebView，绘制与混合，多线程渲染硬件加速分块渲染图层混合加速网页游戏渲染 － Canvas ＆ WebGL原创 2014-04-14 16:18:44 · 10681 阅读 · 3 评论 -
手机腾讯网渲染性能分析
手机腾讯网可以说是渲染性能优化的典范，可以作为所有手机新闻门户首页的模板。1. 它使用合成图层非常有目的性，一分不多一分不少；2. 整个合成图层树结构十分合理，并且非常稳定，变化极少；网页即使在较低端的手机上运行，无论是上下/左右划动，惯性滚动，图片轮播动画等都能够达到让人满意的流畅度。原创 2016-10-29 16:19:06 · 1795 阅读 · 0 评论 -
参加 Google 开发者日，与开发者关系团队交流的一些记录
写一篇流水账，记得什么就写什么，大概就是参加 Google 开发者日，与开发者关系团队交流的一些内容和想法的记录。原创 2016-12-12 18:53:07 · 1527 阅读 · 0 评论 -
对页端开发高性能（交互/动画） Mobile WebApp 的一些思考
我个人相信，基于 Open Web 技术开发的 Mobile WebApp 应用，按当前现状的普遍质量而言，在交互/动画方面还有很大的提高空间。但是这需要内核开发者和页端开发者的共同努力。原创 2017-01-20 16:56:03 · 2527 阅读 · 1 评论 -
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 · 1640 阅读 · 0 评论 -
浏览器渲染流水线解析（一）
浏览器渲染流水线解析若干年前，我写过一篇介绍浏览器渲染流水线的文章 - [How Rendering Work (in WebKit and Blink)][1]，这篇文章，一来部分内容已经过时，二来缺少一个全局视角来对流水线整体进行分析，所以打算重新写一篇新的文章，从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析，能让大部分页端同学都能够看的明白，并以此作为指引来分析和优化页面的渲染原创 2017-09-26 19:51:03 · 1614 阅读 · 0 评论 -
浏览器渲染流水线解析（四）
5 非合成器动画性能分析和优化指南前面已经我们已经把非合成器动画区分为 Blink 触发，无法由合成器运行的动画和由 Timer/RAF 驱动的 JS 动画两类，因为前者可以认为是后者的一个简化版本，所以这一章主要讨论 Timer/RAF 驱动的 JS 动画。5.1 动画流水线从上图可以看出非合成器动画的流水线比合成器动画更长更复杂，并且非合成器动画的后半段跟合成器动画是一致的。JavaScipt原创 2017-10-27 11:09:02 · 1112 阅读 · 0 评论 -
浏览器渲染流水线解析与网页动画性能优化
若干年前，我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink)，这篇文章，一来部分内容已经过时，二来缺少一个全局视角来对流水线整体进行分析，所以打算重新写一篇新的文章，从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析，能让大部分页端同学都能够看的明白，并以此作为指引来分析和优化页面的渲染／动画性能。 有些基本概念原创 2017-10-28 17:13:44 · 2560 阅读 · 1 评论 -
浏览器渲染流水线解析（三）
4 合成器动画性能分析和优化指南4.1 动画流水线 上图显示了合成器动画的渲染流水线示意图，根据 Android WebView 平台的实现进行绘制，其它平台可能略微不同，但对后面的性能分析，在大部分情况下影响不大整个流水线的大概过程是：位于 Browser 进程 UI 线程的窗口管理器接收到来自操作系统的屏幕刷新垂直同步信号（VSync），开始准备输出新的一帧，它首先给位于 Rendere原创 2017-10-21 17:04:50 · 1052 阅读 · 0 评论 -
理解 Embedder，理解 Chromium 的系统层次结构
理解 Embedder，理解 Chromium 的系统层次结构标签： Chromium作者：易旭昕在 Chromium 官方的文档里面，我们经常会看到 blink’s embedder 或者 content’s embedder 这样的称谓，理解 embedder 的概念，对我们理解 Chromium 的系统层次结构是十分重要的。原创 2015-09-02 16:13:51 · 4545 阅读 · 1 评论 -
Chromium 代码研究的一些感想
自己研究 Chromium 的代码（主要是 Android WebView 这个平台的代码），也有相当长的一段时间了，在这里把自己的一些感想记录下来，如果对他人有所帮助，也算是有些益处。在研究过程中最大的感受，Chromium 非常重视架构的合理性和灵活性，每一个模块内聚性，独立性，还有接口和实现的分离都做的很好，对外的接口十分清晰，包括供外部调用的接口，需要外部提供实现的抽象接口（XXX原创 2015-04-27 15:11:33 · 4505 阅读 · 2 评论 -
阅读源代码的一些体会
最近一个月的时间，差不多都在看Android 4.0系统和它的WebKit实现的代码。面对庞大的代码库，复杂的系统，从一开始毫无头绪到后来慢慢厘清主要的流程和摸清系统的结构。体会到有一些方法对阅读源代码是非常有帮助的。需要可以编译，运行和调试如果只是光看代码，没办法编译，运行和调试，那对系统的理解总是只能停留在概念性的表面而无法深入。最好是能够下断点和单步跟踪，如果很难实现原创 2012-03-02 20:12:47 · 2204 阅读 · 0 评论 -
Web Page Rendering and Accelerated Compositing
这是最近在公司做的一次技术分享，介绍了WebKit里面的Accelerated Compositing机制，Accelerated Compositing（图层混合加速）主要用于CSS3动画的加速，由Apple首先引入WebKit并在Safari上实现，而目前，包括Qt，Chrome，Android等其它主要的WebKit Port也都提供了各自的实现。讲义内容包括：1，网页的基本渲染流程原创 2012-04-25 09:26:04 · 2267 阅读 · 0 评论 -
Android 4.1 - 将系统浏览器编译成独立应用
为了方便在手机上（Galaxy Note with CM10），调试Android4.1 系统浏览器的代码，进行代码研究，我把系统浏览器编译成了一个独立的应用，不会跟ROM原来的系统浏览器产生冲突，可以很方便地在Eclipse自己建立的工程里面对Java部分的代码进行跟踪调试，理论上C++的部分也可以通过GDB进行调试。自己编译的库，显示Layer边界和信息首先系统原创 2012-10-13 09:47:52 · 9438 阅读 · 12 评论 -
Android 4.1 - 如何使用systrace做性能分析
systrace是Android 4.1引入的一套用于做性能分析的工具，它基于Linux内核的ftrace机制（用于跟踪Linux内核的函数调用），可以输出各个线程当前的函数调用状态，并且可以跟当前CPU的线程运行状态，Display VSYNC间隔，SurfaceFlinger Window Composite间隔等系统信息在同一个时间轴上进行对比，让我们分析程序在某个时间点在当前系统上下文上的原创 2012-11-30 10:06:57 · 21469 阅读 · 1 评论 -
Introduce My Work
我在LinkedIn上面的个人简介是：Roger at UC Mobile Ltd. (www.uc.cn), focus on graphics stack (rendering architecture) research of WebKit based Browser in Android platform, include the graphics stack of WebKit原创 2013-02-02 11:35:52 · 4128 阅读 · 0 评论 -
Why Blink and Why not Blink
清明放假的第一天，Mozilla 和 Google同时宣布了他们新的浏览器引擎的开发计划 —— Servo 和 Blink。Servo 早前其实就一直有消息了，而 Blink 的发布则是相当突然，因为工作的原因，我自然是对 Blink 更感兴趣（放个假都不得安生，苦逼的程序员），更希望了解 Google 为什么要从 WebKit fork 出一个新的浏览器引擎（Why Blink），这样的做法原创 2013-04-04 16:36:46 · 3998 阅读 · 1 评论 -
关于移动Web性能的5个神话
译者前言这篇文章（http://www.sencha.com/blog/5-myths-about-mobile-web-performance/）由Sencha的CEO Michael Mullany所写，主要是回应早前的一篇引起较多关于移动Web性能讨论的文章“Why mobile web apps are slow”（原文，译文），作者的主要观点是“Why mobile翻译 2013-08-12 21:05:07 · 6765 阅读 · 3 评论 -
High Performance Canvas Game for Android（高性能Android Canvas游戏开发）
Rule #0 为移动平台进行优化为移动平台进行优化是十分重要的，因为移动平台的性能大概只有桌面平台的1/10左右（*1），它通常意味着：更慢的CPU速度，这意味着不经过优化的JavaScript代码，性能会十分糟糕；更小的内存，没有虚拟内存的支持，这意味着加载太多的资源容易导致内存不足，JSVM更容易引发GC，并且GC造成的停顿时间也越长；更慢的GPU速度，没有独原创 2013-08-31 18:13:00 · 6297 阅读 · 0 评论 -
我的2013 - 年终总结 + 浏览器渲染发展的一些思考
下半年开始，在和主管的工作总结中，还有职业等级评定的答辩会议上，都不断地被问到下面这两个问题，同时自己也在不断地进行思考。浏览器的渲染架构还有没有可能有更大的性能突破？浏览器能不能够成为一个承载游戏运行的良好平台，使得H5游戏能够跟原生游戏在同一层面竞争？原创 2013-12-29 20:14:24 · 4941 阅读 · 0 评论 -
如何编译 Chrome for Android
如何编译 Chrome for Android原创 2012-12-11 12:22:48 · 10961 阅读 · 5 评论 -
Chrome 渲染流水线演化的未来
前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化，对目前 60 左右版本的 Chrome 的渲染流水线进行解析，文末也讨论了当前渲染流水线的一些不足和未来演化的方向。 当前的渲染流水线过于复杂和冗长，特别是对于非合成器动画来说，过多的线程/进程间交互增加了不少额外开销，异步光栅化的机制也是有利于合成器动画而不利于非合成器动画。而未来的演化理应需要简化渲染流水线，减少线程/进程间交互，原创 2017-12-11 15:54:25 · 1878 阅读 · 0 评论