前端性能优化

1.减少HTTP请求

 1）分页

 2）防抖/节流

 

2.静态资源尽量使用CDN形式引入

 

3.外部文件按顺序引入

 css外部文件放头部，js外部文件放html底部（或者使用defer/async异步加载的方式）

 原因：css执行会阻塞渲染，阻止js执行；js加载执行会阻塞html解析，阻止cssom构建

 

4.利用H5缓存存储数据，可减少接口请求

 

5.前端工程化

webpack模块打包优化

1）利用缓存Cache

2）并行打包/压缩和terser-webpack-plugin（并行压缩）

3）DllPlugin和DllReferencePlugin（第三方基础包分离）

 

6.图片优化（图片延时加载、响应式图片、雪碧图）

 

7.减少第三方组件库的使用，如必须使用，可采用按需加载的方式

 

8.减少页面重绘与重排

 重绘：1）减少使用table布局；2）减少DOM操作

 重排：减少内联样式，用内部样式替代