渲染层面性能优化

「渲染层面」 的性能优化，无疑是如何让代码解析更好执行更快。

• 「CSS策略」：基于CSS规则
• 「DOM策略」：基于DOM操作
• 「阻塞策略」：基于脚本加载
• 「回流重绘策略」：基于回流重绘
• 「异步更新策略」：基于异步更新

1. 上述五方面都是编写代码时完成，充满在整个项目流程的开发阶段里。因此在开发阶段需时刻注意以下涉及到的每一点，养成良好的开发习惯，性能优化也自然而然被使用上了。
2. 渲染层面的性能优化更多表现在编码细节上，而并非实体代码。简单来说就是遵循某些编码规则，才能将渲染层面的性能优化发挥到最大作用。

「回流重绘策略」 在渲染层面的性能优化里占比较重，也是最常规的性能优化之一

CSS策略:

• 避免出现超过三层的嵌套规则
• 避免为ID选择器添加多余选择器
• 避免使用标签选择器代替类选择器
• 避免使用通配选择器，只对目标节点声明规则
• 避免重复匹配重复定义，关注可继承属性

DOM策略:

• 缓存DOM计算属性
• 避免过多DOM操作
• 使用DOMFragment缓存批量化DOM操作

阻塞策略:

• 脚本与DOM/其它脚本的依赖关系很强：对< script >设置defer
• 脚本与DOM/其它脚本的依赖关系不强：对< script >设置async

回流重绘策略:

• 缓存DOM计算属性
• 使用类合并样式，避免逐条改变样式
• 使用display控制DOM显隐，将DOM离线化

异步更新策略:

• 在异步任务中修改DOM时把其包装成微任务