浏览器渲染原理

浏览器渲染过程步骤

根据html构建html树（DOM树）根据css构建css树（CSSOM）将两棵树合并成一颗渲染树（render tree） layout布局（文档流、盒模型、计算大小和位置） paint（把边框颜色、文字颜色、阴影等画出来） compose合成（根据层叠样关系展示画面）如何更新样式一般用js来更新样式

div.style.background='red';
div.style.dispaly='none';
div.classListAdd('red');

三种更新方式：

css动画优化

1、js优化

使用 requestAnimationFrame 代替 setTimeout或setInterval

2、css优化

使用will-change或translate transition（过渡）语法： transition：属性名时长过渡方式延迟 transition：left 200ms linear 可以用逗号隔开两种不同属性 transition：left 200ms，top 200ms 可以用all代表所有的属性

注意点： display：none->block 不能过渡。一般改成visibili：hidden -> visible background颜色和opacity透明度可以过渡

animation 制作动画一般分为两步：1、先定义动画 2、调用动画

1、用keyframes定义动画

 @keyframes  动画名称 {
            0%{

            }
            100% {
 
            }
        }

2、调用动画

缩写形式：animation：时长| 过渡方式| 延迟 |次数 |方向 | 填充模式 | 是否暂停 | 动画名

时长：1s或者1000ms

过渡方式：跟transition取值一样

次数：3或者2.4或者infinite

方向：reverse/alternate/alternate-reverse

填充方式：none/forwards/backwards/both

是否暂停：paused/running

以上属性都有单独的对应属性

！学习css要敢于创新，不要墨守成规，要有想象力和创造力。多想，多看。请多指教。

《CSS 知识总结》