javascript - 包装 div 中的每个单词会导致性能问题

Question

我正在创建一个单页网站，其中包含将近 5000 个单词作为文本以提供特定的动画效果，我需要将每个单词包装在一个 div 标签中，并使用这样的类。

<div class="word"> word</div>

这会导致 div 过多(DOM 中的元素过多)。 我完全理解 DOM 中有 5000 个元素是荒谬的

还有其他方法吗？

这是我想要达到的效果:

$('body').children('.word').each(function() {
  $(this).animate({
    "opacity": "1"
  }, Math.floor(Math.random() * 3000) + 500);
});

.word {
  opacity: 0;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word">
  hello,
</div>
<div class="word">
  how
</div>
<div class="word">
  are
</div>
<div class="word">
  you
</div>
<div class="word">
  doing
</div>

编辑: 这是更好的方法吗

http://jsfiddle.net/PrakharThakur/cxvuq96v/

Answer 1

您的问题是 $.animate 性能低下。它会导致大量的 DOM 更新(每秒数千次)，使您的网站变慢。

您应该使用在 GPU 支持下执行且无需 DOM 更新的 CSS 动画或 CSS 转换。

您可以像这样创建代码:

$('body').children('.word').each(function() {
  $(this).style({transition: 'opacity '+ Math.floor(Math.random() * 3000) + 500) +'s'});
  $(this).addClass('visible');
});

并在CSS文件中添加如下代码:

 .visible {
      opacity: 1;
  }