专栏首页木子墨的前端日常前端项目性能优化笔记

前端项目性能优化笔记

饱暖思淫欲,当我们完成基本的业务需求之后,我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等,以下是我在项目中做的一些基本的项目优化工作,小小记录一下

一、高频操作的防抖和截流

日常页面开发中经常会有一些操作频率较高的js操作,比如touchmove、scroll中的事件处理、click事件的频繁发生等等。这个时候如果每次操作都去处理的话,性能上的开销就会比较大。此时就需要对事件的处理频率做个限制,也就是防抖和截流。比如,

watch: {
    barNum(to, from) {
        // 一个变动很频繁的变量
        this.setDebounce()
        this.back(this.barNum)
    }
},
methods: {
    setDebounce: debounce(
        function() {
            // 一个更新视图的操作
            this.setDistance()
        },
        400
    )
}

大家对这两个应该也都比较熟,不了解的同学可以看下《性能提速:debounce(防抖)、throttle(节流/限频)》这个。 具体的实现推荐使用lodash组件库,其中有封装好的Debounce和Throttle组件可以调用,上面就是直接使用lodash库里面的debounce处理的。有兴趣的同学也可以自己写一下,以便增进理解~

二、定时器的使用

1、合理的使用生命周期,比如在组件没用的时候,销毁掉无效的定时器

beforeDestroy() {
    console.log('beforeDestroy destroy the timer')
    this._destroy()
},
methods: {
    _destroy() {
        clearTimeout(this.timer)
    }
}

2、使用watch代替一直轮询的setInterval定时器

三、图片内容的懒加载

图片这个东西加载起来很占用时间,同时并不是所有的图片都需要初始化的时候就加载进来,这个时候试试懒加载,没毛病。

四、模块的组件化

开发中经常会写很多组件,最好做到独立组件与业务组件的分离,或者业务组件在抽离的独立组件之上再做封装。

五、用animation动画代替v-show

v-show本身控制的就是display属性,但是这种控制有的时候显得过去生硬。建议使用css3的animation动画代替displa:none的操作,如

.animation_show {
    animation: animate_showup 0.5s;
    animation-timing-function: linear;
    opacity: 1;
}
.animation_hide {
    animation: animation_hidedown 0.5s;
    animation-timing-function: linear;
    opacity: 0;
}
@keyframes animate_showup {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes animation_hidedown {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

等等。

~好好学习,天天向上~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue中mixin的一点理解

      vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixin...

    木子墨
  • Vue-Router模式、钩子

    上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧

    木子墨
  • initialProps被React-Navigation的navigation属性覆盖解决方案

    怎么开场对我来说一个是个很纠结的问题,Emmm这应该算个好开场。 最近在做一个RN的app端调试工具,在把它嵌入原生app中的时候遇到了一个问题,RN组件里面...

    木子墨
  • 快速学习-React 生命周期简介

    cwl_java
  • 前端知识点总结——Vue

    作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

    CSDN技术头条
  • [译] Vue.js 内部原理浅析

    原文:https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3

    江米小枣
  • vue 父子组件通信

    [removed] export default { props:["msg"] } [removed]

    IMWeb前端团队
  • vue 父子组件通信

    本文作者:IMWeb jacksun 原文出处:IMWeb社区 未经同意,禁止转载 一.父组件向子组件发送数据 APP.vue(父组件) ? Hell...

    IMWeb前端团队
  • 基于组件的.NET技术(5)

    实战: 创建一个VB.NET Windows应用程序:VBTestDynamicComponent。将前面介绍的两个类ComponentList和LoadCo...

    脑洞的蜂蜜
  • 使用React Hooks进行状态管理 - 无Redux和Context API

    现在,我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法,并且比Context API更高效。

    前端知否

扫码关注云+社区

领取腾讯云代金券