浏览器的渲染原理
步骤
- 根据HTMl构建Html树（DOM）
- 根据css构建css树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- Layout布局.（文档流.盒模型.计算大小和位置）
- Paint绘制（把边框颜色.文字颜色.阴影等画出来）
- Compose合成（根据层叠关系展示画面）
如何更新样式
一般我们用JS来更新样式
- 比如：div.style.background='red'
- div.style.display='name'
- div.classList.add('red')
- div.remove()直接删掉节点
css（每个属性触发什么流程 需要自己一个一个尝试 Important网站(csstriggers.com)
JS的三种更新样式的方式
- （全走一遍 div.remove 会触发当前消失，其他元素relatyout） Javascript > style > layout > paint > Composite (JS/Css > 样式 > 布局 > 绘制 > 合成 )
- （跳过layout 改变背景颜色.直接repaint+Composite） Javascript > style > paint > Composite (JS/Css > 样式 > 绘制 > 合成 )
- （跳过layout+paint 改变transform,只需COmposite ） Javascript > style > Composite (JS/Css > 样式 > 合成 )注意必须全屏查看效果，在iframe里看有问题
Css动画的两种做法（transition和animation）
transition(过渡)
作用：补齐中间帧
语法
- transition:属性名 时长 过渡方式 延迟
- transition：left 200ms linear
- 可以用逗号分隔两个不同属性
- transition：left 200ms, top 400ms
- 可以用all代表所有属性
- transition：all 200ms
- 过渡方式有：linear（匀速的.线性的）/ ease（环动的） /ease-in （先慢再快） / ease-in-out / cubic-bezier /step-start /step-end /steps.(具体含义要靠数学知识)
注意：并不是所有属性都需要过渡
- display：none=> block 没法过渡
- 一般改成risibility:hidden=>visible (没有为什么)
- background颜色可以过渡
- opacity透明度可以过渡吗？ （并不建议 我虽然看不见还是占据位置）
- 过度必须要有起始 一般只有一次动画或者两次 比如：hover和非hover状态的过渡。
animation
作用
-
时长：1s或者1000ms
-
过渡方式：跟transition取值一样.如linear
-
次数：3或2.4或者infinite（无限次）
-
方向：rererse/alterate/alternate-vererse
-
填充模式：none/forwords/backuards/both
-
是否暂停：psused/running
-
以上所有属性都有应对的单独属性
