Chrome中的慢速JavaScript动画

我对Chrome中HTML对象的样式操作有问题

以下是一个例子：

var a = document.createElement('div');

a.style.position = 'absolute';
a.style.display = 'block';
a.style.top = '300px';
a.style.left = '50px';
a.style.height = '100px';
a.style.width = '10px';
a.style.backgroundColor = '#000000';
a.style.zIndex = '200';

a.aW = 10;

var a2 = document.createElement('div');

a2.style.position = 'absolute';
a2.style.display = 'block';
a2.style.top = '200px';
a2.style.left = '50px';
a2.style.height = '100px';
a2.style.width = '10px';
a2.style.backgroundColor = '#000000';
a2.style.zIndex = '200';
a2.id = 'a';

a2.aW = 10;

document.getElementsByTagName('body')[0].appendChild(a);
document.getElementsByTagName('body')[0].appendChild(a2);

var b = window.setInterval(function () {
    a.aW += 10;
    if (a.aW > 1600) {
        window.clearInterval(b);
    }
    a.style.width = a.aW + 'px';
}, 13);

$('#a').animate({
    width: '1600'
}, 2000, 'linear');

如果在正常网站上运行，则通过setInterval函数设置动画的对象有时工作缓慢。 奇怪的是，由jQuery设置动画的对象在oO中运行平稳

---

（对不起，我的英语不好。）

首先，间隔计时器不能保证完全按照您设置的时间运行，特别是当时间间隔很短时。在许多浏览器中，

setInterval（）

都有一个允许的最小时间值。因此，如果该最小时间大于13毫秒，或者如果许多间隔调用的时间长于13毫秒，则具有固定步数的动画将花费更长的时间，并且速度会变慢

其次，任何可靠的动画都必须使用tweening算法，在该算法中，它计算出想要使用的步骤，然后在每个步骤上重新计算（通过将系统时间与该步骤编号的预期系统时间进行比较）无论是落后于计划还是提前，都会相应地调整未来的步长，以便按时完成并以适当的速度运行。这就是jQuery的动画所做的。这就是你的

setInterval（）

动画所不能做的

下面是一个关于运行可预测时间量的动画的自调整计时器和计时器的最短时间的示例

这是一个和另一个做吐温

此外，为了简单起见，请更改以下内容：

document.getElementsByTagName('body')[0]

为此：

document.body

---

您的计时器每秒将执行多次。我认为速度太快可能会导致浏览器延迟。我相信jQuery动画函数的间隔是50ms

---

看一下关于区间浏览器的性能，并考虑提高你的间隔时间。

对不起，因为没有接受答案，我完全忘记了它。