如何优化前端
一、页面级优化
-
利用v-if和v-show减少初始化渲染和切换渲染的性能开销：
在页面加载时，利用v-if来控制组件仅在首次使用时渲染减少初始化渲染，随后用v-show来控制组件显示隐藏减少切换渲染的性能开销。
-
computed、watch、methods区分使用场景：
computed： 一个数据受多个数据影响的。 该数据要经过性能开销比较大的计算，如它需要遍历一个巨大的数组并做大量的计算才能得到，这时就可以利用computed的缓存特性，只有它计算时依赖的数据发现变化时才会重新计算，否则直接返回缓存值。 ///////////////////////// watch： 一个数据影响多个数据的。 当数据变化时，需要执行异步或开销较大的操作时。如果数据变化时请求一个接口。 ///////////////////////// methods： 希望数据是实时更新，不需要缓存。 -
给v-for循环项加上key提高diff计算速度：
-
减少 HTTP请求数：
请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象。
防抖：触发事件后规定时间内事件只会执行一次。简单来说就是防止手抖，短时间操作了好多次。比如搜索输入
节流：事件在规定时间内只执行一次。比如表单提交
代码级优化
-
字符串拼接：
在 Javascript 中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join 方法。