How to replace JSDOM with cheerio for Readability

JSDOM is an implementation that simulates Web standards for DOM and HTML in a Node.js environment. It can parse HTML documents, execute scripts, and handle web content as if in a browser. JSDOM is relatively heavy because it is not merely a simple HTML parser but provides a full browser environment.

Cheerio is a fast, flexible, and simple-to-implement API, similar to jQuery, for parsing, manipulating, and rendering HTML documents. Cheerio is primarily used on the server side, with the advantage of fast execution and low resource consumption.

How to Replace JSDOM with Cheerio

1. Parsing HTML

JSDOM: Using JSDOM to parse HTML documents typically requires creating a new JSDOM instance.

javascript
const { JSDOM } = require("jsdom");
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

Cheerio: In Cheerio, we use the load method to load HTML documents.

javascript
const cheerio = require("cheerio");
const $ = cheerio.load(`<p>Hello world</p>`);
console.log($("p").text()); // "Hello world"

2. Manipulating DOM

JSDOM: In JSDOM, you can manipulate nodes using standard DOM APIs as in a browser.

javascript
const element = dom.window.document.createElement("span");
element.textContent = "New element";
dom.window.document.body.appendChild(element);

Cheerio: Cheerio provides APIs similar to jQuery.

javascript
$("body").append("<span>New element</span>");

3. Performance Considerations

Since JSDOM requires simulating a full browser environment, its performance and resource consumption are naturally higher than Cheerio. When processing large data volumes or requiring high performance, using Cheerio is more efficient.

Practical Example

Suppose we need to scrape and process web page content on the server side; we can compare JSDOM and Cheerio usage.

Using JSDOM

javascript
const { JSDOM } = require("jsdom");
const axios = require("axios");

axios.get("https://example.com").then(response => {
  const dom = new JSDOM(response.data);
  const headlines = dom.window.document.querySelectorAll("h1");
  headlines.forEach(item => console.log(item.textContent));
});

Using Cheerio

javascript
const cheerio = require("cheerio");
const axios = require("axios");

axios.get("https://example.com").then(response => {
  const $ = cheerio.load(response.data);
  $("h1").each(function() {
    console.log($(this).text());
  });
});

In this example, the Cheerio code is more concise and runs more efficiently. Therefore, replacing JSDOM with Cheerio can effectively improve application performance and readability when a full browser environment is not required.

2024年8月10日 01:15 回复

1个答案

How to Replace JSDOM with Cheerio

Practical Example

你的答案