事件监听延迟 DOMContentLoaded 的简单使用

假设 globalnav 是一个嵌入式的菜单系统，我们可以使用 DOMContentLoaded 事件来确保在页面加载基础 DOM 后立即添加事件监听器，而不需要等待所有资源加载完成（例如，图片和脚本）。下面是如何实现的代码示例：

1. 使用 DOMContentLoaded 提前监听菜单事件

// 等待基础 DOM 加载完成再初始化 globalnav
document.addEventListener("DOMContentLoaded", function() {
  const menuButton = document.getElementById("globalnav-menu-button");

  if (menuButton) {
    menuButton.addEventListener("click", function() {
      console.log("Globalnav menu clicked!");
      // 这里是打开 globalnav 菜单的逻辑
      openGlobalnavMenu();
    });
  }
});

function openGlobalnavMenu() {
  // globalnav 菜单打开的具体实现
  console.log("Globalnav menu is now open!");
}

在这个例子中，我们将 globalnav 的事件监听器放在 DOMContentLoaded 事件里，这样可以确保在基础的 DOM 加载完成后立即绑定事件，不需要等到页面的所有资源都加载完毕。

2. 使用 requestIdleCallback 延迟非关键任务

如果 globalnav 有一些非关键的初始化任务，可以使用 requestIdleCallback 延迟执行它们，避免阻塞主线程：

document.addEventListener("DOMContentLoaded", function() {
  const menuButton = document.getElementById("globalnav-menu-button");

  if (menuButton) {
    menuButton.addEventListener("click", function() {
      console.log("Globalnav menu clicked!");
      openGlobalnavMenu();
    });
  }

  // 延迟非关键任务的初始化
  if ('requestIdleCallback' in window) {
    requestIdleCallback(initializeNonCriticalTasks);
  } else {
    setTimeout(initializeNonCriticalTasks, 200);
  }
});

function initializeNonCriticalTasks() {
  // 例如，加载非关键的 globalnav 动画或样式
  console.log("Non-critical tasks initialized");
}

使用 DOMContentLoaded 和 requestIdleCallback 的组合，可以确保关键的 globalnav 事件绑定在 DOM 准备好后立即执行，而非关键任务则在页面空闲时进行。