理解CSS animations 和 transitions的性能问题

原文链接：CSS animations and transitions performance: looking inside the browser

现代的浏览器通常会有两个重要的执行线程，这2个线程协同工作来渲染一个网页：

• The main thread 主线程
• The compositor thread 合成线程

Typically, the main thread is responsible for:

• Running your JavaScript.
• Calculating your HTML elements’ CSS styles. 计算你的HTML元素的CSS样式。
• Laying out your page. 页面布局
• Painting your elements into one or more bitmaps. 绘制你的元素在一个或者更多的位图上
• Handing these bitmaps over to the compositor thread. 处理位图到合成线程上

Typically, the compositor thread is responsible for

• Drawing bitmaps to the screen via the GPU.
• Asking the main thread to update bitmaps for visible or soon-to-be-visible parts of the page.
• Figuring out which parts of the page are visible.
• Figuring out which parts are soon-to-be-visible when you’re scrolling.
• Moving parts of the page when you scroll.