一、浏览器渲染原理
- 浏览器在接收到服务器返回的html页面后，
- 浏览器开始构建DOM树
DOM TREE，遇到CSS样式会构建CSS规则树CSS RULE TREE， - 遇到
javascript会通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree，解析完成后， - 浏览器引擎会通过
DOM Tree和CSS Rule Tree来构造Rendering Tree（渲染树）， - 最后，渲染树构建完成后就是 "布局" 处理，也就是确定每个节点在屏幕上的确切显示位置
- 下个步骤（渲染之后），开始 "绘制" ，遍历渲染树，并用UI后端层，将每一个节点绘制出来。
简单说：
根据HTML构建HTML树（DOM）;
根据CSS构建CSS树（CSSOM）;
将两棵树合并成一颗渲染树（render tree）;
Layout布局（文档流、盒模型、计算大小和位置）;
Paint绘制（把边框颜色、文字颜色、阴影等画出来）;
Compose合成（根据层叠关系展示画面）。
1.1谈一下层叠上下文的概念
我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
附上图与链接：developer.mozilla.org/zh-CN/docs/…
这就是一个层叠上下文大概的结构了。
二、CSS动画及CSS性能优化
这里就不得不说一个css很yue的东西了：当你尝试改变样式的时候，你会发现你不知道这个属性会触发上面渲染的哪几个流程，这就导致你需要一个个试验！！(⓿_⓿)
还好还好(^///^)有大佬-->>csstriggers.com/ 这位大佬已经将他试验结果分享了出来🤙👍👍👍
果然程序员都爱分享！
这样一来，当你需要的时候，去上面查询一下就知道啦。
2.1 CSS动画
只说做法，一般分两种（transition 和 animation）
1.transition：
.container{
transition: all 1s;
}
.container:hover{
transform: scale(1.5);
}
2.animation：
.container{
animation: jump 1.5s infinite alternate;
}
@keyframes jump {
0%{transform: scale(1.0);}
100%{transform: scale(1.5);}
}
（自己可以试验一下 多动手 说多无益 它本来也就没道理）
2.2 CSS性能
也许你会问我，怎么去看性能呢==》信我 浏览器啥也给你了。
好的，简单说几个优化的方向，具体演练就自己尝试吧。
- 能用transform就不要用left
- JS优化，使用requestAnimationFrame代替setTimeout或setInterval
- css优化，使用will-change或translate ok，就说到这里。
