高性能Web动画及渲染原理

本专题以Chromium为例,梳理了浏览器将代码转换成图像的整个渲染流程,揭秘Web开发中关于JS和CSS各种最佳实践的底层原理。

CSS动画和JS动画
CSS动画和JS动画
介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法。CSS动画通常指使用transition实现的过渡动画 。
渲染管线和CPU渲染
渲染管线和CPU渲染
介绍浏览器渲染原理及CPU渲染流程介绍浏览器渲染原理及CPU渲染流程介绍浏览器渲染原理及CPU渲染流程
transform和opacity为什么高性能
transform和opacity为什么高性能
opacity和transform的动画性能的话题,总是会涉及到“合成层”或者“硬件加速”的概念,让人觉得混乱,本次希望将概念梳理清楚。
“Compositor-Pipeline演讲PPT”学习摘要
“Compositor-Pipeline演讲PPT”学习摘要
一直以来都想了解浏览器合成层的运作机制,但是相关的中文资料大多比较关注框架和开发技术, 本文仅对关键信息做一些笔记。
合成层的生成条件和陷阱
合成层的生成条件和陷阱
对于渲染过程来说,只需要理解这里形成了新的CompositingLayer合成层就可以了,其他的层概念基本都是用于实现对