前端提升性能的几种方式

开发阶段

遵循各种开发语言的《风格指南》。

各种开发语言的官网都会有，例如angular2+的：angular风格指南vue风格指南

如果使用了组件库，尽量按需导入。

防抖

超高频触发网路请求，不仅效率低而且没办法保证请求结果的正确性。
可以引入lodash等库。

如果图片较多，使用懒加载。

注意：懒加载用于提高页面加载速度，预加载用于提高首屏速度

划分模块

用webpack-bundle-analyzer分析工具，拆分模块，使用路由懒加载加载优化后的模块

代码切割

如果在打包的时候直接把公用代码重复打包进不同的 bundle 文件，会造成代码冗余，也会影响应用性能。

引入Web Worker

在 H5 中引入了 Web Worker，它的作用就是为 JS 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给 Worker 线程。

生成打包阶段

使用压缩/混淆/打包工具

打包工具到底是个什么东西？究竟干什么用？为什么要这么麻烦配置这些东西？有一篇超牛的文章：
链接: Grunt 安装与配置环境.

1. webpack
2. gulp
3. grunt
   链接: Grunt完整打包一个项目实例.

使用http压缩（gzip压缩）

链接: Tomcat启用GZIP压缩，提升web性能.

chrome 性能测试

链接: 页面卡顿性能优化的两个解决方案.
链接: VUE（nuxt）项目性能监测统计.
链接: 使用translateZ(0)提升性能的原理是什么？.