H5动画在移动平台上的性能优化.pptx

H5动画在移动平台上的性能优化;Part 1：CSS动画的问题;流畅的动画;动画实现方式;CSS动画的优点和问题;解决CSS动画性能问题的思路;Part2：浏览器渲染原理;Blink的线程与进程;Webkit核心工作过程;树的转换过程;;RenderLayer Tree;Blink渲染过程;Layout Paint;re-layout repaint;Drawing--Compositing;GPU Accelerate Drawing;Compositing Details;RenderLayeràComposited Layer;Compositing : benefits;Compositing : overhead;CSS动画优化路线图;;Chrome DevTools—性能分析神器;使用translate实现滚动;z-Index会导致意外Layer;避免在切换动画之间做耗时操作;使用opacity做元素显示与隐藏;避免过大的Composited Layer;避免交替读写布局属性引起re-layout;尽量避免gif图片;合理使用will-change;合理使用touch-action