Question

我知道使用<button onclick="some js code here">并将JS直接写入HTML是非常糟糕的做法。但是，与运行包含的JavaScript文件（例如，当我从外部文件运行一个函数的速度大约快100倍）相比，为什么它会如此缓慢，这让我很烦恼。看起来像是相同的代码，但执行时间却大不相同。

这里有一个例子：

var i, x = 0;

for (i = 0; i < 1000000; i++) {
  x += Math.random() * 10
};

document.getElementById('value').innerHTML = x;

function loop() {
  var x = 0;
  
  for (i = 0; i < 1000000; i++) {
    x += Math.floor(Math.random() * 10)
  };
  
  document.getElementById('value').innerHTML = x;
}

<h1 id="value">value</h1>

<button onclick="var i, x = 0; for(i=0;i<1000000;i++){x += Math.floor(Math.random()*10)}; document.getElementById('value').innerHTML = x; ">test speed</button>

<button onclick="loop()">test speed 2</button>

“测试速度”和“测试速度2”按钮具有相同的代码运行，但第二个按钮运行得更快（从外部js文件运行它的那个）。

Answer 1

大多数JS引擎都能够针对预定义函数进行优化，这就是为什么它的速度要快得多。如果不预先定义函数，浏览器就很难优化JS执行。

Answer 2

我认为没有理由为什么优化按钮中的代码更难。

我猜想JavaScript引擎不会跟踪按钮中的代码。在所有JavaScript引擎和DOM引擎代码分开之后。

这意味着JavaScript必须为每次按钮点击解析和优化它，因为它不知道自上次运行以来它是否已经改变。

当然，编写浏览器的人可以解决这个问题，但为什么呢？ ; - ）

Answer 3

在onclick中设置的

代码字符串需要内部eval，这会导致缓慢。尝试使用eval将loop（）函数内的代码包装起来，你将获得与onclick属性相同的结果

为什么与外部JS脚本文件相比，html <button>标记内的JS代码如此之慢？

3 个答案: