动画浏览器的渲染过程基于HTML构建HTML树（DOM）基于CSS构建CSS树（CSSOM）将两棵树合并为一棵渲染树（rendertree）布局布局（文档流，boxmodel,计算大小和位置）Paint绘图（绘制边框颜色、文字颜色、阴影等）Compose合成（按层叠关系显示图片）浏览器渲染原理的三种更新方式JS/CSS>style>layout>drawing>综合备注：Layout可以简单理解为位置和大小。如果CSS中布局相关的内容发生变化，浏览器在渲染时会重新走布局>绘图>合成的路线。官方回答：如果修改元素的“布局”属性，即改变元素的几何属性（如宽度、高度、左侧或顶部位置等），那么浏览器将不得不检查所有其他元素然后“自动回流”页面。任何受影响的部分都需要重新绘制，最终绘制的元素需要合成。JS/CSS>Style>Drawing>Synthesis备注：这个可以理解为制作时CSS的相关改动，如果不改变位置和大小，浏览器在渲染时会跳过布局过程，补充说你只修改如果改变背景色，那么渲染时走绘图>合成的路线。官方回答：如果修改“paintonly”属性（如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，浏览器会跳过Layout，但仍会进行绘制.JS/CSS>Style>合成CSS动画优化JS优化使用requestAnimationFrame代替setTimeout或setIntervalCSS优化使用will-change或transformtransform四个常用函数translatedisplacementscalezoomrotaterotateskewtilt具体用法参考MDN文档transition函数用法：补充中间帧语法：transition:属性名durationtransitionmodedelaytransitionmode:linearareaseease-inease-outease-in-outcubic-bezierstep-startstep-endsteps动画函数的使用：声明关键帧，添加动画声明关键帧：语法：@keyframs动画名称{}标准写法如下@keyframes动画名称{from{transform:translateX(50%);}到{转换：translateX(100%);}}@keyframes动画名称{0%{top:0;左：0；}30%{顶部：30px；}68%,72%{左:30px;}100%{顶部：60px；左：100%；}}语法：动画：时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名称请参考MDN文档
