前端性能优化感想

1、利用v-if和v-show减少初始化渲染和切换渲染的性能开销

2、computed、watch、methods区分使用场景

3、提前处理好数据解决v-if和v-for必须同级的问题

4、给v-for循环项加上key提高diff计算速度

5、利用v-once处理只会渲染一次的元素或组件

6、利用Object.freeze()冻结不需要响应式变化的数据

7、提前过滤掉非必须数据，优化data选项中的数据结构

8、避免在v-for循环中读取data中数组类型的数据

9、防抖和节流

防抖和节流是针对用户操作的优化。首先来了解一下防抖和节流的概念。

防抖：触发事件后规定时间内事件只会执行一次。简单来说就是防止手抖，短时间操作了好多次。

节流：事件在规定时间内只执行一次。

应用场景： 节流不管事件有没有触发还是频繁触发，在规定时间内一定会只执行一次事件，而防抖是在规定时间内事件被触发，且是最后一次被触发才执行一次事件。假如事件需要定时执行，但是其他操作也会让事件执行，这种场景可以用节流。假如事件不需要定时执行，需被触发才执行，且短时间内不能执行多次，这种场景可以用防抖。

在用Vue Cli脚手架搭建的Vue项目中，可以通过引用Lodash工具库里面的debounce防抖函数和throttle节流函数。

import debounce from 'lodash/debounce';

import throttle from 'lodash/throttle';

export default{

methods:{

    a: debounce(function (){

        //...

        },200,{

            'leading': false,

            'trailing': true

        }),

        b: throttle(function (){

        //...

        },200,{

            'leading': false,

            'trailing': true

        })

    }

}

。debounce(func, [wait=0], [options={}])创建一个防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func     方法。返回一个防抖函数debounceFn，debounce.cancel取消防抖，debounce.flush立即调用该func。

        options.leading为true时，func在延迟开始前调用。

        options.trailing为true时，func在延迟开始结束后调用。

        options.maxWait设置func 允许被延迟的最大值。

。throttle(func, [wait=0], [options={}])创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 返回一个节流函      数throttleFn，throttleFn.cancel取消节流，throttleFn.flush立即调用该func。

        options.leading为true时，func在节流开始前调用。

        options.trailing为true时，func在节流结束后调用。

        leading和trailing都为true，func在wait期间多次调用。

10、图片大小优化和懒加载

关于图片大小的优化，可以用image-webpack-loader进行压缩图片，在webpack插件中配置，具体可以看本文中这点。

关于图片懒加载，可以用vue-lazyload插件实现。

执行命令npm install vue-lazyload --save安装vue-lazyload插件。在main.js中引入配置

import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {

  preLoad: 1.3,//预载高度比例

  error: 'dist/error.png',//加载失败显示图片

  loading: 'dist/loading.gif',//加载过程中显示图片

  attempt: 1,//尝试次数

})

在项目中使用

11、利用挂载节点会被替换的特性优化白屏问题

import Vue from 'vue'

import App from './App.vue'

new Vue({

    render: h => h(App)

}).$mount('#app')

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

也就是说渲染时，会直接用render渲染出来的内容替换

。

Vue项目有个缺点，首次渲染会有一段时间的白屏原因是首次渲染时需要加载一堆资源，如js、css、图片。很多优化策略，最终目的是提高这些资源的加载速度。但是如果遇上网络慢的情况，无论优化到极致还是需要一定加载时间，这时就会出现白屏现象。

首先加载是index.html页面，其是没有内容，就会出现白屏。如果

里面有内容，就不会出现白屏。所以我们可以在

里添加首屏的静态页面。等真正的首屏加载出来后就会把

这块结构都替换掉，给人一种视觉上的误差，就不会产生白屏。

11、组件库的按需引入

---

作者：红尘炼心

链接：https://juejin.cn/post/6857856269488193549

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。