- 博客(4)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 浏览器渲染流水线解析与网页动画性能优化
若干年前，我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink)，这篇文章，一来部分内容已经过时，二来缺少一个全局视角来对流水线整体进行分析，所以打算重新写一篇新的文章，从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析，能让大部分页端同学都能够看的明白，并以此作为指引来分析和优化页面的渲染／动画性能。 有些基本概念
2017-10-28 17:13:44
2457
1
原创 浏览器渲染流水线解析（四）
5 非合成器动画性能分析和优化指南前面已经我们已经把非合成器动画区分为 Blink 触发，无法由合成器运行的动画和由 Timer/RAF 驱动的 JS 动画两类，因为前者可以认为是后者的一个简化版本，所以这一章主要讨论 Timer/RAF 驱动的 JS 动画。5.1 动画流水线从上图可以看出非合成器动画的流水线比合成器动画更长更复杂，并且非合成器动画的后半段跟合成器动画是一致的。JavaScipt
2017-10-27 11:09:02
1068
原创 浏览器渲染流水线解析（三）
4 合成器动画性能分析和优化指南4.1 动画流水线 上图显示了合成器动画的渲染流水线示意图，根据 Android WebView 平台的实现进行绘制，其它平台可能略微不同，但对后面的性能分析，在大部分情况下影响不大整个流水线的大概过程是：位于 Browser 进程 UI 线程的窗口管理器接收到来自操作系统的屏幕刷新垂直同步信号（VSync），开始准备输出新的一帧，它首先给位于 Rendere
2017-10-21 17:04:50
1009
原创 浏览器渲染流水线解析（二）
2. 网页动画动画可以看做是一个连续的帧序列的组合。我们把网页的动画分成两大类 —— 一类是合成器动画，一类是非合成器动画（UC 内部也将其称为内核动画，虽然这不是 Chrome 官方的术语）。合成器动画顾名思义，动画的每一帧都是由 Layer Compositor 生成并输出的，合成器自身驱动着整个动画的运行，在动画的过程中，不需要新的 Main Frame 输入；内核动画，每一帧都是由 Bl
2017-10-16 16:14:54
1065
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人