程序员经验分享-hwhale

vue面试题：说说vue操作真实dom性能瓶颈

2023-11-05

vue面试题：说说vue操作真实dom性能瓶颈，下面一起来看看吧！

vue性能瓶颈的几种情况

  1. 一次渲染大量的数据的时候,存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间和渲染时间变长, js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一次交互反馈的时间过长。
    优化方案:可以使用
    requestAnimation这个方法,将数据进行分割,分批次渲染,减少了 js 的连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。
  2. 当页面中存在大量数据,只是修改了一小部分导致页面也会导致页面卡顿,因为vue的更新以组件为粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时间浪费
    优化方案:将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新,修改其它组件的情况下不会导致table的重新diff,提升页面响应速度高达几百倍
  3. 动态插槽作用域或者静态插槽的更新
    使用插槽作用域来替换这两种操作方式,一样能提升性能,因为使用
    插槽作用域之后,插槽内容会被封装到一个函数中,被子组件渲染,而不是在父组件
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

前端面试真题

vuejs

javascript

vue面试题：说说vue操作真实dom性能瓶颈 的相关文章

随机推荐

  • 【FreeRTOS】多任务创建

    作者主页 凉开水白菜 作者简介 共同学习 互相监督 热于分享 多加讨论 一起进步 专栏资料 https pan baidu com s 1nc1rfyLiMyw6ZhxiZ1Cumg pwd free 点赞 收藏 再看 养成习惯 订阅的粉丝

  • 蓝桥杯JAVA-28.前缀和与差分详解

    个人博客 www tothefor com 蓝桥杯复习知识点汇总 目录 开始之前 推荐先看一下总结 再看内容 也许会帮你更好的理解 前缀和是指某序列的前n项和 可以把它理解为数学上的数列的前n项和 而差分可以看成前缀和的逆运算 合理的使用前

  • Mybatis最全笔记--今日分享（参考狂神说）

    一 CRUD Mybatis 1 namespace namespace中的包名要和Dao Mapper接口的包名一致 2 select 选择 查询语句 id 就是对应的namespace中的方法名 resultType sql语句执行的返

  • Nginx基本配置（中级）

    文章目录 一 nginx反向代理 1 什么是反向代理 2 nginx代理配置 二 nginx负载均衡 三 nginx缓存 四 nginx优化 1 worker processes 2 worker connections 3 worker

  • 5 分钟让你明白 “软链接” 和“硬链接”的区别

    今天在知乎上看到一篇十分有趣的问题 如何评价微软高级工程师痴迷于soft link这一linux常见概念 虽然又是知名撕逼王曾某的撕逼帖 但是我还是想就题目中链接的问题简单地讲讲 什么是链接 链接简单说实际上是一种文件共享的方式 是 POS

  • 【numpy学习笔记】数组的存储和下载

    1 Saving array in binary format npy gt gt gt a np array 1 2 3 4 5 gt gt gt np save array a a gt gt gt np load array a np

  • 基于单片机的温室大棚环境监测系统设计

    温室大棚对北方反季节蔬菜的种植具有重要意义 据了解全国各地温室大棚使用集中 但是大棚环境调控方式落后 管理落后 生产效率比较低 针对此问题本文提出了一种基于STM32单片机智能温室大棚控制系统方案 实现环境参数的自动检测 以达到智能化 自动

  • EFilm 4.1

    EFilm 4 1 安装文件 Keygen 第一部分 http download csdn net detail crazpro 9696491 第二部分 http download csdn net detail crazpro 9696

  • HTML+CSS+JS制作一个简单的计算器

    用HTML CSS JS制作了一个简单的计算器 它的使用类似于生活中使用的计算器 暂时未发现有任何计算上的错误 有问题请联系我 谢谢 最终成果图 HTML代码块

  • Linux命令笔记

    文章目录 目录操作 1 只读文件改为可编辑 2 修改目录的所属 文件操作 1 查找文件关键字 2 撤销操作 3 解压和打包文件 4 修改文件名 5 复制文件 修改用户操作 1 添加一个用户 2 切换用户 网络命令 1 查看端口占用 2 通过

  • js中viod运算符总结

    目录 写在前面 常用语法 官方定义 常见用法 简单介绍 写在前面 简单来说 void运算符用于对给定的表达式进行求值 然后返回 undefined 该运算符通常用于避免输出不应该输出的值 常用语法 void expression 官方定义

  • vue不用iframe用什么代替_vue项目如何内嵌如iframe页面

    父页面 接收传来的页面即子页面 在vue页面中 created window addEventListener message this receiveMessageFromIframePage false receiveMessageFr

  • linux安装Mysql5.7

    在liunx安装mysql 在网上找教程 都是说的太笼统 比如我照着教程安装一半 出现了和教程上面不一致的问题 没有经验的同学就会不知道下面该怎么进行了 如果同学照着我的步骤来 一般是不会出现这种问题的 看完文章如有收获 还请给个赞 一 安

  • HTML,CSS,Javascript和DOM的关系

    HTML最先出现 一开始只是规定了版面的内容 如 div p p h1 等 有颜色 字体等方面的设置 后来才添加的这些标签 CSS 颜色 字体等html标签设置的样式很麻烦 难以修改 于是人们提出CSS来代替这些标签 DOM 一组API 用

  • VCSEL激光二极管驱动

    1 VCSEL的P I特性 激光二极管的出射光功率P与注入电流I的关系曲线称为P I曲线 注入电流小于阈值电流Ith时 激光器的输出功率P很小 为自发辐射的荧光 荧光的输出功率随注入电流的增加而缓慢增加 注入电流大于Ith时 输出功率P随注

  • 计算字符串长度函数大全

    字符串的长度通常是指字符串中包含字符的数目 但有的时候人们需要的是 字符串所占字节的数目 常见的获取字符串长度的方法包括如下几种 1 使用sizeof获取字符串长度 sizeof的含义很明确 它用以获取 字符数组的字节数 当然包括结束符 0

  • 攻防世界之disabled_button（web简单）

    老师今天上课讲了前端知识 然后给了大家一个不能按的按钮 小宁惊奇地发现这个按钮按不下去 到底怎么才能按下去呢 打开可以看到一个按钮 但是无法点击 按f12 打开代码 这里是可以互动的 找到按钮位置 删除属性 disabled 按下回车 确认

  • SQL Server附加数据库错误5123,另一个进程正在调用

    情况一 在使用sql server附加数据库时 出现了 首先 我想讲一个故事 我想拿自己的银行卡 取出父亲银埋在家中30米地下的钱 这两个对象的位置是同一个吗 显然不是 出现此报错的原因是 我在自己的机器上登录远程服务器数据库 然后检索远程

  • redis 三. hash应用场景及底层分析

    Hash 类型 一 简单命令示例 二 java 操作示例 三 使用场景 四 底层分析 ziplist 压缩列表 ziplist内部entry详解 ziplist内存分配与连锁更新 ziplist 小总结 hashtable 字典 一 简单命

  • vue面试题：说说vue操作真实dom性能瓶颈

    vue面试题 说说vue操作真实dom性能瓶颈 下面一起来看看吧 vue性能瓶颈的几种情况 一次渲染大量的数据的时候 存在大量数据并且都是复杂类型的时候 会导致vue对数据的劫持时间和渲染时间变长 js 连续执行时间过长 会导致页面长时间无

热门标签