如何补偿浏览器之间的循环性能差异

How to compensate for loop performance differences among browsers

本文关键字：循环 循环性 性能 之间 浏览器 何补偿 补偿      更新时间：2023-09-26

我有这个打字机脚本，它在一个自引用函数中使用timeout来向元素添加一个字符。

问题是，这需要更长时间在firefox比在chrome，我希望它完成在相同的持续时间在所有浏览器。

铬:表现在:3.167695

Firefox:表现在:4.10383 

var start = performance.now();
txt = $('#text').html();
typeWriter(txt,0);
function typeWriter(text, n) {
  if (n < (text.length)) {
    $('#text').html( text.substring(0, n+=2) );
    
    setTimeout(function() {
      typeWriter(text, n);
    }, 1);
  }else{
  
  var end = performance.now();
	$('body').append('<h4>Performed in: ' + (end - start)/1000);
  }
}
#text{
font-size:10px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>

我应该使用计时器来计算每个循环添加多少字符吗?解决这个问题的最好方法是什么?

使用requestAnimationFrame -然后您可以设置相当准确的运行时间-在示例中我使用3秒

等待是1000/60 -因为requestAnimationFrame以60fps运行

代码可以简单地写成

    var count = txt.length 3 / 60;

其中3是你想要的秒数，并删除var wait和elapsed -我只包含这样的代码来帮助查看发生了什么

    var start = performance.now();
    var txtEl = document.getElementById('text');
    var txt = txtEl.textContent;
    var wait = 1000/60;
    var elapse = 3000;
    var count = txt.length * wait / elapse;
    var typeWriter = function (text, n) {
      if (n < (text.length)) {
        txtEl.textContent= text.substr(0, n+=count);
        requestAnimationFrame(function() {
            typeWriter(text, n)
        });
      } else {
        var end = performance.now();
        document.body.insertAdjacentHTML('beforeEnd', '<h4>Performed in: ' + (end - start)/1000);
      }
    }
    typeWriter(txt, 0);
#text{
font-size:10px;  
}
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>

  • Firefox: 3.022785
  • 铬:3.022000

近到可以做薄荷工作了，你说呢?

SetTimeout是一个异步调用，在SetTimeout中指定的时间并不意味着它将在该时间之后执行。无论何时

setTimeout()

它的请求将被存储在堆栈中，并且在此时间之后它将能够执行。之后不是指尽快。所以我们对此没有任何控制

现在的问题是两个浏览器之间的区别是什么?Chrome使用v8 javascript引擎，firefox使用spidermonkey。所以这就像你要求两个人在同一时间做同样的任务。(如果我错了请指正)

相关文章：