window.onload 有时失效，往往是因为它在 DOM 加载完成时立即执行，但此时异步获取的数据（如 JSON）尚未返回并渲染；解决方案是将其设为 async 函数，并 await 数据加载后再执行后续逻辑。
`window.onload` 有时失效，往往是因为它在 dom 加载完成时立即执行，但此时异步获取的数据（如 json）尚未返回并渲染；解决方案是将其设为 `async` 函数，并 `await` 数据加载后再执行后续逻辑。
在 Web 开发中，window.onload 是一个常用的事件监听器，用于确保脚本在页面所有资源（包括图片、样式表、子框架等）完全加载后才执行。然而，当你的逻辑依赖异步操作（例如 fetch() 加载 JSON 数据），仅靠 window.onload 并不能保证数据已就绪——因为 onload 只关心资源加载状态，不感知 JavaScript 异步任务的完成。
你当前代码中的关键问题在于：
fetchProducts(); // ❌ 在全局作用域立即调用（无等待）
// ...
window.onload = () => {
filterProduct("all"); // ❌ 此时 products 还未渲染，filter 无效
};即使 DOM 已加载完毕，fetchProducts() 是异步函数，其内部的 await response.json() 和 displayProducts() 执行需要时间。而 window.onload 回调几乎立刻运行，此时 .card 元素尚未被插入到 #products 容器中，导致 filterProduct("all") 查找不到任何 .card 元素，过滤逻辑静默失败。
✅ 正确做法：将 window.onload 回调声明为 async，并 await 数据获取与渲染完成后再执行过滤：
// ✅ 移除全局 fetchProducts() 调用（避免竞态）
// ❌ 删除这一行：fetchProducts();
window.onload = async () => {
try {
await fetchProducts(); // 等待数据获取 + DOM 渲染完成
filterProduct("all"); // 此时 .card 元素已存在，过滤生效
} catch (error) {
console.error("Failed to initialize product page:", error);
}
};? 为什么 await fetchProducts() 有效？
因为 fetchProducts() 内部已使用 await 链式等待：fetch() → response.json() → displayProducts()。只要 displayProducts() 是同步渲染（当前代码正是如此），那么 await fetchProducts() 就能确保整个数据流和 DOM 插入彻底完成。
? 额外建议与注意事项：
- 避免重复初始化：确保 fetchProducts() 不在全局作用域调用，否则可能与 onload 中的调用并发执行，引发重复渲染或 DOM 冲突。
-
增强健壮性：为 #products 元素添加存在性校验，防止因 HTML 缺失 ID 导致静默错误：
function displayProducts(products) { const productContainer = document.getElementById("products"); if (!productContainer) { console.warn("#products element not found. Skipping product render."); return; } // ... 渲染逻辑 } - 现代替代方案（进阶）：若项目支持较新浏览器，可考虑使用 DOMContentLoaded（更快，仅等 DOM 解析完成）配合手动监听资源加载需求；但对于依赖外部 JSON 的场景，onload + async/await 仍是清晰可靠的组合。
总结：window.onload 本身没有“失效”，失效的是我们对它的执行时机假设。通过将其升级为 async 回调并合理编排 await 依赖链，即可精准控制执行顺序，让数据驱动的 UI 初始化稳定可靠。
