Question

在进行一些JavaScript性能测试时，我提出了以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Performance Test</title>
        <script>
            var time1;
            var time2;
            var executionTime;

            function writeALot(){
                time1 = new Date().getTime();
                var n = Number(document.getElementById("numberOfWrites").value);
                var strBuffer = "";
                document.getElementById("div1").innerHTML = "";

                for (var i = 1; i <= n; i++) {
                    strBuffer += i + "<br />";
                }

                document.getElementById("div1").innerHTML = "Number of Writes: " + n + "<br />";
                document.getElementById("div2").innerHTML = strBuffer;
            }

            function printExeTime(){
                time2 = new Date().getTime();
                executionTime = ((time2 - time1) / 1000).toString();
                document.getElementById("div1").innerHTML += "Execution Time: " + executionTime + " seconds";
            }

        </script>
    </head>
    <body>
        <div id="inputDiv">
            Number Of Writes
            <br/>
            <input type="text" id="numberOfWrites" value="10000">
            </input><input type="button" value="Go" onclick="writeALot();printExeTime()">
        </div>
        <br/>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </body>
</html>

基本上它的作用是从0到文本框中的数字（10000默认值）连接每个数字和字符串上的“<br>”标记，用此字符串替换Div的内容并显示我采取的“时间”来做手术。

我这样做是为了测试生成内容在文档上的打印速度。在尝试此代码时，我注意到了几个问题：

当您第一次点击go按钮时，在页面刷新后，代码的运行速度比下次尝试快得多。对于第二次按下按钮后小于1000的数字，它可能需要两倍于第一次执行相同代码所花费的时间，但是一旦你开始提高数字100000，例如执行时间的差异得到更大。

自己尝试看看，加载页面，按一下按钮，代码会快速执行，然后再次按下按钮，看看差异？如果执行相同的代码，为什么第一次需要这么长时间？

我注意到的另一个问题是，由于某种原因，我测量时间的方式不正常，似乎我在错误的时刻得到一个新的约会，是否有类似事件在内容上被解雇后div被修改了吗？

Answer 1

评论：

// document.getElementById("div2").innerHTML = strBuffer;

看看你是否得到更多相同的时间。第一次，div2上的DOM操作量比任何其他时间都要简单得多，因为它必须：

放弃所有div2内容
制作新内容

第一次点击没有第1步。它还解释了当你有很多元素与较小数字相比时的区别。

Answer 2

由于大多数javascript实现使用的线程模型，你将很难做你想做的事情。当你做紧密循环时，时钟基本上静止不动。我没有关于如何准确计算像你这样的循环的建议。通常如果我需要做某事并在我做的时候更新一些东西，我会使用setTimeout或setInterval

为什么第一次尝试后执行时间会更长？（javaScript性能测试）

2 个答案:

为什么第一次尝试后执行时间会更长？ （javaScript性能测试）

2 个答案:

为什么第一次尝试后执行时间会更长？（javaScript性能测试）