创建图层
- 创建新的图层
- 避免当前dom的动画位移渲染-使得其他dom也跟着进行重绘
- 尽量使用transform相关属性进行位移开启gpu加速
- 为动画位移图层添加willChange: 'transform'
- 让浏览器知道为此dom创建新图层
- 切忌创建过多反而影响性能
加快css加载
- 压缩CSS体积使用webpack插件能力减少css文件体积-提高加载速度
- 提前渲染CSS文件-只渲染当前要用到的CSS-分步异步加载CSS文件
- 延迟不必要的JS文件阻塞加载
contain: layout
- 我们想要在这个里面进行内容的插入
- 浏览器不知道-你插入的内容会不会影响到页面其他的元素布局
- 会对页面其他的元素进行重新的检查和运算
