JS渲染十万数据列表

nemo 发布于2019-08-23 18:26 / 2400人阅读

摘要：直入正题假设有十万条数据的列表要展示，该如何优化如果直接上，不管你是一条一条插入，还是先存入再一次性插入，白屏时间都在，浏览器应该是合并了更新操作，如果不做优化，并不会分批渲染。

直入正题：假设有十万条数据的列表要展示，该如何优化？
如果直接上，不管你是一条一条插入，还是先存入fragment再一次性插入，白屏时间都在6s+，浏览器应该是合并了dom更新操作，如果不做优化，并不会分批渲染。
注意：测试所用的item结构是极其简单的，一旦渲染的item是复杂结构那么渲染的时间倍增

item.innerHTML =

${text}

测试;

优化一，分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的区别就不多复述了，网上一大把。先渲染一部分，然后执行循环逻辑。但是这个部分到底是多少，需要自己调试了，我写的是300，但不一定适用。

    const totalFn = () => {
      window.requestAnimationFrame(() => {
        if (i <= data.length) {
          computedHeight(data.slice(i, i + 300)); // 执行插入dom操作
          i += 300;
          totalFn();
        } else {
          root.style.height = max + "px"
        }
      })
    }
    totalFn();

这样能做到秒开，无长时间白屏。

but,如果只是这样就回答的太简单了点，可能面试官还希望更深入的解答，比如我十万条数据就算能秒加载，但是渲染复杂逻辑，说不定会卡卡的，因为页面元素太多了。在不考虑分页的情况下，如何进一步优化。

优化二，只渲染可视区范围内的dom(只提供思路了)

这块涉及的交互就略复杂了，首先为了保证和一次性加载出来的效果一致，比如有滚动惯性,需要计算总高度。
简单的玩法，每一个item是同样的高度，那么计算高度就很简单了，但是如果每个item的高度不同，那么要就需要隐藏计算（把dom插入隐藏域，而且需要采用优化一的手段，不然会卡），但是那样又会导致整个计算过程过于漫长，需要寻找到最适合的点。
得到高度后，绑定scroll事件，根据scrollTop的值，动态计算展示哪一块内容，为了保证位置，还需要在首部填充空白块占位。
仍然可能存在的问题，比如scroll触发的时机，scroll在ios下是不能做到实时触发的，比如在惯性滚动过程中，触发不了scroll事件，可能会导致部分白屏（暂时没有想到如何解决），如果用iscroll.js,不知道能不能
模拟到原生的效果。

idc机房托管混合云 js数据渲染插件采用js渲染数据 js渲染数据抽取 js 数据列表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105234.html

vueTable大数据展示优化

摘要：懒加载方式常见的有淘宝一屏用元素占据一定的高度，然后再去拉图片数据。但这种方式还是需要元素占位，淘宝一页的数据量其实不算大，因为它结合了分页。背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大数据项目根据用户输入代码查询数据，用户的代码不可控（比如select from db limit 5000），有可能...

JasinYip 2019-08-23 12:15 评论0 收藏0
Puppeteer前端自动化测试实践

摘要：本篇内容将记录并介绍使用进行自动化网页测试，并依靠约定来避免反复修改测试用例的方案。总结根据以上的功能划分，我们很好的将一整个应用拆分成各个测试单元进行单元测试。本篇内容将记录并介绍使用Puppeteer进行自动化网页测试，并依靠约定来避免反复修改测试用例的方案。主要解决页面众多时，修改代码导致的牵连错误无法被发现的运行时问题。文章首发于个人博客。对前端感兴趣希望一起讨论的可以加我v...

Jensen 2019-08-23 15:20 评论0 收藏0
Angular 2.x+ 脏检查机制理解

摘要：策略减少检测次数当输入属性不变时，可以跳过整个变更检测子树。现在当执行更改检测时，它将从上到下进行。并且一旦更改检测运行结束，它将恢复整个树的状态。 Angular 2.x+ 脏检查机制理解目前几种主流的前端框架都已经实现双向绑定特性，但实现的方法各有不同：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持 + 发布者-订阅者模式（vue.j...

W4n9Hu1 2019-08-20 16:51 评论0 收藏0
梵高油画用深度卷积神经网络迭代十万次是什么效果？

摘要：迭代次，重复执行三次重复计算了三次，使用相同的图片，相同的卷积神经网络模型，相同的迭代次数次，却得到了区别明显的三张结果图。推测原因由于卷积神经网络中的若干层，实际是对图像进行了均值处理，导致了边缘细节的丢失。作为一个脱离了低级趣味的码农，春节假期闲来无事，决定做一些有意思的事情打发时间，碰巧看到这篇论文： A neural style of convolutional neural ne...

Ethan815 2019-04-25 18:07 评论0 收藏0
不得不聊聊的react--入门篇

摘要：一诞生的性能瓶颈，主要有以下原因。注意组件类的第一个字母必须大写，否则会报错。组件并不是真实的节点，而是存在于内存之中的一种数据结构，叫做虚拟。此外，还提供两种特殊状态的处理函数。不会随着时间改变可能不是。本文为学习笔记，适合入门的童鞋，如有错误，请多多指教。一、react诞生 Web app的性能瓶颈，主要有以下原因。（1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要...

lidashuang 2019-08-19 18:04 评论0 收藏0