使用window.onload初始化指向DOM元素的变量是否为最佳方案？

你给出的这段代码存在明显问题，不是DOM相关变量的合适初始化方式，具体问题如下：

• 存在语法错误：window.onload 缺少赋值符号，正确写法应为 window.onload = (e) => {...}，当前写法运行时会直接抛出语法错误，回调逻辑根本不会执行。
• 调用时机风险：全局变量 myImg 初始值为 undefined，如果 doSomething 函数在 window.onload 触发前被调用，此时操作 myImg 的属性会直接抛出 Cannot read properties of undefined 类型的运行时错误。
• 触发时机延后：window.onload 需要等待页面所有资源（图片、样式表、iframe等）全部加载完成才会触发，如果只是需要获取DOM元素，完全不需要等待这么久，变量可用时间被不必要地延后。
• 事件冲突风险：直接给 window.onload 赋值会覆盖之前绑定的同事件回调，如果页面其他位置也有window.onload 赋值逻辑，只有最后一个会生效，冲突概率很高。

推荐按实际场景选择以下方案：

1. 按需获取（优先选择）
   如果doSomething不是高频调用函数，直接在使用时获取元素即可，不需要提前缓存，天然避免了加载时机问题和全局变量污染：

function doSomething(a, b, c) {
  const myImg = document.getElementById("my_img_1");
  if (!myImg) return; // 非空校验，避免元素不存在时报错
  // 后续操作myImg的逻辑
}

2. DOMContentLoaded绑定+作用域封装
   如果确实需要提前缓存元素复用，不要使用window.onload，改用DOMContentLoaded事件（DOM树解析完成就触发，不需要等其他资源加载），同时用addEventListener绑定避免覆盖其他回调：

let myImg;
document.addEventListener('DOMContentLoaded', () => {
  myImg = document.getElementById("my_img_1");
});

function doSomething(a, b, c) {
  // 每次使用前做非空校验
  if (!myImg) {
    console.warn('myImg元素未初始化或不存在');
    return;
  }
  // 操作myImg的逻辑
}

3. 懒初始化（适配高频调用场景）
   对于调用频率很高的函数，可以做懒初始化，第一次调用时再获取元素缓存，配合可选链做异常兜底：

let myImg;

function doSomething(a, b, c) {
  // 首次调用初始化，后续直接用缓存
  myImg = myImg || document.getElementById("my_img_1");
  // 可选链避免属性读取报错
  const imgSrc = myImg?.src;
  if (!imgSrc) return;
  // 后续逻辑
}

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