共计 637 个字符，预计需要花费 2 分钟才能阅读完成。
浏览器渲染原理
浏览器渲染过程
- 依据 HTML 构建 HTML 树（DOM）
- 依据 CSS 构建 CSS 树（CSSOM）
- 将两棵树合并成一棵渲染树
- Layout 布局（文档流、盒模型、计算大小和地位）
- Paint 绘制（把边框色彩、文字色彩、暗影等画进去）
- Compose 合成（依据层叠关系展现画面）
transition 与 animation 的区别
1、transition 须要去触发比方：点击事件、鼠标移入事件；而 animation 能够配合 @keyframe 能够不触发事件就触发这个动画
2、transition 触发一次播放一次；而 animation 则是能够设置很多的属性，比方循环次数，动画完结的状态等等；
3、transition 关注的是款式属性的变动，属性值和工夫的关系是一个三次贝塞尔曲线；而 animation 作用于元素自身而不是款式属性，能够应用关键帧的概念，能够实现更自在的动画成果；
4、在性能方面：浏览器有一个主线程和排版线程；主线程个别是对 js 运行的、页面布局、生成位图等等，而后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程申请位图等等；咱们在用应用 aniamtion 的时候这样就能够扭转很多属性，像咱们扭转了 width、height、postion 等等这些扭转文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比拟大，然而咱们用 transition 的时候个别会联合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。
正文完
