当前位置: 首页 > news >正文

vue 前端优化性能优化方法

1.列表使用唯一 key

  v-for="item in activeList" :key="item.id"

      原因是不使用 key 或者列表的 index 作为 key 的时候,每个元素对应的位置关系都是 index,直接导致我们插入的元素到后面的全部元素,对应的位置关系都发生了变更,所以在 patch 过程中会将它们全都执行更新操作,再重新渲染。这可不是我们想要的,我们希望的是渲染添加的那一个元素,其他四个元素不做任何变更,也就不要重新渲染。

2.使用 v-show 复用 DOM

<template><div><div v-show="status" class="on"><my-components /></div><section v-show="!status" class="off"><my-components ></section></div>
</template>

v-show:是渲染组件,然后改变组件的 display 为 block 或 none
v-if:是渲染或不渲染组件

原理就是使用 v-if 当条件变化的时候,触发 diff 更新,发现新旧 vnode 不一致,就会移除整个旧的 vnode,再重新创建新的 vnode,然后创建新的 my-components 组件,又会经历组件自身初始化,renderpatch 等过程,而 v-show 在条件变化的时候,新旧 vnode 是一致的,就不会执行移除创建等一系列流程

所以对于可以频繁改变条件的场景,就使用 v-show 节省性能,特别是 DOM 结构越复杂收益越大

不过它也有劣势,就是 v-show 在一开始的时候,所有分支内部的组件都会渲染,对应的生命周期钩子函数都会执行,而 v-if 只会加载判断条件命中的组件,所以需要根据不同场景使用合适的指令

 3. 变量本地化

原理:多次引用的变量保存起来,因为每次访问 this.xx 的时候,由于是响应式对象,所以每次都会触发 getter,然后执行依赖收集的相关代码,如果使用变量次数越多,性能自然就越差

从需求上说在一个函数里一个变量执行一次依赖收集就够了,可是很多人习惯性的在项目中大量写 this.xx,而忽略了 this.xx 背后做的事,就会导致性能问题了

var num = this.first;
var sum = this.sumNum;
for (let i = 0; i < 200; i++) {sum+= sum + num + i// 避免频繁引用 this.xx}

4. 第三方插件按需导入 

import Vue from 'vue';

import { Button, Select } from 'element-ui';

import App from './App.vue';

Vue.component(Button.name, Button);

Vue.component(Select.name, Select); /* 或写为 *

Vue.use(Button) *

Vue.use(Select) */

new Vue({ el: '#app', render: h => h(App) });

5.路由懒加载

没有用路由懒加载

import Vue from 'vue'

import Router from 'vue-router'

const CPKB1 = () => import('@/views/centit/CPKB1') 

const CK = () => import('@/views/centit/CK')  //首页

export default new Router({

  // mode: 'history', //打包的时候关闭

  //saveScrollPostioin: true,

  scrollBehavior(to, from, savedPosition) {

    if (savedPosition) {

      return savedPosition

    } else {

      return {

        x: 0,

        y: 0

      }

    }

  },

  base:'/RAW/dist',  //包名 一级目录和文件名一致 打包的时候打开

  linkActiveClass: 'active',

  routes: [

    {

      path:'/',

      name:'CK',

      component:CK,

      mete:{title:'出库看板'},

      children: [

        {

          path:'/CPKB1',

          name:'CPKB1',

          component:CPKB1,

          mete:{title:'CPKB1'}

        }

      ]

    },

  ]

})

用了路由懒加载:

const router = new Router({routes: [{ path: '/CPKB', component: () => import('@/views/centit/CPKB1') },{ path: '/CK', component: require('@/views/centit/CK').default }]
})

在进入这个路由的时候才会走对应的 component,然后运行 import 编译加载组件,可以理解为 Promise 的 resolve 机制

  • import:Es6语法规范、编译时调用、是解构过程、不支持变量函数等
  • require:AMD规范、运行时调用、是赋值过程,支持变量计算函数等

6. keep-alive缓存页面

<template><div id="app"><keep-alive include="['CPKB1','CPKB2']"><router-view></router-view></keep-alive></div>
</template>

我们都可以通过内置组件 <keep-alive></keep-alive> 来把组件缓存起来,在组件切换的时候不进行卸载,这样当再次返回的时候,就能从缓存中快速渲染,而不是重新渲染,以节省性能

7. 事件的销毁 

<script>
export default {created() {this.timer = setInterval(this.load, 1000)addEventListener('touch', this.touch, false)},beforeDestroy() {clearInterval(this.timer)this.timer = nullremoveEventListener('touch', this.touch, false)}
}
</script>

  Vue 组件销毁时,会自动解绑它的全部指令及事件监听器,但是仅限于组件本身的事件而对于定时器,addEventListener 注册的监听器等,就需要在组件销毁的生命周期钩子中手动销毁或解绑,以避免内存泄露.

8.项目图片懒加载

  使用第三方图片懒加载库

9.长列表性能优化

针对只用于展示的数据,可以使用Object.freeze来处理。

原因如下:Vue 会通过 Object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 Vue 来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 Vue 劫持我们的数据呢?可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。

export default {  

   data: () => ({   

       users: {}  

}),  

async created() {    

    const users = await axios.get("/api/users");    

    this.users = Object.freeze(users);  

} };

 10.vue 组件中的 data 是函数而不是对象

使用这种函数方式

export default {

    name: 'app',

    data() {

        return {

            level:''1"

        };

    },

}

不使用这种对象方式

export default {

    name: 'app',

    data: {

          level:''1"

    },

}

    如果data 是一个纯碎的对象,则所有的实例将共享引用同一份 data 数据对象,无论在哪个组件实例中修改 data,都会影响到所有的组件实例。如果 data 是函数,每次创建一个新实例后,调用 data 函数,从而返回初始数据的一个全新副本数据对象。这样每复用一次组件,会返回一份新的 data 数据,类似于给每个组件实例创建一个私有的空间,让各个组件的实例各自独立,互不影响保持低耦合 

11.不需要响应变化的数据可以放在实例里面,不要将所有的数据都放到 data 中

对应的lfl可以正常使用

created() {  

       this.lfl = '123'

  },

data 中的数据都会增加 getter 和 setter,又会收集 watcher,这样还占内存。不需要响应式的数据我们可以定义在实例上。

相关文章:

vue 前端优化性能优化方法

1.列表使用唯一 key v-for"item in activeList" :key"item.id"原因是不使用 key 或者列表的 index 作为 key 的时候&#xff0c;每个元素对应的位置关系都是 index&#xff0c;直接导致我们插入的元素到后面的全部元素&#xff0c;对应的位置关系都发生了变…...

docker-compose部署kafka 3.3.1 kraft

一、服务器&#xff1a; 节点1:10.1.1.165 节点2:10.1.1.164 节点3:10.1.1.169二、添加环境地址解析 vim /etc/hosts kafka1 10.1.1.165 kafka2 10.1.1.164 kafka3 10.1.1.169三、节点配置 节点1 version: "3" services:kafka1:image: bitnami/kafka:3.3.1contain…...

【Python】第二弹---深入理解编程基础:从常量、变量到注释的全面解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、常量和表达式 2、变量和类型 2.1、变量是什么 2.2、变量的语法 2.3、变量的类型 2.4、动态类型特…...

[BrainShadow-V1] VR头戴设备统计报告

Brain-Shadow-V1 EventVR headsetsReported byXiao enDate2025/01/15Version1.0 HTC Vive Pro 2 Pro HTC Vive Pro 2 是一款高端虚拟现实头显&#xff0c;配备双 2.5K 显示屏&#xff0c;组合分辨率达到 48962448&#xff0c;提供 120 的视场角和 120Hz 的刷新率。该设备支持…...

跨境电商使用云手机用来做什么呢?

随着跨境电商的发展&#xff0c;越来越多的卖家开始尝试使用云手机来协助他们的业务&#xff0c;这是因为云手机具有许多优势。那么&#xff0c;具体来说&#xff0c;跨境电商使用云手机可以做哪些事情呢&#xff1f; &#xff08;一&#xff09;实现多账号登录和管理 跨境电商…...

DAY23 使用具有通用性的队列

1.初始化数组 //Initialize arrays.int tempLength getNumNodes();valuesArray new char[tempLength];indicesArray new int[tempLength];int i 0;2.初始化队列 创建了一个名为tempQueue的CircleObjectQueue对象&#xff0c;即一个循环对象队列。 将当前对象&#xff08;即…...

汽车网络信息安全-ISO/SAE 21434解析(上)

目录 概述 第四章-概述 1. 研究对象和范围 2. 风险管理 第五章-组织级网络安全管理 1. 网络安全治理&#xff08;cybersecurity governance&#xff09; 2. 网络安全文化&#xff08;cybersecurity culture) 3. 信息共享&#xff08;Information Sharing) 4. 管理体系…...

通用查询类接口开发的另类思路

文章目录 一、需求概述二、开发方式1、传统开发方式2、将接口视为资源文件1.&#xff09;springmvc工程2.&#xff09;springboot工程3.&#xff09;nginx代理 三、接口数据如何更新1、原始数据文件生成接口数据1.&#xff09;定义启动类2.&#xff09;启动监听3.&#xff09;文…...

uc/os-II 原理及应用(八) 系统裁减以及移植到51单片机-下

现在说明几个重要的点&#xff0c; OSStartHighRdy 的作用就是把任务栈复制到系统栈上面&#xff0c;再利用RET的时候会从系统栈上到一个地址放到PC寄存器上来实现任务运行。OSCtxSw是任务切换&#xff0c;把系统栈全部备份到当前任务栈映射上&#xff0c;然后改OSTCBCur,调用…...

职场沟通与行为

职场沟通与行为 引言 在职场上&#xff0c;你是否曾遇到过困惑的沟通&#xff1f;是否对同事的行为有过疑虑&#xff1f;这不仅是个别现象&#xff0c;而是我们这个时代工作文化中的普遍问题。许多职场的摩擦&#xff0c;来自沟通不畅或是行为不当。那么&#xff0c;如何才能…...

【tailscale 和 ssh】当服务器建立好节点,但通过客户端无法通过 ssh 连接

背景 当服务器建立好节点&#xff0c;一切显示正常但通过客户端无法通过 vs code 中的 ssh 连接到服务器 问题解决 因为服务器是重装过的&#xff0c;所以忘记在服务器上下载 ssh 了。。。安装完成并启动 SSH 服务后便可正常连接&#xff01; sudo apt update sudo apt in…...

Spark 之 Aggregate

Aggregate 参考链接: https://github.com/PZXWHU/SparkSQL-Kernel-Profiling完整的聚合查询的关键字包括 group by、 cube、 grouping sets 和 rollup 4 种 。 分组语句 group by 后面可以是一个或多个分组表达式( groupingExpressions )。 聚合查询还支持 OLAP 场景下的多…...

【JSqlParser】Java使用JSqlParser解析SQL语句总结

简述 Java解析SQL语句有很多工具都可以做到&#xff0c;比如Mybatis、Druid、目前用来用去最全面的仍然是Jsqlparser&#xff0c;它是一个Github上的开源项目&#xff0c;JSqlParser是一个用于解析SQL语句的Java库&#xff0c;它可以帮助开发者分析和操作SQL语句的结构。无论是…...

Linux下的dev,sys和proc(TODO)

&#xff08;TODO&#xff09; 还有一个sysfs 在 Linux 系统中&#xff0c;/dev、/sys 和 /proc 是三个特殊的虚拟文件系统目录&#xff0c;它们各自有特定的用途&#xff0c;主要用于与设备和内核交互。以下是它们的详细区别和功能说明&#xff1a; 1. /dev&#xff08;Devi…...

【Unity3D】利用Hinge Joint 2D组件制作绳索效果

目录 一、动态绳索 &#xff08;可移动根节点&#xff09; 二、静态绳索 三、利用Skinning Editor(Unity2022.3.15f1正常使用) 四、注意事项 一、动态绳索 &#xff08;可移动根节点&#xff09; 动态绳索 DynamicRope空物体 Anchor和whitecircle是相同位置的物体&#xff…...

Springer Nature——Applied Intelligence 投稿指南

投稿系统&#xff1a;Editorial Manager (Manuscript and Peer Review) : 使用Editorial Manager 投稿系统的期刊列表&#xff1a;期刊列表 期刊主页&#xff1a;Spring Nature 主页 投稿主页&#xff1a;Spring Nature Submit SystemSubmission Guidelines: Official Submissi…...

数据结构、数据类型、数字编码、字符编码:保姆级图文详解

文章目录 前言1、数据结构分类1.1、逻辑结构&#xff1a;线性与非线性1.2、物理结构&#xff1a;连续与分散1.3、数据结构的实现方式1.4、数据结构的选择依据 2、基本数据类型2.1、定义与分类2.2、存储形式 3、数字编码3.1、原码、反码与补码3.2、浮点数编码3.3、整数与浮点数区…...

DM适配连接kettle迁移工具(资源库+数据源配置)

适配改造介绍及说明 本次修改基于8.2.0.0版本调整&#xff0c;在该源码基础上进行DM的适配&#xff0c;已支持DM为资源库的配置以及相关数据迁移。kettle资源库是Kettle ETL工具内置的一个资源库。配置好的数据库可以直接缓存到资源库当中&#xff1b;创建、编辑好的转换/作业…...

WINFORM - DevExpress -> alertControl1提示信息框

第一个按钮为常规按钮, 单击触发 ButtonClick 事件. 第二个按钮有选中和未选中状态. 单击触发 ButtonDownChanged 事件。 if (e.ButtonName "alertButton2") { } 在dev用户界面中进行提示(usecontrolwinform) AlertInfo info new AlertInfo("提示",…...

STM32-串口-UART-Asynchronous

一&#xff0c;发送数据 #include "stdio.h" uint8_t hello[]"Hello,blocking\r\n"; HAL_UART_Transmit(&huart1,hello,sizeof(hello),500); 二&#xff0c;MicroLIB-printf(" hello\r\n") #include "stdio.h" #ifdef __GNUC…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...