<meta charset="utf-8">
一、.浏览器渲染原理
1.解析HTML→构建HTML树（DOM）
2.解析CSS→构建CSS树（CSSDOM）
3.讲两棵树合并成一颗渲染树（render tree）
image
4.Layout布局
根据render tree就可以进入Layout布局
Layout流程输出是一个盒模型，Layout计算每个对象的精确位置和大小。具体有三种更新方式：
image
image
5.Paint绘制
布局好了后，就可以将render tree里的每个对象转换成屏幕的实际像素，paint就是将各个节点绘制到屏幕上。
6.Composite合成
将已经paint的部分根据层叠关系把页面展示出来。
二、CSS 动画的两种做法（transition 和 animation）
-transition 过渡
补充中间帧，再更改CSS属性控制动画速度，过渡必须要有起始，一般只有1次或者两次动画
-animation 动画
有两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧
这里要使用@keyframes定义动画序列
例：
用transition写的爱心：
http://js.jirengu.com/sofuzalona/1/edit?html,css,output
用animation写的爱心：
http://js.jirengu.com/hatovucedi/edit?html,css,output
三、其他任何你想写的。
边学边忘，忘了再学，学了再忘。
——没关系，已经习惯了
作者：我是WilliamWang
链接：https://www.jianshu.com/p/ec3d249b379f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论