项目优化

为什么需要项目优化

在互联网快速发展的今天，在实现完功能之后，项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化，就是为了让页面尽可能早的到达用户，提高交互的流畅程度。

在系统可利用系统资源有限的大背景下，3秒呈现内容的原则下，项目优化显得格外重要。

每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃；每减少100K的内容请求可能会给你带来几千甚至几万的的服务端费用；每提高10%的交互流畅度可能给你带来几万甚至几十万的销售额。

于情于理，我们都需要去了解，掌握和使用网站优化这项必备技能。

常见优化方法

从资源请求数量+代码执行效率两个角度来考虑

• 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单一入口.。s特殊可以分为两个文件，一个业务逻辑，一个非业务逻辑
2.把小图标合成雪碧图，不太适用经常更新的移动端开发
3.把小的图片，字体等资源base64化
4.开启GZip压缩，减少资源传输大小

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