Javascript 定义浏览器性能的函数

Question

在 DOM 加载前后定义 javascript 函数在浏览器性能上是否存在差异？

我通常在 DOM 像这样加载后定义函数

// Example-1

$(document).ready(function(){
  function foo(){
    alert("foo");
  }

  foo();
});

也有人用这种方式

// Example-2

function foo(){
  alert("foo");
}

$(document).ready(function(){
  foo();
});

Theory-1：他们说 Example-1 比 Example-2 慢，因为 Example-1 等待 DOM 加载然后开始定义函数，然后页面开始全功能工作。但是，在加载 DOM 时同时定义的 Example-2 函数中，页面在 DOM 加载时同时变为完整功能。结果，示例 2 在示例 1 尝试定义函数时获得了一些时间。

理论 2：$(document).ready 函数本身很慢。要更快地获得相同的结果，请使用这种方式

(function() {

})();

我找不到与此理论相关的任何内容。有人可以解释一下幕后发生的事情吗？

谢谢。

Answer 1

示例 #1 和示例 #2 之间的任何性能差异都无关紧要。有意义的差异是范围问题。

至于您的“理论 2”函数，您所做的只是创建一个闭包。这和jQuery的.ready()完全不同，相当于等待DOMContentLoaded事件

Answer 2

在那次之后我发现不使用 $(document).ready 定义函数更快。当我在本地时，我无法意识到浏览器已经下载了 jQuery 库并且工作得如此之快。当我上网时，它首先开始下载库，然后定义相关函数。

Javascript 定义浏览器性能的函数

Javascript Function Defining Performance on Browsers

html

javascript

browser

jquery

dom