整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前面的预备章节中我们大致了解了如何在服务器上的 Node.js 应用出现问题时，从常规的错误日志、系统/进程指标以及兜底的核心转储这些角度来排查问题。这样就引出了下一个问题：我们知道进程的 CPU/Memory 高，或者拿到了进程 Crash 后的核心转储，要如何去进行分析定位到具体的 JavaScript 代码段。
其实 Chrome 自带的 Devtools，对于 JavaScript 代码的上述 CPU/Memory 问题有着很好的原生解析展示，本节会给大家做一些实用功能和指标的介绍（基于 Chrome v72，不同的版本间使用方式存在差异）。
本书首发在 Github，仓库地址：https://github.com/aliyun-node/Node.js-Troubleshooting-Guide，云栖社区会同步更新。
I. 导出 JS 代码运行状态
当我们通过第一节中提到的系统/进程指标排查发现当前的 Node.js 应用的 CPU 特别高时，首先我们需要去通过一些方式将当前 Node.js 应用一段时间内的 JavaScript 代码运行状况 Dump 出来，这样子才能分析知道 CPU 高的原因。幸运的是，V8 引擎内部实现了一个 CPU Profiler 能够帮助我们完成一段时间内 JS 代码运行状态的导出，目前也有不少成熟的模块或者工具来帮我们完成这样的操作。
v8-profiler 是一个老牌的 Node.js 应用性能分析工具，它可以很方便地帮助开发者导出 JS 代码地运行状态，我们可以在项目目录执行如下命令安装此模块：
npm install v8-profiler --save
接着可以在代码中按照如下方式获取到 5s 内地 JS 代码运行状态：
'use strict';
const v8Profiler=require('v8-profiler');
const title='test';
v8Profiler.startProfiling(title, true);
setTimeout(()=> {
const profiler=v8Profiler.stopProfiling(title);
profiler.delete();
console.log(profiler);
}, 5000);
那么我们可以看到，v8-profiler 模块帮我导出的代码运行状态实际上是一个很大的 JSON 对象，我们可以将这个 JSON 对象序列化为字符串后存储到文件：test.cpuprofile 。注意这里的文件名后缀必须为 .cpuprofile ，否则 Chrome devtools 是不识别的。
注意：v8-profiler 目前也处于年久失修的状态了，在 Node.js 8 和 Node.js 10 上已经无法正确编译安装了，如果你在 8 或者 10 的项目中想进行使用，可以试试看 v8-profiler-next。
II. 分析 CPU Profile 文件
借助于 v8-profiler 拿到我们的 Node.js 应用一段时间内的 JS 代码运行状态后，我们可以将其导入 Chrome devtools 中进行分析展示。
在 Chrome 72 中，分析我们 Dump 出来的 CPU Profile 的方法已经和之前有所不同了，默认工具栏中也不会展示 CPU Profile 的分析页面，我们需要通过点击工具栏右侧的 更多 按钮，然后选择 More tools -> JavaScript Profiler 来进入到 CPU 的分析页面，如下图所示：
选中 JavaScript Profiler 后，在出现的页面上点击 Load 按钮，然后将刚才保存得到的 test.cpuprofile 文件加载进来，就可以看到 Chrome devtools 的解析结果了：
这里默认的视图是 Heavy 视图，在这个视图下，Devtools 会按照对你的应用的影响程度从高到低，将这些函数列举出来，点击展开能够看到这些列举出来的函数的全路径，方便你去代码中对应的位置进行排查。这里解释两个比较重要的指标，以便让大家能更有针对性地进行排查：
像在上述地截图例子中，ejs 模块在线上都应该开启了缓存，所以 ejs 模块的 compile 方法不应该出现在列表中，这显然是一个非常可疑的性能损耗点，需要我们去展开找到原因。
除了 Heavy 视图，Devtools 实际上还给我们提供了火焰图来进行更多维度的展示，点击左上角可以切换：
火焰图按照我们的 CPU 采样时间轴进行展示，那么在这里我们更容易看到我们的 Node.js 应用在采样期间 JS 代码的执行行为，新增的两个指标这边也给大家解释一下其含义：
综上，借助于 Chrome devtools 和能够导出当前 Node.js 应用 Javascript 代码运行状态的模块，我们已经可以比较完备地对应用服务异常时，排查定位到相应的 Node.js 进程 CPU 很高的情况进行排查和定位分析了。在生产实践中，这部分的 JS 代码的性能的分析往往也会用到新项目上线前的性能压测中，有兴趣的同学可以更深入地研究下。
I. 判断是否内存泄漏
在笔者的经历中，内存泄漏问题是 Node.js 在线上运行时出现的问题种类中的重灾区。尤其是三方库自身的 Bug 或者开发者使用不当引起的内存泄漏，会让很多的 Node.js 开发者感到束手无策。本节首先向读者介绍下，什么情况下我们的应用算是有很大的可能在发生内存泄漏呢？
实际上判断我们的线上 Node.js 应用是否有内存泄漏也非常简单：借助于大家各自公司的一些系统和进程监控工具，如果我们发现 Node.js 应用的总内存占用曲线 处于长时间的只增不降 ，并且堆内存按照趋势突破了 堆限制的 70% 了，那么基本上应用 很大可能 产生了泄漏。
当然事无绝对，如果确实应用的访问量（QPS）也在一直增长中，那么内存曲线只增不减也属于正常情况，如果确实因为 QPS 的不断增长导致堆内存超过堆限制的 70% 甚至 90%，此时我们需要考虑的扩容服务器来缓解内存问题。
II. 导出 JS 堆内存快照
如果确认了 Node.js 应用出现了内存泄漏的问题，那么和上面 CPU 的问题一样，我们需要通过一些办法导出 JS 内存快照（堆快照）来进行分析。V8 引擎同样在内部提供了接口可以直接将分配在 V8 堆上的 JS 对象导出来供开发者进行分析，这里我们采用 heapdump 这个模块，首先依旧是执行如下命令进行安装：
npm install heapdump --save
接着可以在代码中按照如下方法使用此模块：
'use sytrict';
const heapdump=require('heapdump');
heapdump.writeSnapshot('./test' + '.heapsnapshot');
这样我们就在当前目录下得到了一个堆快照文件：test.heapsnapshot ，用文本编辑工具打开这个文件，可以看到其依旧是一个很大的 JSON 结构，同样这里的堆快照文件后缀必须为 .heapsnapshot ，否则 Chrome devtools 是不识别的。
III. 分析堆快照
在 Chrome devtools 的工具栏中选择 Memory 即可进入到分析页面，如下图所示：
然后点击页面上的 Load 按钮，选择我们刚才生成 test.heapsnapshot 文件，就可以看到分析结果，如下图所示：
默认的视图其实是一个 Summary 视图，这里的 Constructor 和我们编写 JS 代码时的构造函数并无不同，都是指代此构造函数创建的对象，新版本的 Chrome devtools 中还在构造函数后面增加 * number 的信息，它代表这个构造函数创建的实例的个数。
实际上在堆快照的分析视图中，有两个非常重要的概念需要大家去理解，否则很可能拿到堆快照看着分析结果也无所适从，它们是 Shallow Size 和 Retained Size ，要更好地去理解这两个概念，我们需要先了解 支配树。首先我们看如下简化后的堆快照描述的内存关系图：
这里的 1 为根节点，即 GC 根，那么对于对象 5 来说，如果我们想要让对象 5 回收（即从 GC 根不可达），仅仅去掉对象 4 或者对象 3 对于对象 5 的引用是不够的，因为显然从根节点 1 可以分别从对象 3 或者对象 4 遍历到对象 5。因此我们只有去掉对象 2 才能将对象 5 回收，所以在上面这个图中，对象 5 的直接支配者是对象 2。照着这个思路，我们可以通过一定的算法将上述简化后的堆内存关系图转化为支配树：
对象 1 到对象 8 间的支配关系描述如下：
好了，到这里我们可以开始解释什么是 Shallow Size 和 Retained Size 了，实际上对象的 Shallow Size 就是对象自身被创建时，在 V8 堆上分配的大小，结合上面的例子，即对象 1 到 8 自身的大小。对象的 Retained Size 则是把此对象从堆上拿掉，则 Full GC 后 V8 堆能够释放出的空间大小。同样结合上面的例子，支配树的叶子节点对象 3、对象 7 和对象 8 因为没有任何直接支配对象，因此其 Retained Size 等于其 Shallow Size。
将剩下的非叶子节点可以一一展开，为了篇幅描述方便，SZ_5表示对象 5 的 Shallow Size，RZ_5 表示对象 5 的 Retained Size，那么可以得到如下结果：
这里可以发现，GC 根的 Retained Size 等于堆上所有从此根出发可达对象的 Shallow Size 之和，这和我们的理解预期是相符合的，毕竟将 GC 根从堆上拿掉的话，原本就应当将从此根出发的所有对象都清理掉。
理解了这一点，回到我们最开始看到的默认总览视图中，正常来说，可能的泄漏对象往往其 Retained Size 特别大，我们可以在窗口中依据 Retained Size 进行排序来对那些占据了堆空间绝大部分的对象进行排查：
假如确认了可疑对象，Chrome devtools 中也会给你自动展开方便你去定位到代码段，下面以 NativeModule 这个构造器生成的对象 vm 为例：
这里上半部分是顺序的引用关系，比如 NativeModule 实例 @45655 的 exports 属性指向了对象 @45589，filename 属性则指向一个字符串 "vm.js"；下半部分则是反向的引用关系：NativeModule 实例 @13021 的 _cache 属性指向了 Object 实例 @41103，而 Object 实例 @41103 的 vm 属性指向了 NativeModule 实例 @45655。
如果对这部分展示图表比较晕的可以仔细看下上面的例子，因为找到可疑的泄漏对象，结合上图能看到此对象下的属性和值及其父引用关系链，绝大部分情况下我们就可以定位到生成可疑对象的 JS 代码段了。
实际上除了默认的 Summary 视图，Chrome devtools 还提供了 Containment 和 Statistics 视图，这里再看下 Containment 视图，选择堆快照解析页面的左上角可以进行切换，如下图所示：
这个视图实际上是堆快照解析出来的内存关系图的直接展示，因此相比 Summary 视图，从这个视图中直接查找可疑的泄漏对象相对比较困难。
Chrome devtools 实际上是非常强大的一个工具，本节也只是仅仅介绍了对 CPU Profile 和堆快照解析能力的介绍和常用视图的使用指南，如果你仔细阅读了本节内容，面对服务器上定位到的 Node.js 应用 CPU 飙高或者内存泄漏这样的问题，想必就可以做到心中有数不慌乱了。
作者：奕钧
webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的 依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。
webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
首先我们创建一个目录webpack-css，用npm初始化 ，然后在本地安装 webpack：
mkdir webpack-css
cd webpack-css
npm init -y
npm install webpack webpack-cli --save-dev目录结构、文件和内容如下：
webpack-css
|- package.json
|- /dist
|- index.html
|-webpack.config.js其中dist/index.html文件内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 资源管理</title>
<script src="bundle.js"></script>
</head>
<body>
<div class="css_demo">css 资源管理</div>
</body>
</html>webpack.config.js的文件内容如下：
const path=require('path');
module.exports={
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};package.js的文件内容如下：
{
"name": "webpack-css",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.0",
"style-loader": "^2.0.0",
"webpack": "^5.28.0"
}
}为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：
npm install --save-dev style-loader css-loader修改webpack.config.js添加加载CSS：
const path=require('path')
module.exports={
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
}模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会按逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。
webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。
这使你可以在依赖于此样式的 js 文件中使用 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。
我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中。
在src的目录下创建 style.css 文件，src/style.css文件内容如下：
.css_demo {
color: red;
}在src/index.js的文件中引入style.css：
import './style.css'执行打包命令
npm run build
> webpack-css@1.0.0 build D:\project\mockjs\webpack-css
> webpack
asset bundle.js 3.58 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 8.9 KiB
modules by path ./src/ 679 bytes
./src/index.js + 1 modules 346 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/style.css 333 bytes [built] [code generated]
modules by path ./node_modules/ 8.23 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.28.0 compiled with 1 warning in 1573 ms再次在浏览器中打开 dist/index.html，你应该看到 css 资源管理 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 <style> 标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是我们在 index.js 中 import 的 css 文件中的样式。
效果
注意，在多数情况下，你也可以进行 压缩 CSS，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等。
文讲解怎样用 Node.js 高效地从 Web 爬取数据。
前提条件
本文主要针对具有一定 JavaScript 经验的程序员。如果你对 Web 抓取有深刻的了解，但对 JavaScript 并不熟悉，那么本文仍然能够对你有所帮助。
你将学到
通过本文你将学到：
了解 Node.js
Javascript 是一种简单的现代编程语言，最初是为了向浏览器中的网页添加动态效果。当加载网站后，Javascript 代码由浏览器的 Javascript 引擎运行。为了使 Javascript 与你的浏览器进行交互，浏览器还提供了运行时环境（document、window等）。
这意味着 Javascript 不能直接与计算机资源交互或对其进行操作。例如在 Web 服务器中，服务器必须能够与文件系统进行交互，这样才能读写文件。
Node.js 使 Javascript 不仅能够运行在客户端，而且还可以运行在服务器端。为了做到这一点，其创始人 Ryan Dahl 选择了Google Chrome 浏览器的 v8 Javascript Engine，并将其嵌入到用 C++ 开发的 Node 程序中。所以 Node.js 是一个运行时环境，它允许 Javascript 代码也能在服务器上运行。
与其他语言（例如 C 或 C++）通过多个线程来处理并发性相反，Node.js 利用单个主线程并并在事件循环的帮助下以非阻塞方式执行任务。
要创建一个简单的 Web 服务器非常简单，如下所示：
const http = require('http');
const PORT = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, () => {
console.log(`Server running at PORT:${port}/`);
});如果你已安装了 Node.js，可以试着运行上面的代码。Node.js 非常适合 I/O 密集型程序。
HTTP 客户端：访问 Web
HTTP 客户端是能够将请求发送到服务器，然后接收服务器响应的工具。下面提到的所有工具底的层都是用 HTTP 客户端来访问你要抓取的网站。
Request
Request 是 Javascript 生态中使用最广泛的 HTTP 客户端之一，但是 Request 库的作者已正式声明弃用了。不过这并不意味着它不可用了，相当多的库仍在使用它，并且非常好用。用 Request 发出 HTTP 请求是非常简单的：
const request = require('request')
request('https://www.reddit.com/r/programming.json', function ( error,
response,
body) {
console.error('error:', error)
console.log('body:', body)
})你可以在 Github 上找到 Request 库，安装它非常简单。你还可以在 https://github.com/request/request/issues/3142 找到弃用通知及其含义。
Axios
Axios 是基于 promise 的 HTTP 客户端，可在浏览器和 Node.js 中运行。如果你用 Typescript，那么 axios 会为你覆盖内置类型。通过 Axios 发起 HTTP 请求非常简单，默认情况下它带有 Promise 支持，而不是在 Request 中去使用回调：
const axios = require('axios')
axios
.get('https://www.reddit.com/r/programming.json')
.then((response) => {
console.log(response)
})
.catch((error) => {
console.error(error)
});如果你喜欢 Promises API 的 async/await 语法糖，那么你也可以用，但是由于顶级 await 仍处于 stage 3 ，所以我们只好先用异步函数来代替：
async function getForum() {
try {
const response = await axios.get(
'https://www.reddit.com/r/programming.json'
)
console.log(response)
} catch (error) {
console.error(error)
}
}你所要做的就是调用 getForum！可以在 https://github.com/axios/axios 上找到Axios库。
Superagent
与 Axios 一样，Superagent 是另一个强大的 HTTP 客户端，它支持 Promise 和 async/await 语法糖。它具有像 Axios 这样相当简单的 API，但是 Superagent 由于存在更多的依赖关系并且不那么流行。
用 promise、async/await 或回调向 Superagent 发出HTTP请求看起来像这样：
const superagent = require("superagent")
const forumURL = "https://www.reddit.com/r/programming.json"
// callbacks
superagent
.get(forumURL)
.end((error, response) => {
console.log(response)
})
// promises
superagent
.get(forumURL)
.then((response) => {
console.log(response)
})
.catch((error) => {
console.error(error)
})
// promises with async/await
async function getForum() {
try {
const response = await superagent.get(forumURL)
console.log(response)
} catch (error) {
console.error(error)
}
}可以在 https://github.com/visionmedia/superagent 找到 Superagent。
正则表达式：艰难的路
在没有任何依赖性的情况下，最简单的进行网络抓取的方法是，使用 HTTP 客户端查询网页时，在收到的 HTML 字符串上使用一堆正则表达式。正则表达式不那么灵活，而且很多专业人士和业余爱好者都难以编写正确的正则表达式。
让我们试一试，假设其中有一个带有用户名的标签，我们需要该用户名，这类似于你依赖正则表达式时必须执行的操作
const htmlString = '<label>Username: John Doe</label>'
const result = htmlString.match(/<label>(.+)<\/label>/)
console.log(result[1], result[1].split(": ")[1])
// Username: John Doe, John Doe在 Javascript 中，match() 通常返回一个数组，该数组包含与正则表达式匹配的所有内容。第二个元素（在索引1中）将找到我们想要的 <label> 标记的 textContent 或 innerHTML。但是结果中包含一些不需要的文本（ “Username: “），必须将其删除。
如你所见，对于一个非常简单的用例，步骤和要做的工作都很多。这就是为什么应该依赖 HTML 解析器的原因，我们将在后面讨论。
Cheerio：用于遍历 DOM 的核心 JQuery
Cheerio 是一个高效轻便的库，它使你可以在服务器端使用 JQuery 的丰富而强大的 API。如果你以前用过 JQuery，那么将会对 Cheerio 感到很熟悉，它消除了 DOM 所有不一致和与浏览器相关的功能，并公开了一种有效的 API 来解析和操作 DOM。
const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')
$('h2.title').text('Hello there!')
$('h2').addClass('welcome')
$.html()
// <h2 class="title welcome">Hello there!</h2>如你所见，Cheerio 与 JQuery 用起来非常相似。
但是，尽管它的工作方式不同于网络浏览器，也就这意味着它不能：
因此，如果你尝试爬取的网站或 Web 应用是严重依赖 Javascript 的（例如“单页应用”），那么 Cheerio 并不是最佳选择，你可能不得不依赖稍后讨论的其他选项。
为了展示 Cheerio 的强大功能，我们将尝试在 Reddit 中抓取 r/programming 论坛，尝试获取帖子名称列表。
首先，通过运行以下命令来安装 Cheerio 和 axios：npm install cheerio axios。
然后创建一个名为 crawler.js 的新文件，并复制粘贴以下代码：
const axios = require('axios');
const cheerio = require('cheerio');
const getPostTitles = async () => {
try {
const { data } = await axios.get(
'https://old.reddit.com/r/programming/'
);
const $ = cheerio.load(data);
const postTitles = [];
$('div > p.title > a').each((_idx, el) => {
const postTitle = $(el).text()
postTitles.push(postTitle)
});
return postTitles;
} catch (error) {
throw error;
}
};
getPostTitles()
.then((postTitles) => console.log(postTitles));getPostTitles() 是一个异步函数，将对旧的 reddit 的 r/programming 论坛进行爬取。首先，用带有 axios HTTP 客户端库的简单 HTTP GET 请求获取网站的 HTML，然后用 cheerio.load() 函数将 html 数据输入到 Cheerio 中。
然后在浏览器的 Dev Tools 帮助下，可以获得可以定位所有列表项的选择器。如果你使用过 JQuery，则必须非常熟悉 $('div> p.title> a')。这将得到所有帖子，因为你只希望单独获取每个帖子的标题，所以必须遍历每个帖子，这些操作是在 each() 函数的帮助下完成的。
要从每个标题中提取文本，必须在 Cheerio 的帮助下获取 DOM元素（ el 指代当前元素）。然后在每个元素上调用 text() 能够为你提供文本。
现在，打开终端并运行 node crawler.js，然后你将看到大约存有标题的数组，它会很长。尽管这是一个非常简单的用例，但它展示了 Cheerio 提供的 API 的简单性质。
如果你的用例需要执行 Javascript 并加载外部源，那么以下几个选项将很有帮助。
JSDOM：Node 的 DOM
JSDOM 是在 Node.js 中使用的文档对象模型的纯 Javascript 实现，如前所述，DOM 对 Node 不可用，但是 JSDOM 是最接近的。它或多或少地模仿了浏览器。
由于创建了 DOM，所以可以通过编程与要爬取的 Web 应用或网站进行交互，也可以模拟单击按钮。如果你熟悉 DOM 操作，那么使用 JSDOM 将会非常简单。
const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
'<h2 class="title">Hello world</h2>'
).window
const heading = document.querySelector('.title')
heading.textContent = 'Hello there!'
heading.classList.add('welcome')
heading.innerHTML
// <h2 class="title welcome">Hello there!</h2>代码中用 JSDOM 创建一个 DOM，然后你可以用和操纵浏览器 DOM 相同的方法和属性来操纵该 DOM。
为了演示如何用 JSDOM 与网站进行交互，我们将获得 Reddit r/programming 论坛的第一篇帖子并对其进行投票，然后验证该帖子是否已被投票。
首先运行以下命令来安装 jsdom 和 axios：npm install jsdom axios
然后创建名为 crawler.js的文件，并复制粘贴以下代码：
const { JSDOM } = require("jsdom")
const axios = require('axios')
const upvoteFirstPost = async () => {
try {
const { data } = await axios.get("https://old.reddit.com/r/programming/");
const dom = new JSDOM(data, {
runScripts: "dangerously",
resources: "usable"
});
const { document } = dom.window;
const firstPost = document.querySelector("div > div.midcol > div.arrow");
firstPost.click();
const isUpvoted = firstPost.classList.contains("upmod");
const msg = isUpvoted
? "Post has been upvoted successfully!"
: "The post has not been upvoted!";
return msg;
} catch (error) {
throw error;
}
};
upvoteFirstPost().then(msg => console.log(msg));upvoteFirstPost() 是一个异步函数，它将在 r/programming 中获取第一个帖子，然后对其进行投票。axios 发送 HTTP GET 请求获取指定 URL 的HTML。然后通过先前获取的 HTML 来创建新的 DOM。JSDOM 构造函数把HTML 作为第一个参数，把 option 作为第二个参数，已添加的 2 个 option 项执行以下功能：
创建 DOM 后，用相同的 DOM 方法得到第一篇文章的 upvote 按钮，然后单击。要验证是否确实单击了它，可以检查 classList 中是否有一个名为 upmod 的类。如果存在于 classList 中，则返回一条消息。
打开终端并运行 node crawler.js，然后会看到一个整洁的字符串，该字符串将表明帖子是否被赞过。尽管这个例子很简单，但你可以在这个基础上构建功能强大的东西，例如，一个围绕特定用户的帖子进行投票的机器人。
如果你不喜欢缺乏表达能力的 JSDOM ，并且实践中要依赖于许多此类操作，或者需要重新创建许多不同的 DOM，那么下面将是更好的选择。
Puppeteer：无头浏览器
顾名思义，Puppeteer 允许你以编程方式操纵浏览器，就像操纵木偶一样。它通过为开发人员提供高级 API 来默认控制无头版本的 Chrome。
Puppeteer 比上述工具更有用，因为它可以使你像真正的人在与浏览器进行交互一样对网络进行爬取。这就具备了一些以前没有的可能性：
它还可以在 Web 爬取之外的其他任务中发挥重要作用，例如 UI 测试、辅助性能优化等。
通常你会想要截取网站的屏幕截图，也许是为了了解竞争对手的产品目录，可以用 puppeteer 来做到。首先运行以下命令安装 puppeteer，：npm install puppeteer
这将下载 Chromium 的 bundle 版本，根据操作系统的不同，该版本大约 180 MB 至 300 MB。如果你要禁用此功能。
让我们尝试在 Reddit 中获取 r/programming 论坛的屏幕截图和 PDF，创建一个名为 crawler.js的新文件，然后复制粘贴以下代码：
const puppeteer = require('puppeteer')
async function getVisual() {
try {
const URL = 'https://www.reddit.com/r/programming/'
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(URL)
await page.screenshot({ path: 'screenshot.png' })
await page.pdf({ path: 'page.pdf' })
await browser.close()
} catch (error) {
console.error(error)
}
}
getVisual()getVisual() 是一个异步函数，它将获 URL 变量中 url 对应的屏幕截图和 pdf。首先，通过 puppeteer.launch() 创建浏览器实例，然后创建一个新页面。可以将该页面视为常规浏览器中的选项卡。然后通过以 URL 为参数调用 page.goto() ，将先前创建的页面定向到指定的 URL。最终，浏览器实例与页面一起被销毁。
完成操作并完成页面加载后，将分别使用 page.screenshot() 和 page.pdf() 获取屏幕截图和 pdf。你也可以侦听 javascript load 事件，然后执行这些操作，在生产环境级别下强烈建议这样做。
在终端上运行 node crawler.js ，几秒钟后，你会注意到已经创建了两个文件，分别名为 screenshot.jpg 和 page.pdf。
Nightmare：Puppeteer 的替代者
Nightmare 是类似 Puppeteer 的高级浏览器自动化库，该库使用 Electron，但据说速度是其前身 PhantomJS 的两倍。
如果你在某种程度上不喜欢 Puppeteer 或对 Chromium 捆绑包的大小感到沮丧，那么 nightmare 是一个理想的选择。首先，运行以下命令安装 nightmare 库：npm install nightmare
然后，一旦下载了 nightmare，我们将用它通过 Google 搜索引擎找到 ScrapingBee 的网站。创建一个名为crawler.js的文件，然后将以下代码复制粘贴到其中：
const Nightmare = require('nightmare')
const nightmare = Nightmare()
nightmare
.goto('https://www.google.com/')
.type("input[title='Search']", 'ScrapingBee')
.click("input[value='Google Search']")
.wait('#rso > div:nth-child(1) > div > div > div.r > a')
.evaluate(
() =>
document.querySelector(
'#rso > div:nth-child(1) > div > div > div.r > a'
).href
)
.end()
.then((link) => {
console.log('Scraping Bee Web Link': link)
})
.catch((error) => {
console.error('Search failed:', error)
})首先创建一个 Nighmare 实例，然后通过调用 goto() 将该实例定向到 Google 搜索引擎，加载后，使用其选择器获取搜索框，然后使用搜索框的值（输入标签）更改为“ScrapingBee”。完成后，通过单击 “Google搜索” 按钮提交搜索表单。然后告诉 Nightmare 等到第一个链接加载完毕，一旦完成，它将使用 DOM 方法来获取包含该链接的定位标记的 href 属性的值。
最后，完成所有操作后，链接将打印到控制台。
总结
*请认真填写需求信息，我们会在24小时内与您取得联系。
