1 .每个浏览器都会提供一组默认样式uaer agent stylesheet 在我们未明确指定任何样式时看到的样式.我们的样式会覆盖这些默认值
2 .构建渲染树
1 .在构建渲染树的时候,从DOM树根节点开始,遍历每一个可见的节点,一些不可见的节点,meta,script就会被忽略
2 .一些节点通过css样式隐藏的话,也是会被忽略 display:none
3 .visibility:hidden; 还会渲染,只是显示看不见,任然是DOM树的一部分
4 .
3 .优化js
1 .将长时间运行的js计算转移到web workers
2 .避免使用setTimeout或者setInterval进行视觉更新,这将在帧中的某个点调用callback,可能在最后,我们想做的是在帧开始的时候触发视觉变化而不是错过他.也就是更新不即时
3 .
4 .优化css
1 .减少选择器的复杂性
2 .减少必须进行样式计算的元素的数量.直接对一些原型进行样式更改,而不是整个页面改动
5 .优化布局
1 .使用flex布局
2 .尽可能减少布局的数量,以及改变编剧的数量,因为这都可能需要大量的计算
3 .避免强制同步布局.js在运行的时候,访问前一帧中所有的数据是已知的,如果你要在访问一个css属性之前更改了他的样式,那么浏览器必须先要执行更改布局的过程,才能进行值的返回
