接口返回一个5.2m的文本数据只需要400毫秒，但是渲染到前端很卡，浏览器卡死
不是列表格式的数据，就是一段文本，如何优化
vue渲染大文本浏览器卡顿
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
3条回答 默认 最新
小蓝阿姨 2023-01-31 14:03关注如果是富文本的话
说一说我个人的思路：
核心思想：每次只渲染一点点
实现原理：先不一下子渲染，把文本割一点一点，丢到数组里面
使用类似于前端虚表的原理，来判断可视范围。
当滚动到一定情况的时候再去计算获取要渲染出来的那部分文本。
如果我的问答对你的思路有启发，请点一下采纳本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 编辑记录 分享
- 2023-01-31 13:41回答 3 已采纳 如果是富文本的话说一说我个人的思路：核心思想：每次只渲染一点点实现原理：先不一下子渲染，把文本割一点一点，丢到数组里面使用类似于前端虚表的原理，来判断可视范围。当滚动到一定情况的时候再去计算获取要渲染
- 2022-02-16 11:34回答 6 已采纳 1.减少数据返回字段中不用的去掉 减少点内容 这种 效果不明显2. 用懒加载的方式 先展示一级 点击一然后展开二级 以此类推
- 2021-10-18 18:05回答 5 已采纳 token请求头不是浏览器默认有的（如Accept-Language，Referer，User-Agent等），发送自定义的请求头，在跨域请求时，服务器端需要使用Access-Control-Allo
- 2023-07-06 15:00O.....的博客 首先，在项目开发中遇到一个场景，需要传入大量数据，而elementui中el-table要渲染几百条数据，这就导致页面非常卡，所以这里我采用懒加载来分片渲染数据，首先加载10条数据，通过监听el-table的滚动事件，当滚动条...
- 2022-08-11 07:38回答 8 已采纳 this.$message.success('下载成功') const blob = new Blob([res.data], { type: 'application/vnd.ms-exc
- 2022-03-19 16:43回答 5 已采纳 题主用vue的话，是否有搭建路由呢？可以直接使用路由的方法来实现呀 首先第一个需求：修改密码页面不能后退。直接用路由的 this.$router.replace(xxx) 方法即可，相当于直接替换登录
- 2021-12-10 19:06回答 3 已采纳 看一下代码，看看字段什么的对不对
- 2021-08-19 12:45jdjfjgfdgdfg的博客 js 预览 大文件 TXT 浏览器渲染崩溃1.监听滚动条事件2.从服务器请求回100M文本数据。3.对总内容xhr.responseText 分页。4.设置默认初始只显示5页， 每页控制显示1000个字符长度，可自定义数字。根据内容进行分割字符...
- 2022-07-07 14:29回答 2 已采纳 window.addEventListener('resize', () => { //监听浏览器窗口大小改变 //浏览器变化执行动作
- 2021-09-28 14:14回答 4 已采纳 巧妙解决element-ui下拉框选项过多的问题 - Jason-HHC - 博客园 1. 场景描述 不知道你有没有这样的经历，下拉框的选
- 2022-07-22 20:35回答 2 已采纳 你是指把表单里面的如库位名称，库位编码等反显出来吗？如果是，就在返回数据的地方使用如 this.form.locationName = res.locationName类似的语句。
- 2023-03-01 09:59油墨香^_^的博客 如下图，通过 3 个小的细节改动，将 table 渲染耗时从 6.88s 减少到 1s 左右，平均减少 85% 渲染耗时，用户体验基本达到预期。在 vue3 项目中，响应式数据这块要特别注意。当遇到比较慢的场景时，建议采用如下方法...
- 2021-07-29 11:40回答 3 已采纳 关键词：缓冲 思路： 后端来的数据实时放计入数组A每隔1~2秒，从数组A中取出前10条数据渲染到页面上 这样，无论后端的频率有多高，数据量有大， 页面的渲染速度都是稳定可控的 如有帮助还请及时采纳，
- 2023-02-28 08:26bb_xiaxia1998的博客 在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截，有以下特点∶。...
- 2022-08-19 16:13祝小祝__的博客 因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域， Ajax 请求会失败。为来防止 CSRF 攻击 1 . JSONP JSONP 的原理很简单，就是利用 < script > 标签没有跨域限制的漏洞。...
- 没有解决我的问题, 去提问
问题事件
系统已结题
2月11日
已采纳回答
2月3日-
创建了问题
1月31日
悬赏问题
- ¥50 求解vmware的网络模式问题 别拿AI回答
- ¥24 EFS加密后，在同一台电脑解密出错，证书界面找不到对应指纹的证书，未备份证书，求在原电脑解密的方法，可行即采纳
- ¥15 springboot 3.0 实现Security 6.x版本集成
- ¥15 PHP-8.1 镜像无法用dockerfile里的CMD命令启动 只能进入容器启动，如何解决？(操作系统-ubuntu)
- ¥30 请帮我解决一下下面六个代码
- ¥15 关于资源监视工具的e-care有知道的嘛
- ¥35 MIMO天线稀疏阵列排布问题
- ¥60 用visual studio编写程序，利用间接平差求解水准网
- ¥15 Llama如何调用shell或者Python
- ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？