项目优化过程

DOM 结构

1.样式表放在头部，防止白屏和闪屏

2.JS 脚本放在底部或异步获取，防止阻塞资源加载

3.使用语义化标签，优化精简 DOM 结构

4.减少 DOM 操作频率

5.减少重绘与回流

JS 脚本

1.优化脚本结构，移除重复的脚本

2.模块就近加载（CMD）

3.按需加载加载组件和路由

4.图片懒加载，列表分页

5.使用节流与防抖减少事件触发频率

6.尽量使用 CSS 动画代替 js 动画，开启硬件加速

资源打包上线

1.使用打包构建工具（webpack）清除注释，压缩页面资源，js、css、html、图片、字体等等

2.混淆 js 代码

3.分离非业务逻辑相关 vendor 依赖，使用长缓存缓存和 CDN 分发网络

服务器优化

1.减少 Http 请求，合并页面资源，js，css 单一入口。js 特殊可以分为两个文件，一个业务逻辑，一个非业务逻辑

2.把小图标合成雪碧图，不太适用经常更新的移动端开发

3.把小的图片，字体等资源 base64 化

4.开启 GZip 压缩，减少资源传输大小

5.使用强缓存和协商缓存，减少资源重复请求

Vue 中可以优化的点

1.Vue 库 dist 里面的 Runtime-only 比 Runtime+Compiler 小 30%

2.Vue 的计算属性会根据依赖的 data 进行缓存

3.keep-alive 可以缓存常用组件

4.Vuex 中的 getter 也会根据依赖的 state 进行缓存

5.v-for 中唯一 key 的使用

6.Vue 全局错误处理 errorHandle

7.Vue 路由懒加载

8.Vue 组件动态加载

React 中可以优化的点

1.在 constructor 改变 this 指向代替箭头函数和 render 内绑定 this，避免函数作为 props 带来不必要的 rerender

2.shouldComponentUpdate，减少不不必要的 rerender

3.PureComponent 高性能组件只响应引用数据的深拷贝

4.使用唯一 key 优化 list diff

5.合并 setState 操作，减少虚拟 dom 对比频率

6.React 路由动态加载 react-loadable