定义浏览器性能的 Javascript 函数答案

【问题标题】：Javascript Function Defining Performance on Browsers定义浏览器性能的 Javascript 函数
【发布时间】：2021-04-03 05:02:15
【问题描述】：

在加载 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 加载然后开始定义函数，然后页面变成全功能工作。但是，在示例 2 中，在加载 DOM 的同时定义了函数，因此页面在加载 DOM 的同时成为完整功能。结果，示例 2 在示例 1 尝试定义函数时获得了一些时间。

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

(function() {

})();

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

谢谢。

【问题讨论】：

函数声明造成的时间损失可以忽略不计。这段代码有过早优化的味道
A document.ready 本质上是绑定到浏览器在解析 DOM 后发出的事件，而不是在加载图像/视频/其他资源时。一旦该事件发生，事件处理程序就会被执行并且你的逻辑就会发生。顾名思义，立即调用函数表达式 (IIFE) 会立即执行。没有延迟。这两种方法不是苹果对苹果。
更重要的可能是所谓的'render-blocking javascript'。

标签： javascript html jquery dom browser

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：