优化 - 前端篇

一、优化之函数节流

函数节流：原理很简单，利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。

 

二、优化之前端控制

1. 按钮防重复
2. 代码压缩，提高加载速度
3. 待更新...

 

三、优化之动静态数据分离

1. CDN => 优化 - CDN
2. 待更新...

 

四、JS文件加载性能优化

项目打包后，会生成三个JS文件：manifest.js（配置代码）、vendor.js（公用代码）、app.js（业务逻辑）。一般情况，manifest.js 和 vendor.js 无需优化，只针对 app.js 优化。

优化规则：当整个 app.js 超过 1MB 才需要优化，采用异步组件按需加载方法。如果不用这个方法的话，会一开始就把整个项目全部的 js 都会加载进去，很耗时。

但如果没有超过 1MB，推荐不需要优化，因为按需加载的话，有一个代价是HTTP请求，如果 app.js 比较小的话，按需加载时的HTTP请求的代价会超过默认的一次性加载，所以这时不推荐异步组件按需加载。