前言
在前端开发中，DOM 操作是必不可少的一部分。而 jsdom 是一个实现了浏览器端的 DOM 操作方式的 Node.js 模块，它提供了一种类似于在浏览器中操作 DOM 的方式，非常适合在 Node.js 环境下进行前端自动化测试、网站爬虫、单元测试等等操作。
然而，jsdom 在默认情况下会下载并执行网页中所有的 JavaScript 代码，这对于想要测试页面效果的 Node.js 应用来说是非常不可取的，因为这意味着测试代码会运行网页上的 JavaScript 代码，导致测试结果不准确。
我们可以使用 @inikulin/jsdom-only-external-scripts 包，使得 jsdom 只加载网页中的外部 JavaScript 文件，从而显著提升 jsdom 的性能并避免运行网页上的 JavaScript 代码。接下来，我们将介绍如何使用 @inikulin/jsdom-only-external-scripts 包。
安装 @inikulin/jsdom-only-external-scripts
在开始使用 @inikulin/jsdom-only-external-scripts 之前，需要先安装 jsdom。
使用以下命令安装 jsdom：
npm install jsdom
然后，安装 @inikulin/jsdom-only-external-scripts：
npm install @inikulin/jsdom-only-external-scripts
使用 @inikulin/jsdom-only-external-scripts
使用 @inikulin/jsdom-only-external-scripts 相对于使用 jsdom 来说，只需要增加一行代码即可。
-- -------------------- ---- -------
----- ----- - -----------------
----- - ----- - - ------
----- - ------------------- - - -------------------------------------------------
----- --- - ---------------------------
------------------ -
---------- ---------
----------- --------------
-- ------------------------- ------- -- -
-- ----- -
-------------------
-------
-
--------------------------------------------------------------------------
---------------
----运行上述代码，你会在控制台看到网页的标题。
参数说明
onlyExternalScripts 接受一个回调函数作为参数，回调函数会在 jsdom 完成页面解析后被调用。
onlyExternalScripts 函数还可以传递 jsdom 的可选参数。在上述示例中，我们使用了两个可选参数：
- resources：用于指定资源，如图片、样式表及 JavaScript 文件等是否需要加载。当值为 "usable" 时，jsdom 会等待资源加载完成后再执行回调函数。
- runScripts：用于指定是否执行网页中的 JavaScript 代码。当值为 "dangerously" 时会运行网页中的 JavaScript 代码。
示例代码
下面的示例代码演示了如何使用 @inikulin/jsdom-only-external-scripts 来获取网页中的所有外部 JavaScript 文件 URL。
-- -------------------- ---- -------
----- ----- - -----------------
----- - ----- - - ------
----- - ------------------- - - -------------------------------------------------
----- --- - ---------------------------
------------------ -
---------- ---------
-- ------------------------- ------- -- -
-- ----- -
-------------------
-------
-
----- ---- - -----------------------------------------------------------
----------- -- ------------
------------------
---------------
----在上述示例代码中，我们使用 querySelectorAll 方法选择了所有带有 src 属性的 <script> 标签，并获取它们的 src 属性，最后打印到控制台。
总结
使用 @inikulin/jsdom-only-external-scripts 包可以减少 jsdom 的性能消耗，从而使你的 Node.js 应用中的前端自动化测试、网站爬虫、单元测试等操作更加准确，同时也可以避免运行网页中的 JavaScript 代码带来的不必要风险。在实际使用中，我们只需要增加一行代码即可，实现起来非常简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd126