调用$(document).ready()函数的最优方式及性能对比咨询

架构老林

2026-5-15

嘿，这个问题问到点子上了——既关心性能，又在意代码的封装性，咱们一步步说清楚：

性能层面：几乎可以忽略的差异

首先给你吃个定心丸：你提到的这几种写法，在性能上没有本质区别，差异微乎其微到浏览器和用户都完全感知不到。

为什么这么说？因为不管你是传匿名函数：

$(document).ready(function(){ console.log('Hello World'); });

还是传命名函数：

function main(){ console.log('Hello World!'); }
$(document).ready(main);

甚至是IIFE里的命名函数：

(function($){
  function Hello(){ console.log('Hello World!'); }
  $(document).ready(Hello);
})(jQuery);

jQuery内部的处理逻辑都是一样的：把你传入的函数添加到DOM就绪的回调队列中，等DOM树构建完成后依次执行。

哪怕从JS引擎解析的角度看，命名函数可能比匿名函数早一点被解析，但这种差异在实际项目中完全可以忽略——浏览器的JS引擎（比如V8）已经对这类场景做了极致优化，不会影响页面加载或执行速度。

相比性能，你在意的“函数是否暴露到全局”其实是更重要的前端实践问题：

匿名函数直接嵌套：你最开始的写法
```
$(document).ready(function(){
  function Hello(){ console.log('Hello World'); }
  Hello();
});
```
优点是完全不会污染全局作用域，Hello函数只在匿名函数的局部作用域里存在，外部（包括控制台）访问不到，非常安全。
缺点是调试时，这个Hello函数在调用栈里会显示为anonymous（匿名），如果代码复杂，排查问题时会稍微麻烦一点。
老师推荐的全局命名函数：
这种写法的问题确实如你所说——main函数会暴露到全局作用域里，容易和其他脚本的变量/函数名冲突，也不符合“最小化全局污染”的最佳实践，所以你当初没采纳是对的。
IIFE封装的命名函数：你现在习惯的写法
这其实是最优解之一：
- 用IIFE（立即执行函数表达式）创建了一个独立的局部作用域，Hello函数不会暴露到全局，避免了命名冲突；
- 命名函数在调试时，调用栈里会显示Hello这个名字，方便你定位问题；
- 代码结构更清晰，后续如果需要修改Hello的逻辑，也更容易维护。

如果只谈性能，这几种写法没有本质区别；但从代码质量、可维护性和安全性来看，你现在用的IIFE封装命名函数的写法是最推荐的——既兼顾了封装性，又保留了命名函数的调试优势，还完全不会污染全局作用域。

内容的提问来源于stack exchange，提问作者Simon Trichereau