Vue性能优化总结

最新推荐文章于 2023-08-30 14:06:31 发布
最新推荐文章于 2023-08-30 14:06:31 发布
阅读量331 收藏
点赞数
分类专栏： js基础 文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59157023/article/details/129139823
版权

  1. 不要在模板中写过多的表达式

  1. 尽量减少data中的数据

Object.freeze()去除Obeserve 特别是长久不变的大数据

能够用Object.freeze()去除Oberver监听，这样可以避免vue初始化的时候。

做一些无用操作，从而提高性能

  1. computed和watch需要分场景使用

computed擅长处理的场景： 一个数据受多个数据影响，如果一个属性是由其他属性计算而来的，这个属性依赖其他属性是一个多对1 或者1对1 ，一般用computed

wacth擅长处理的场景：监听数据变化 触发相应的操作

  1. 频繁切换使用v-show 不频繁切换使用v-if v-for加key key绑定唯一值比如id

key存在的意义：为了跟踪每个节点的特征，使其具有唯一性，高效更新虚拟dom

5.图片优化 用雪碧图 图片懒加载：监听scroll事件，当图片出现在可视区域时，将data-src值赋值给src,加载图片，在图片未加载时，用art属性

  1. 函数防抖（连续点击事件） 函数节流

呆呆加油呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 图片加载太慢怎么办_前端性能优化之图片懒加载（附vue自定义指令）
weixin_28852151的博客
01-26 1万+
作者：lzg9527链接：https://juejin.cn/post/6903774214780616718在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。如图所示，这个页面启动...
vue的computed和filters的性能优化方法
荤素菜鸟的博客
05-13 502
<template> //优化前 <div> <ul> <li v-for="(item,index) in users" :key="index" v-if="item.isActive">{{item.name}}</li> </ul> </div> //优化后 <div> <ul> <li v-for="(item,index) in activeUsers
如何实现图片懒加载，如何实现图片懒加载的性能优化，如何判断元素是否在可视化区域
m0_60676278的博客
06-05 826
Vue3中实现自定义图片懒加载插件可以使用Vue3提供的自定义指令来实现。首先，我们需要在项目中安装库，它是用来监听元素是否进入视口的库。然后，我们可以创建一个lazyloadimport {在上面的代码中，我们创建了一个名为lazyload的指令，它会在元素进入视口时将src属性设置为指令的值，即图片的地址。我们使用来监听元素是否进入视口，当元素进入视口时，我们将src属性设置为指令的值，并停止监听该元素。最后，我们可以在模板中使用v-lazyload指令来实现图片懒加载，代码如下：
vue前端开发中的最佳实践与性能优化的10个技巧含方案
mmc123125的博客
06-09 1172
通过压缩和合并CSS和JavaScript文件，减少文件的数量和大小，以提高页面加载速度。
如何优化vue项目 如何提升速度
最新发布
qq_25741071的博客
08-30 461
代码拆分和懒加载：将项目代码拆分成多个小模块，并使用 Vue 的异步组件和路由懒加载功能，按需加载模块，减少初始加载的文件大小和请求次数。代码优化：对于代码，可以进行一些优化，如减少不必要的计算和操作，避免重复渲染，合理使用 Vue 的响应式系统等。路由懒加载：对于路由，可以使用 Vue 的路由懒加载功能，将路由按需加载，减少初始加载的文件大小和请求次数。组件懒加载：对于组件，可以使用 Vue 的异步组件功能，将组件按需加载，减少初始加载的文件大小和请求次数。
浅谈Vue 初始化性能优化
08-29
浅谈Vue 初始化性能优化 Vue 初始化性能优化是 Vue 应用程序性能优化的重要方面。初始化性能优化的目的是为了减少应用程序的加载时间，提高用户体验。下面我们将浅谈 Vue 初始化性能优化的方法和技术。 性能瓶颈在...
加速vue组件渲染之性能优化
11-20
为了提高用户体验，我们需要关注组件的渲染速度和性能优化。Vue 的核心特性之一是响应式系统，它允许数据变化时自动更新视图，但这也可能导致不必要的性能开销。 在描述的场景中，我们看到一个典型的表格配置，其中...
记录：Vue移动端项目优化过程
01-20
**五、优化总结** 优化工作是一个持续的过程，通过不断分析和改进，可以逐步提高项目的性能。在Vue移动端项目中，我们需要注意合理引入第三方库，避免无谓的资源浪费，同时关注图片优化和代码打包策略，以提供最佳的...
总结vue前端面试题
10-27
- **Improved Performance**：包括性能优化如Tree Shaking、惰性加载和更好的编译优化。 7. **Vue生态**： - **Vue CLI**：官方提供的脚手架工具，简化项目初始化和配置。 - **Vuex Store**：用于状态管理，类似...
尚硅谷vue2知识总结
12-15
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其易学易用、性能优秀、组件化开发能力强等特点，在Web开发领域中备受推崇。本资料集是“尚硅谷”教育机构关于Vue 2.x的教程总结，旨在帮助开发者深入...
Vue页面 - 大型图片加载慢解决途径
CodingmanNAN的博客
01-25 5871
1. 两个内外尺寸一致的盒子，外层放置压缩图，内层放置高清图，高清图加载完成后铺盖压缩图即可; 2. 在不同阶段使用不同图片资源
Vue项目中的性能优化
qq_37831545的博客
03-07 1872
Vue项目中的性能优化：尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher - v-if 和v-for区分使用场景，v-if和v-for不要连用； - v-for遍历必须为item添加key，key保证唯一性，且避免同时使用vif - computed和method区分使用场景 - 路由懒加载、图片懒加载、长列表动态加载 - 第三方模块按需导入 - 对于短时间的大量操作（缩放、滚动）使用防抖、节流函数 - 事件的销毁
vue图片预加载
angjian3846的博客
09-18 455
目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。 一、方法一 项目打开的时候要对图片进行预加载，在App.vue里面的beforeCreate添加预加载程序 App.vue beforeCreate(){ let count = 0; let imgs = [ //用require的方式添加图片地址，...
vue中的性能优化
NGUP_LEE的博客
12-08 2657
前端性能优化的目的是使网站的加载速度更快，从而提高用户体验。用户等待网站加载的时间越短，他们就越可能对网站产生好感，并越可能继续在网站上浏览。此外，在移动设备上，性能优化可以帮助网站在较慢的网络条件下仍然能够流畅运行。性能优化也可以降低服务器的负载，从而降低运营成本。总之，前端性能优化是为了提高网站的速度和用户体验，并降低运营成本。
vue项目性能优化（图片优化）
田兴的博客
09-03 3826
一、图片保存阶段 ps 或 sketch 等图片，保存时或保存后，使用photoshop .jpg 图片选择 “连续” .png图片选择 “优化” 二、 图片压缩 访问 https://tinypng.com 对所有图片进行压缩，后替换（图片质量不变，可多图一起压缩） 三、 单色icon 使用iconfont 访问 http://www.iconfont.cn/ 上传和使用iconfont 四、制作雪碧图 1.一个网页可能有很多很多的小图标，就需要向服务器发送很多次访
万张图片，流畅体验——记一次 Vue 列表渲染
阿里云云栖号
12-17 2165
简介： ### 背景 团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。 ![条目列表](https://ata2-img.oss-cn-zh 背景 团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。 在开发完成进行简单性能测试时，发现列表数量达到数百条后，切换视图就会造成明显的页面卡顿，用户体验很差。于是着手进行性能优化。 第一次优化：解决已知问题 由于项目是使用
vue 性能优化(图片懒加载)
m0_52469153的博客
11-12 594
Vue项目中实现图片懒加载 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.us
Vue 项目性能优化 (图片优化)
zzDAYTOY的博客
09-24 819
Webpack 对图片进行压缩 在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片： 首先，安装 image-webpack-loader ： npm install image-webpack-loader --save-dev
vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制
05-26
`nextTick`是Vue框架提供的一个API，用于在DOM更新之后执行一个回调函数，这个回调函数可以访问到更新后的DOM。 Vue的数据驱动模式，当数据发生变化时，Vue会异步执行一系列的更新操作，而不是立即更新DOM。因此，当我们需要在DOM更新后执行某些操作时，我们需要使用`nextTick`。 具体来说，`nextTick`的作用是将回调函数推入一个队列中，在当前代码执行完成后，Vue会遍历这个队列，依次执行队列中的回调函数。这样做的好处是，我们可以在DOM更新完后执行回调函数，从而保证操作能够访问到最新的DOM。 下面我们来看一个具体的例子： ``` <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello Vue!' }; }, methods: { handleClick() { this.message = 'Hello World!'; this.$nextTick(() => { console.log('DOM updated!'); }); } } }; </script> ``` 在上面的代码中，我们定义了一个`message`变量，然后在`handleClick`中修改了它的值，接着使用`$nextTick`在DOM更新后执行了一个回调函数，输出了`DOM updated!`。 需要注意的是，`nextTick`并不是立即执行回调函数，它会等到所有同步任务执行完毕后才会执行。这是因为Vue会将异步更新操作放入微任务队列中，而微任务会在所有同步任务执行完毕后立即执行。 总结一下，`nextTick`的作用是在DOM更新后执行回调函数，从而保证操作能够访问到最新的DOM。它会将回调函数推入一个队列中，在当前代码执行完成后，Vue会遍历这个队列，依次执行队列中的回调函数。需要注意的是，`nextTick`并不是立即执行回调函数，它会等到所有同步任务执行完毕后才会执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值