事件委托
组件库按需导入
图片压缩,懒加载,预加载会加重服务器负担
路由懒加载,
v-active空间换时间
利用v-if和v-show减少初始化渲染和切换渲染的性能开销、
提前处理好数据解决v-if和v-for必须同级的问题
给v-for循环项加上key提高diff计算速度,
利用Object.freeze()冻结不需要响应式变化的数据
computed、watch、methods区分使用场景
- 一个数据受多个数据影响的。
- 该数据要经过性能开销比较大的计算,如它需要遍历一个巨大的数组并做大量的计算才能得到,这时就可以利用
computed
的缓存特性,只有它计算时依赖的数据发现变化时才会重新计算,否则直接返回缓存值。 - 一个数据影响多个数据的。
- 当数据变化时,需要执行异步或开销较大的操作时
- 希望数据是实时更新,不需要缓存。
节流和防抖:在用Vue Cli脚手架搭建的Vue项目中,可以通过引用Lodash工具库里面的debounce防抖函数和throttle节流函数。
路由懒加载,webpack一些插件实现打包的优化。开启optimization.minimize来压缩js代码,利用image-webpack-loader进行压缩图片,利用OptimizeCssnanoPlugin插件压缩和去重css样式文件
识别gzip压缩是否开启,响应头部(Response headers)中 有没有Content-Encoding: gzip
这个属性即可,有代表有开启gzip压缩。在Nginx,Webpack上开启gzip压缩