渲染大量数据显示的优化

在最近的项目中遇到一些大数据渲染问题，在渲染时候变得非常卡，有时候页面还会造成崩溃的显现，vue渲染小数据挺快，大数据vue开始出现卡顿现象，vue 中的虚拟DOM也不行，这对于我们大数据公司来说，无疑是非常头疼的地方，对于前端来的我们来说，无疑影响是最大的。

业务背景：

在数据脱敏的过程中，前端需要展示数据中每个表的一个脱敏过程，包括每个表的从创建，脱敏等等，在数据库表非常多的情况下，过程信息将近到几万条过程信息。

主要问题

按照原来的做法，普通的组件，进行数据渲染插入dom中（几十条邹游），数据量小的时候很正常，vue很快。
改为分段实现，把一批数据进行分块，通过定时器取出相应的部分去渲染，这种做法，比第一中稍微好点
改为分段+虚拟DOM实现，这种做法，当达到几百条就会出现问题。

解决思路

不要渲染全部数据，只渲染用户眼睛能看到的部分数据。
不要用Vue去管理和监听全部的数据，造成很大的内存开销，可以自己定义个变量计算。

欢迎进入个人公众号，一起学习啊！

渲染大量数据显示的优化相关推荐

JavaScript 工作原理之十一－渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧 1
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
如何从8 道面试题中，看出浏览器渲染过程与性能优化
前言移动互联网时代,用户对于网页的打开速度要求越来越高.百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图所示. 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 ...
GPU渲染技术及性能优化
GPU渲染技术及性能优化背景:在我们做图形界面程序开发时,不得不考虑一个问题是GPU渲染性能,GPU是否能支持我们想象中炫酷的设计和动画,这就需要我们对GPU渲染技术有一定的了解,这样我们才能在开发 ...
浏览器渲染原理以及性能优化
浏览器渲染原理以及性能优化浏览器渲染原理进程与线程 Request请求阶段 Response响应阶段浏览器渲染网页注意事项浏览器渲染网页阻塞顺序 DOM的重绘和回流 Repaint & ...
移动设备渲染架构以及GPU优化技巧
移动设备渲染架构以及GPU优化技巧前言一.常用的两种GPU渲染架构二.Immediate Mode Rendering 1.说明 2.优点 3.缺点三.Tile-Based Rendering ...
vue渲染大量数据如何优化_Vue3 Compiler 优化细节，如何手写高性能渲染函数
送5本<你不知道的 JavaScript 上卷>点我抽奖,祝大家好运 Vue3 的 Compiler 与 runtime 紧密合作,充分利用编译时信息,使得性能得到了极大的提升.本文的目的 ...
react如何遍历并比较_[前端进阶] 这可能是最通俗易懂的React 渲染原理及性能优化...
如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...

渲染大量数据显示的优化

渲染大量数据显示的优化

业务背景：

主要问题

解决思路

欢迎进入个人公众号，一起学习啊！

渲染大量数据显示的优化相关推荐

最新文章

热门文章

渲染大量数据显示的优化

渲染大量数据显示的优化

业务背景：

主要问题

解决思路

欢迎进入个人公众号 ，一起学习啊！

渲染大量数据显示的优化相关推荐

最新文章

热门文章

欢迎进入个人公众号，一起学习啊！