使用JavaScript

Question

简介

我正在向后端发出请求并获取JSON中的对象列表。然后我将其更改为HTML表格（它是Vuetify data-table），其中每个对象都是一行。

每行包含一个正好为72个零和0（[1, 1, 1, 1, 0, ...]）的数组。它们表明活动的时间（72小时）。

在每一行中，我都有一个for循环（它是Vue.js v-for指令），它遍历该数组并加载图像1.svg或{{1}相应地，制作一个chart。

只有40行，表格会稍微延迟。现在，该表非常宽，因此它离开了屏幕（0.svg或其他）。

TL; DR

是否有可能在JavaScript中以某种方式流畅地隐藏DOM元素（在本例中为表格单元格（和行））（隐藏意味着从DOM中删除，以便浏览器不必渲染所有这些元素）屏幕？

您可以推荐一些文献吗？任何教程？该找什么？

我记得在一个包含数千个元素的列表上看到谷歌谈话在移动设备上流畅地滚动，但似乎无法找到它。

演示

https://codepen.io/DCzajkowski/pen/yPbPqy

Answer 1

嗨Czajkowski Dariusz，

是的，当然可以流畅地处理大量的DOM节点。诀窍是过去一步＆＃34;隐藏＆＃34; DOM节点，而不是完全渲染它们。

这个过程的简化视图可以分解为以下步骤：

1. 测量渲染这些节点的区域的大小。 - ＆GT; RenderingHeight
2. 测量一个可见DOM节点的大小 - ＆gt; NodeHeight
3. 仅渲染尽可能多的DOM节点以及用作缓冲区的一些额外的DOM节点 - ＆gt; （RenderingHeight / NodeHeight）+ 2 = NumberOfNodes
4. 创建应使用值
填充这些DOM节点的数据子集
5. 当页面上的操作发生时（滚动，单击等）更新应根据操作显示的数据子集。使用这组新数据重新渲染可见节点。

示例：如果渲染高度为1000px的列表，并且每个列表项的高度为100px，则您有1000个数据点。

RenderingHeight = 1000px

NodeHeight = 100px

NumberOfNodes = 12

使用DataPoints [0] - DataPoints [11]渲染十个列表项节点。当滚动事件将容器向下移动至少100px时，您应该将所选数据子集更新为DataPoints 1 - DataPoints [12]。然后，不是删除节点或添加新节点，只需更新现有12个节点中的数据即可使用这个新的数据点子集。

这个解释绝对是你在自己的应用程序中最终会做的事情的简化，但我希望它传达了基本的想法。

我相信您正在考虑的话题可能是今年Google I / O中的这个话题：https://www.youtube.com/watch?v=mmq-KVeO-uU。从时间戳15:45开始捕捉示例。

在本次演讲中，他以react-virtualized库为例。由于您在Vue.js工作，因此该库无法直接解决您的问题，但阅读代码可能会让您深入了解如何实现这一目标。我已经使用过这个库几次，它对我来说效果很好。

快速google search for virtualized lists in js会产生一些其他可能有用的vanilla js实现。

这不是一个你想要实现的简单机制，但它在渲染大量数据时管理性能非常强大。

祝你好运！

Answer 2

使用具有5000行数据集的Polymer元素canvas-datagrid的Vue应用示例。

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  data: {
    data: []
  },
  async created () {
    var response = await fetch('https://jsonplaceholder.typicode.com/photos')
    this.data = await response.json()
  }
})

＆＃13;

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
}

＆＃13;

<div id="app">
  <canvas-datagrid>
    {{ data }}
  </canvas-datagrid>
</div>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>
<script src="https://unpkg.com/canvas-datagrid@0.18.12/dist/canvas-datagrid.js"></script>

＆＃13;

＆＃13;

＆＃13;