Vue优化
1.使用v-show复用组件
2.避免v-if和v-for一起使用
如果这两个混合使用就会造成性能上的浪费
3.keep-alive缓存组件
状态不需要更新的组件可以使用keep-alive缓存起来
4.长列表优化
在Vue中如果我们的数据只是为了展示,我们可以使用Object.freeze将数据冻结,这样Vue就不会对数据进行劫持,加载速度会更快。
5.路由懒加载
在路由表中进行路由懒加载的配置
6.图片懒加载
7.第三方插件按需导入
像element-ui、Vant、ant-design这些组件库,如果不需要用到很多组件可以进行按需导入,没必要全量导入组件
8.事件销毁
在页面销毁的时候在destroyed或者beforeDestroy中,对事件或者定时器进行销毁
9.SSR服务端渲染
ssr服务器渲染(server side render)
客户端渲染
- Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中
- 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户
服务端渲染
- 用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户
可以看到服务端渲染比客户端渲染更加节省时间,能够节省白屏时间
10.标记无状态的组件
如果只是展示性的组件,可以使用functional标记为无状态组件
11.子组件分割,比较耗时的组件单独分割出一个新的组件,自己渲染自己的,互不影响
12.需要循环事件绑定的时候,尽可能手动进行事件委托进行处理
根据事件冒泡的原理,可以在其父元素上绑定事件。对事件进行捕捉, 判断target属于那个子元素,然后进行相关操作