关于css:CSS-知识总结

浏览器渲染原理

浏览器渲染过程

1. 依据 HTML 构建 HTML 树（DOM）
2. 依据 CSS 构建 CSS 树（CSSOM）
3. 将两棵树合并成一棵渲染树
4. Layout 布局（文档流、盒模型、计算大小和地位）
5. Paint 绘制（把边框色彩、文字色彩、暗影等画进去）
6. Compose 合成（依据层叠关系展现画面）

transition 与 animation 的区别

1、transition 须要去触发比方：点击事件、鼠标移入事件；而 animation 能够配合 @keyframe 能够不触发事件就触发这个动画

2、transition 触发一次播放一次；而 animation 则是能够设置很多的属性，比方循环次数，动画完结的状态等等；

3、transition 关注的是款式属性的变动，属性值和工夫的关系是一个三次贝塞尔曲线；而 animation 作用于元素自身而不是款式属性，能够应用关键帧的概念，能够实现更自在的动画成果；

4、在性能方面：浏览器有一个主线程和排版线程；主线程个别是对 js 运行的、页面布局、生成位图等等，而后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程申请位图等等；咱们在用应用 aniamtion 的时候这样就能够扭转很多属性，像咱们扭转了 width、height、postion 等等这些扭转文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比拟大，然而咱们用 transition 的时候个别会联合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。