【Vue】性能优化

news2025/1/16 6:04:20

使用 key

对于通过循环生成的列表,应给每个列表项一个稳定且唯一的 key,这有利于在列表变动时,尽量少的删除和新增元素。

使用冻结的对象

冻结的对象(Object.freeze(obj))不会被响应化,不可变。

使用函数式组件

参见函数式组件 | Vue.js (vueframework.com)。

使用计算属性

如果模板中某个数据会使用多次,并且该数据是通过计算得到的,使用计算属性以缓存它们。

非实时绑定的表单项

当使用v-mode1绑定一个表单项时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重渲染(rerender),这会带来一些性能的开销。

特别是当用户改变表单项时,页面有一些动画正在进行中,由于JS执行线程和浏览器渲染线程是互斥的,最终会导致动画出现卡顿。

我们可以通过使用lazy或不使用v-model的方式解决该问题,但要注意,这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

但是不使用 v-model 不符合 Vue 的设计理念,只能通过 e.target.value 去进行数据的修改。

保持对象引用稳定

在绝大部分情况下,vue 触发 rerender 的时机是其依赖的数据发生变化。

若数据没有发生变化,哪怕给数据重新赋值了,vue 也是不会做出任何处理的。
下面是vue判断数据没有变化的源码:

//value为l旧值,newValue为新值
if (newVal == value || (newVal != newVal && value != value)) {
    return 
}

因此,如果需要,只要能保证组件的依赖数据不发生变化,组件就不会重新渲染。

对于原始数据类型,保持其值不变即可。

对于对象类型,保持其引用不变即可。

从另一方面来说,由于可以通过保持属性引用稳定来避免子组件的重渲染,那么我们应该细分组件来尽量避免多余的渲染(只要组件对应的对象 地址不发生改变,则不会重新渲染)。

image.png

但是这种也会存在问题,就是数据不是实时的。数据库那边有其他更新操作,而这里页面并没有相应的请求。

那么如何解决这个问题呢?可以使用 websockect,也可以使用发送请求的方式(但是要利用一些对比数据差异的算法)。

使用 v-show 替代 v-if

对于频繁切换显示状态的元素,使用v-show可以保证虚拟dom树的稳定,避免频繁的新增和删除元素,特别是对于那些内部包含大量dom元素的节点。

使用延迟装载 (defer)

首页白屏时间主要受到两个因素的影响:

  • 打包体积过大

    巨型包需要消耗大量的传输时间,导致JS传输完成前页面只有一个 <div id="app"></ div>
    有可显示的内容。

  • 需要立即渲染的内容太多

    JS传输完成后,浏览器开始执行JS构造页面。

    但可能一开始要渲染的组件太多,不仅JS执行的时间很长,而且执行完后浏览器要渲染的元素过多,从而导致页面白屏。

打包体积过大需要自行优化打包体积。

这里着重说一下渲染内容太多问题:

一个可行的办法就是延迟装载组件,让组件按照先后顺序依次一个一个渲染。

本质上使用 requestAnimationFrame 事件分批渲染内容

keep-alive

长列表渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1682964.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【贪心算法题目】

1. 柠檬水找零 这一个题目是一个比较简单的模拟算法&#xff0c;只需要根据手里的钱进行找零即可&#xff0c;对于贪心的这一点&#xff0c;主要是在20元钱找零的情况下&#xff0c;此时会出现两种情况&#xff1a;10 5 的组合 和 5 5 5 的组合&#xff0c;根据找零的特点&a…

通过管理系统完成商品属性维护

文章目录 1.数据库表设计1.商品属性表 2.renren-generator生成CRUD1.基本配置检查1.generator.properties2.application.yml 2.启动RenrenGeneratorApplication.java生成CRUD1.启动后访问localhost:812.生成商品属性表的crud 3.将crud代码集成到项目中1.解压&#xff0c;找到ma…

Gittee

前言&#xff1a; 海鸥禁止 git简述 分布式版本控制系统 版本管理 集中式只有一个档案馆 分布式可以每人有一个档案馆&#xff0c;版本合并 协同工作 github&#xff0c;gitlab&#xff0c;gitee是git的托管平台 安装git 略 添加&#xff0c;提交文件 推到远程仓库 常…

vscode安装多版本esp-idf

安装 离线安装 vscode设置 建立一个新的配置文件, 这里面的插件是全新的 安装esp-idf 官网下载espidf 安装这一个 选项默认即可 记住各一个路径, 之后要用到 vscode安装插件 安装以后会进入这一个界面, 也可以CtrlShiftP输入ESP-IDFextension进入 使用espressif 问题 这一个…

微信小程序---小程序文档配置(2)

一、小程序文档配置 1、小程序的目录结构 1.1、目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page 一个小程序主体部分由三个文件组成&#xff0c;必须放在项目的根目录 比如当前我们的《第一个小程序》项目根目录下就存在这三个文件&#xff1a; 1…

【论文速读】|探索ChatGPT在软件安全应用中的局限性

本次分享论文&#xff1a;Exploring the Limits of ChatGPT in Software Security Applications 基本信息 原文作者&#xff1a;Fangzhou Wu, Qingzhao Zhang, Ati Priya Bajaj, Tiffany Bao, Ning Zhang, Ruoyu "Fish" Wang, Chaowei Xiao 作者单位&#xff1a;威…

day08-Java常用API

day08——Java常用API 一、今日内容介绍、API概述 各位同学&#xff0c;我们前面已经学习了面向对象编程&#xff0c;使用面向编程这个套路&#xff0c;我们需要自己写类&#xff0c;然后创建对象来解决问题。但是在以后的实际开发中&#xff0c;更多的时候&#xff0c;我们是…

Linux软硬链接及动静态库

软硬链接与动静态库 软连接 创建链接的方法&#xff1a; ln -s test1.txt test2.txt 其中ln 是link(链接)&#xff0c;-s 是soft(软)&#xff0c;后者链接前者。 此时打开test2.txt&#xff0c;发现其中内容与test.txt一致。那么软连接到底建立了什么联系&#xff1f;…

Python函数进阶:四大高阶函数、匿名函数、枚举、拉链与递归详解

系列文章目录 Python数据类型&#xff1a;编程新手的必修课深入探索Python字符串&#xff1a;技巧、方法与实战Python 函数基础详解Python正则表达式详解&#xff1a;掌握文本匹配的魔法Python文件操作宝典&#xff1a;一步步教你玩转文件读写Python面向对象基础与魔法方法详解…

添加webpack.config.js配置

webpack 命令默认会去根目录查找webpack.config.js配置文件&#xff0c;如果没有&#xff0c;则会使用webpack默认的零配置打包规则进行打包&#xff0c;默认的零配置打包规则主要包括下面这几点&#xff1a; 1. 默认入口文件&#xff1a;Webpack 默认会将 ./src/index.js 作为…

“壕无人性”的沙特也要买量子计算机!巨头沙特阿美的合作方竟是它?

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1200字丨5分钟阅读 摘要&#xff1a;石油巨头沙特阿美与 Pasqal 开启合作&#xff0c;计划于 2025 年部署一台 200 量子比特的量子计算机&#xff…

开源大模型与闭源大模型:技术哲学的较量

目录 前言一、 开源大模型的优势1. 社区支持与合作1.1 全球协作网络1.2 快速迭代与创新1.3 共享最佳实践 2. 透明性与可信赖性2.1 审计与验证2.2 减少偏见与错误2.3 安全性提升 3. 低成本与易访问性3.1 降低研发成本3.2 易于定制化3.3 教育资源丰富 4. 促进标准化5. 推动技术进…

【qt】QDockWidget 浮动窗口

QDockWidget 浮动窗口 一.QDockWidget 的用法 前言&#xff1a;很简单&#xff0c;放心食用 一.QDockWidget 的用法 太简单了&#xff0c;直接来吧&#xff01; 直接做个小项目来了解QDockWidget 的用法 目标效果图&#xff1a; 开始拖放&#xff1a; 开始布局&#xff1a; …

Jenkins pipeline发布前端项目

说明&#xff1a;第一次使用jenkins生成pipeline片段&#xff0c;做个记录... 1.全局工具配置添加自定义node版本 2.系统管理添加前端应用部署服务器 2.1 点击高级选择账号密码验证方式&#xff0c;添加服务器的用户和密码 3.系统管理--凭据--系统--全局凭据--添加自己的git凭据…

R语言数据分析案例-巴西固体燃料排放量预测与分析

1 背景 自18世纪中叶以来&#xff0c;由于快速城市化、人口增长和技术发展&#xff0c;导致一氧化二氮&#xff08;N2O&#xff09;、 甲烷&#xff08;CH4&#xff09;和二氧化碳&#xff08;CO 2&#xff09;等温室气体浓度急剧上升&#xff0c;引发了全球变暖、海平面上 升…

[Cocos Creator 3.5赛车游戏]第5节 为汽车节点挂载自定义脚本

在前面的章节中您已经学会了如何创建一个汽车节点&#xff0c;这一章我们将会学习如何通过挂载自定义节点的方式让小车变得可控制&#xff0c;所以通过这一章的学习后&#xff0c;您将实现一个效果&#xff1a;开始运行后&#xff0c;小车每隔一帧就延y轴向上移动一段距离。在这…

vs无法打开或包括文件”QTxxx“

vs创建项目时默认引入core、gui、和widgets等模块&#xff0c;在需要网络通讯或者图表等开发时需要添加相应模块。 点击扩展 -> QT VS Tools -> QT Project Setting->Qt Modules&#xff0c;添加相应模块即可

OpenAI、微软、智谱AI 等全球 16 家公司共同签署前沿人工智能安全承诺

人工智能&#xff08;AI&#xff09;的安全问题&#xff0c;正以前所未有的关注度在全球范围内被讨论。 日前&#xff0c;OpenAI 联合创始人、首席科学家 Ilya Sutskever 与 OpenAI 超级对齐团队共同领导人 Jan Leike 相继离开 OpenAI&#xff0c;Leike 甚至在 X 发布了一系列…

Java中Spring MVC 来如何接收表单数据

目录 一、Java语言介绍 二、Spring MVC 框架介绍 三、什么是表单 四、Spring MVC 来如何接收表单数据 一、Java语言介绍 Java是一种广泛使用的面向对象的编程语言&#xff0c;由Sun Microsystems公司的James Gosling等人开发。它最初于1995年发布&#xff0c;被设计为具有…

以人为本的人工智能:李飞飞谈AI

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;关于AI的讨论越来越多&#xff0c;特别是围绕其可能带来的威胁。有人担心高效的AI会夺走我们的工作&#xff0c;甚至不可控的AI最终会统治人类。对此&#xff0c;斯坦福大学计算机科学系教授李飞飞提出了不同…