前段时间我为 AngularJS(使用 Angular Material)构建了一个树形表结构。

我的目标是让它只在大屏幕(1280 和更高)上运行，但现在我想更新它并让它在较小的设备(主要是平板电脑)上运行而不限制数据。由于性能原因，我希望 HTML 尽可能简单(树形表可以有 1000 多行，因此为单行创建更复杂的 HTML 将延长追加和呈现表行所需的时间(行是动态的，所以它不仅仅是关于初始渲染))。

我想出了一个想法，即我将保留第一个包含名称的单元格的“固定”部分，并滚动包含所有指标并将同步滚动的第二部分。

当前单行HTML:

<div class="tb-header layout-row">
  <div class="tb-title"><span>Name</span></div>
  <div class="tb-metrics">
     <div class="layout-row">
        <div class="tb-cell flex-10">812</div>
        <div class="tb-cell flex-7">621</div>
        <div class="tb-cell flex-4">76.5</div>
        <div class="tb-cell flex-7">289</div>
        <div class="tb-cell flex-4">46.5</div>
        <div class="tb-cell flex-7">308</div>
        <div class="tb-cell flex-4">49.6</div>
        <div class="tb-cell flex-7">390</div>
        <div class="tb-cell flex-4">48.0</div>
        <div class="tb-cell flex-7">190</div>
        <div class="tb-cell flex-4">23.4</div>
        <div class="tb-cell flex-7">0</div>
        <div class="tb-cell flex-4">0.0</div>
        <div class="tb-cell flex-8">6.4</div>
        <div class="tb-cell flex-8">0.0</div>
        <div class="tb-cell flex-8"></div>
     </div>
  </div>

我的想法是使用 touchmove父容器上的事件(包装整个树并绑定(bind)为指令)并检查何时 touchmove从指标部分开始，然后计算我应该移动指标的值。那部分工作正常。 当我想在 .tb-metrics > 上应用偏移量时，问题就开始了.

我的第一次尝试是使用 jQuery:

function moveMetrics( offset ) {
  var ofx = offset < 0 ? (offset < -getMetricsScrollWidth() ? -getMetricsScrollWidth() : offset) : 0;
  $('.tb-metrics').children().css('transform', 'translateX(' + ofx + 'px)');

  /*...*/

}

不幸的是，当表包含更多行时，此解决方案非常慢(我无法缓存行，因为它们是动态的)。

在我的第二次尝试中，我尝试尽可能避免 DOM 操作。 为此，我决定添加 <script>包含适用于 .metrics > .layout-row 的 css 的 dom 标记.

解决方法:

function moveMetrics( offset ) {
  var ofx = offset < 0 ? (offset < -getMetricsScrollWidth() ? -getMetricsScrollWidth() : offset) : 0
    , style = $( '#tbMetricsVirtualScroll' )
    ;

  if ( !style.length ) {
    body.append( '<style id="tbMetricsVirtualScroll">.tb-metrics > * {transform: translateX(' + ofx + 'px)}</style>' );
    style = $( '#tbMetricsVirtualScroll' );
  } else {
    style.text( '.tb-metrics > * {transform: translateX(' + ofx + 'px)}' );
  }
  /*...*/
}

但是，当表包含大量行时，它似乎并没有快多少。所以这不是 DOM 操作，而是渲染/绘画 View 似乎是这里的瓶颈。

我试图创建某种虚拟滚动，但是因为树结构对于不同的数据集是不同的并且可以具有“无限”数量的级别(每行可以包含新的 ng-repeat 中的子行)这真的很难任务。

如果有任何关于如何在不使用虚拟滚动条的情况下提高性能的想法，我将不胜感激。

编辑:

Chrome时间轴截图显示滚动的大部分时间都花在了渲染上(我猜是因为复杂的DOM结构)

编辑 2:

我不会说我实现了绝对流畅的滚动，但我发现了一些可以显着提高性能的东西(其中一些并不明显，经过如此小的更改后结果比我预期的要好)。

• 简化类选择器: .tb-header > .tb-metrics > .tb-cell比 .tb-specific-cell 慢得多(似乎解析更复杂的选择器需要更多的时间？)
• 从转换后的元素中移除不透明度和框阴影
• 尝试将转换后的元素分布到新层(使用 css will-change 和/或 translateZ(0))

最佳答案

我过去在使用非常大的表时遇到过类似的问题。因此，将 UX 方面的事情排除在等式之外 - 为了实现您的目标可能是以下内容。与其保持第一张 table 固定并移动其余所有 table ，也许您可​​以尝试相反的方法。也就是，将表格放在溢出的容器中以允许水平滚动，并在垂直滚动时使用 translateY 移动第一列表格单元格。

按照我描述的方式，您可以检索第一个表格单元格的最大宽度(或者更好的是，设置一个固定宽度)，绝对将每个单元格放在左侧 - 不过要小心，相关容器应该在溢出的表格，在每行的第二个表格单元格上设置一个 padding-left，等于第一个表格单元格，然后，当垂直滚动时，添加一个负的 translateY 值。然后选择器应该很容易访问“.layout-row .table-cell:first-child”。

同样对于较小的优化，请尝试使用 .attr('style', value) 而不是使用 .css()。另外，我读到你有动态内容并且不能缓存它，但是，也许你应该考虑在每次操作 DOM 时缓存一次。缓存的选定元素仍然比在每个滚动/触摸移动事件中计算选择器要好。

最后但同样重要的是，您还可以添加某种去抖动技术，这样滚动就不会在每个滚动帧上发生，但可能每 10 帧发生一次 - 它仍然对眼睛不可见，或者在任何情况下都比使用所有这些重绘事件使浏览器成为瓶颈。

关于javascript - 转换/移动大量 DOM 元素的最高效方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36129133/