在前端开发中，需要等待 DOM 树加载完毕后再执行一些 JavaScript 代码。虽然可以使用 window.onload 事件来实现此目的，但是该事件只有在所有资源（包括图片、CSS 文件、JS 文件等）都加载完成后才会触发，因此可能会导致页面长时间处于卡顿状态。为了避免这种情况，我们可以使用一个轻量级的 npm 包 domready。
安装
在终端中运行以下命令安装 domready 包：
npm install domready --save
使用
在 JavaScript 中引入 domready 包，并调用它提供的 domready() 方法即可等待 DOM 加载完成。
const domready = require('domready');
domready(function() {
// DOM 加载完成后执行的代码
});如果你使用的是 ES6 模块，则可以使用以下方式引入：
import domready from 'domready';
domready(() => {
// DOM 加载完成后执行的代码
});示例
下面是一个简单的示例，在页面上显示当前时间。通过 domready 包，我们可以确保 JavaScript 代码在 DOM 加载完成后才执行，从而避免页面长时间处于卡顿状态。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------- ---------- ------- ------ ---- ---------------- ------- ------------------------ ------- -------
-- -------------------- ---- -------
------ -------- ---- -----------
----------- -- -
----- -------- - --------------------------------
-------------- -- -
----- --- - --- -------
------------------ - -------------------------
-- ------
---指导意义
通过使用 domready 包，可以确保 JavaScript 代码在 DOM 加载完成后才执行，从而避免页面长时间处于卡顿状态。同时，该包体积非常小，仅有几行代码，因此不会增加网页加载时间。这对于提高用户体验、优化网站性能非常有帮助。
除了 domready 包外，还有其他一些类似的 npm 包，比如 ready 和 on-dom-ready 等。它们的功能类似，可以根据实际需求选择合适的包来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35694