vue列表渲染性能优化

最新推荐文章于 2024-05-07 23:22:21 发布
最新推荐文章于 2024-05-07 23:22:21 发布
阅读量789 收藏 2
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linceo/article/details/105881361
版权

1、进程是系统进行资源分配和调度的一个独立单位，一个进程包含多个线程

2、渲染进程

  • GUI渲染线程（页面渲染）

  • JS引擎线程（执行js脚本）

  • 事件触发线程（EventLoop 轮间处理线程）

  • 事件（onclick）、定时器（setTimeout）、ajax（xhr）（独立线程）

    GUI渲染线程和js引擎线程是互斥的

3、浏览器中的EventLoop
在这里插入图片描述
4、超长列表渲染性能优化

  • 分片渲染（通过浏览器事件环机制，分割渲染时间）
    在这里插入图片描述
    在这里插入图片描述

  • 虚拟列表（只渲染可视区域）

     代码地址 ： https://github.com/Linceo/youhua

在这里插入图片描述

在这里插入图片描述

Linceo
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目性能优化
qq_45333787的博客
01-19 191
一、基础优化（代码以及编码规范） 1、v-if 和 v-for区分使用场景 v-if=false时不渲染DOM，v-show会预渲染DOM，注意区分使用 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if v-for 遍历必须为 item 添加 key 在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。 v-for 遍历避免同时使用 v
vue3 worker多线程
qq_34799366的博客
08-23 2552
vue3多线程
在Vue中使用多线程——Comlink-loader的应用
weixin_41646552的博客
05-20 7995
Comlink精妙的地方，我个人认为在于将数据传递的操作变成了一个异步的操作，这样我们就能很好的利用ES6所提供的async/await语法糖，将数据的传递与接收逻辑写得非常简洁优雅。开发者不需要再去考虑事件订阅所带来的各种复杂度。
vue3如何实现预渲染超详细保姆级
最新发布
weixin_55493330的博客
05-07 590
Vue 3提供了一种名为"静态站点生成（Static Site Generation，SSG）"的预渲染方式，可以将部分或全部页面在构建时预先生成为静态HTML文件。这些预渲染的HTML文件可以直接部署在任何静态服务器上，从而实现更快的首次加载速度和SEO优化。运行以上命令后，Vue将根据预定义的路由列表生成静态HTML文件，并保存在。在Vue项目的根目录下创建一个。在Vue项目的入口文件（一般是。的目录，并在其中新建一个。
Vue 进阶系列丨webWorker 多线程
HFunTeam的博客
10-27 3096
Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。最早的 Vue.js 只做视图层，没有路由，没...
VUE 学习笔记（三） Vue 渲染流程详解
w风雨无阻w的专栏
05-07 3438
在 Vue 里渲染一块内容，会有以下步骤及流程：第一步，解析语法，生成AST第二步，根据AST结果，完成data数据初始化第三步，根据AST结果和DATA数据绑定情况，生成虚拟DOM第四步，将虚拟DOM 生成真正的DOM插入到页面中，进行页面渲染。那怎么理解这个流程呢？AST 语法树，实际就是抽象语法树（Abstract Syntax Tree），是指通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。DOM 结构树，也是AST中的一种，把HTML DOM语法解析并生成最终页面。
Vue 渲染流程详解
m0_55333789的博客
07-26 2769
Vue 渲染流程详解
Vue超长列表渲染性能优化
05-09
本资源是对浏览器中的Event Loop深入理解，requestAnimationFrame性能优化，DocumentFragment性能优化，Vue.js中的固定高度虚拟列表优化，面向未来的无限列表优化方案的实践，是对vue原理的一次深入理解。
Vue列表页渲染优化详解
08-29
Vue列表页渲染优化是提高Web应用...通过上述优化策略，可以有效地提高Vue列表页的渲染性能，确保应用在处理大量数据时仍能保持流畅的用户体验。在实际开发中，需要根据具体项目需求和性能瓶颈来选择合适的优化方法。
加速vue组件渲染之性能优化
10-15
此外，还有其他一些Vue组件性能优化技巧，例如： 1. **使用`v-if`和`v-show`**：`v-if`有更高的切换成本，但不建议在大规模列表中频繁切换；而`v-show`在DOM层面上仅仅是改变`display`属性，适用于频繁切换的情况。...
vue前端性能优化02
12-17
4. **虚拟DOM优化**：使用`key`属性帮助Vue更准确地追踪组件状态，尤其是在列表渲染时。避免在不必要的地方使用Vue的`v-if`和`v-for`，优先选择`v-show`，因为它不会创建额外的DOM元素。 5. **使用Vue Router的懒...
vue中关于多状态渲染不同dom的小技巧
baidu_41601048的博客
01-18 988
如图：右侧的状态小文本和icon，根据不同的status值显现不同的状态（颜色，文本内容） 常规做法： <i v-if="build.workStatus===2" class="el-icon-loading " ></i> <i v-else-if="build.workStatus===0" class="el-icon-loading " ></i> <i v-else="build.workSt..
【Vuejs】1116- 总结 Vue 的长列表优化方案
pingan8787
10-20 1899
今天主要想跟大家聊聊长列表优化，有的时候我们需要在页面上显示特别长的列表，这种情况主要发生在移动端或者后台管理的页面中，在移动端往往有个下拉刷新内容的功能，不停地往上翻，到底部后会加载更多...
【优化】VUE性能优化
我是Superman丶的博客
07-31 985
Vue会通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要Vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止Vue劫持我们的数据呢？这样每复用一次组件，会返回一份新的data数据，类似于给每个组件实例创建一个私有的数据空间，让各个组件的实例各自独立，互不影响，保持低耦合。//data是一个函数,datafunction(){}的简写。.........
【无标题】Vue长列表性能优化常用方案
yuyongkun4519的博客
01-17 2546
长列表性能问题发生的原因？ 众所周知HTML页面中DOM的修改会引起页面的重新渲染，重新渲染包含DOM节点的重排和重绘（重排和重绘的知识点可以自行百度），如果页面中大量的DOM节点发生重绘，页面就会出现性能问题。 如何解决出现的性能问题？ 1，最常见的方式是分页加载，切片分段加载。 分页加载大家都知道，不再赘述。下面我们看看切片分段加载。 实现原理：requestAnimationFrame + ceateDocumentFragment 假如有10000条数据要渲染展示，我们用代码实现如下：
13-Vue长列表优化 vue-virtual-scroller
iaz999的博客
07-10 5919
回答：在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿白屏数据渲染较慢的问题；这种情况主要发生在小程序、移动端或者后台管理的页面当中；通常我们会采用分页的方式进行内容的逐渐获取，但是当内容越来越多时；比如移动端的下拉刷新，不停的往上翻，到底部会加载更多内容，这样一来列表中会新增很多的元素，元素多了以后会触发浏览器的重排重绘，无论是内存的占用还是GPU的渲染都会带来很大的性能损耗，导致页面滑动卡顿数据渲染较慢。
vue 长列表性能优化
weixin_46396187的博客
08-11 5351
vue 长列表性能优化 因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。 一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动卡顿 方案1： 做分页处理，首页默认展示第一页数据，滚动加载，这也是一种方案，如果列表做不了分页，那该如何处理。 方案2： 使用vue-virtual-scroller插件 安装这个插件：
Vue 跨平台性能优化十法
腾讯技术工程
10-08 1235
作者：bartonwang，腾讯 IEG 客户端开发工程师Vue 是一套用于构建用户界面的渐进式的 JavaScript 框架。具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本...
Vue长列表优化
m0_66285809的博客
03-09 590
先来唠唠实现的思路。要想防止节点过多，就要控制渲染节点的数量。视窗就那么大，渲染十万条数据一次也只能看到窗口里的那点东西，所以我们只用动态渲染一部分即可，当然这会涉及的频繁的操作DOM，但是跟同时渲染几十万上百万数据相比，这点消耗不算什么。只是为了触发滑动实际上就是个。把它在页面上遮挡住。
使用 Vue 实现一个虚拟列表的方法
10-16
总的来说，使用Vue实现一个虚拟列表的方法，可以通过合理的计算可视区域、DOM更新和事件处理来优化大型列表的性能问题。当然，具体实现的细节会根据实际情况而有所不同，但是本文介绍的方法和思路，可以作为参考和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值