移动设备上的Javascript简单动画

我正在尝试使用“setInterval”的打字效果，它工作正常，但在移动设备上滞后。我已经放慢了速度，但仍然落后，下面我附加了发生的事情的表示，以及我的代码

代码：

起初，我使用jquery的.append（），但后来尝试使用纯js查看它是否在做任何事情，但运气不好，我在body上调用了这个函数onload（）。 无论如何，我并没有真正研究过代码，以使其更小，所以除非这不是原因，请不要判断它

在桌面上：

---

在移动设备上：

文档。getElementById

非常昂贵。它遍历DOM，一次又一次地为字符串中的每个字符查找元素。将这些元素存储在变量中更有意义（更好的做法是，为整个文本块使用一个容器）

我不确定设置和清除间隔是否比一次性

setTimeout

更有效，但我认为切换不会有任何伤害，即使只是为了清洁。出于同样的原因，我也在使用promise，但是如果在异步时遇到任何问题，您可以轻松地使用回调

除此之外，代码很难维护。如果你想添加更多的文本，厄运金字塔会增长，代码通常需要重新编写。使用循环

我的做法如下：

const text=`我们设计，
我们开发
和
我们关心`；
const typelem=document.querySelector（“打字机”）；
（异步（）=>{
用于（文本的常量行。拆分（“\n”））{
const div=document.createElement（“div”）；
类型元素追加子项（div）；
for（第[…行]的常量字符）{
div.insertAdjacentHTML（“beforeed”，char）；
等待新的承诺（resolve=>setTimeout（resolve，200））；
}
}
})();
谢谢@ggurlen我用我目前所知道的写了这篇文章，我会检查你的代码，并在我理解它的同时尝试理解发生了什么，只是想让你知道它并没有解决移动设备上的滞后问题。很抱歉听到这个消息——我不明白为什么这不能在任何机器上快速运行。就这一点而言，即使您的原始代码有一两处轻微的低效，这也不重要。因此，问题很可能在别处。你能发布足够多的代码来重现这个问题吗？您可以尝试的一件事是在这两台设备上运行此页面上的示例代码。如果出现问题，那么您可以非常确定这段代码是错误的。如果没有，那么问题可能出在其他地方。因此，正如您所建议的，我仅使用这段代码创建了一个新页面，并且运行顺利。显然是的，问题在别处。所以，我开始一个接一个地添加组件并对其进行测试，以找出哪里出了问题。你看，我正在使用媒体查询进行响应性设计，这就是为什么我在我的“头”上添加了视口元，显然在我添加了这个元之后，它开始滞后，使页面响应。代码：HTML-CSS-Javscript-有趣--调试工作很好。我建议用这个代码开始一个新问题。
function animate() {
  var a = "We DESIGN,";
  var b = "We DEVELOP";
  var c = "and";
  var d = "We CARE";
  var e = 0;

  var one = setInterval(function () {
    document.getElementById('one').insertAdjacentHTML('beforeend',a[e]);
    e = e + 1;
    if (e == 10) {
      clearInterval(one);
      var f = 0;
      var two = setInterval(function () {
        document.getElementById('two').insertAdjacentHTML('beforeend',b[f]);
        f = f + 1;
        if (f == 10) {
          clearInterval(two);
          var g = 0;
          var three = setInterval(function () {
            document.getElementById('three').insertAdjacentHTML('beforeend',c[g]);
            g = g + 1;
            if (g == 3) {
              clearInterval(three);
              var h = 0;
              var four = setInterval(function () {
                document.getElementById('four').insertAdjacentHTML('beforeend',d[h]);
                h = h + 1;
                if (h == 7) {
                  clearInterval(four);
                }
              },200);
            }
          },150);
        }
      },200);
    }
  },200);
}