Web Scraping với JavaScript và Node.js: Cheerio vs Puppeteer

Những điểm chính:

• Quyết định đầu tiên là tĩnh hay động, và nó xác định toàn bộ chuỗi công cụ của bạn. Nếu dữ liệu có trong HTML ban đầu, hãy phân tích cú pháp nó bằng Cheerio; nếu JavaScript xây dựng nó, bạn cần một trình duyệt thực như Puppeteer.
• Cheerio là một trình phân tích cú pháp, không phải một trình duyệt - và đó chính là điều quan trọng. Nó tải HTML và cung cấp cho bạn các lựa chọn kiểu jQuery với tốc độ gốc, không có chi phí xử lý, cho các trang có nội dung đã có trong mã.
• Puppeteer thực hiện việc kết xuất, vì vậy nó thấy những gì người dùng thấy. Đối với các trang được kết xuất từ phía khách hàng, cuộn vô hạn và nội dung phía sau các tương tác, Puppeteer thực thi JavaScript và cung cấp cho bạn DOM đã hoàn thiện.
• Cả hai đều chạy trên cùng một phiên Scrapeless. Lấy HTML thông qua trình duyệt đám mây, sau đó hoặc phân tích cú pháp nó bằng Cheerio hoặc trích xuất trực tiếp bằng Puppeteer - cùng một phương pháp chống phát hiện và đường truyền dân cư ở bên dưới.
• Đã được xác nhận bên cạnh nhau. Trang danh mục giống nhau dưới đây tạo ra 20 mục thông qua Cheerio và 20 thông qua Puppeteer - bằng chứng rằng hai con đường đồng ý khi nội dung có sẵn.
• Miễn phí để bắt đầu. Tài khoản Scrapeless mới bao gồm thời gian chạy Trình duyệt Scraping miễn phí - đăng ký tại app.scrapeless.com.

Giới thiệu: chọn công cụ phù hợp cho trang

JavaScript và Node.js là lựa chọn tự nhiên cho việc thu thập dữ liệu web - cùng một ngôn ngữ mà trình duyệt chạy, với hệ sinh thái trưởng thành cho HTTP và HTML. Nhưng "thu thập với Node" ngay lập tức chia thành hai công việc rất khác nhau, và chọn sai cái nào sẽ lãng phí công sức.

Nếu dữ liệu bạn muốn đã có trong HTML ban đầu của trang, bạn không cần một trình duyệt - bạn cần một trình phân tích cú pháp nhanh. Đó là Cheerio: tải mã, chạy các bộ chọn, xong. Nếu dữ liệu được xây dựng bởi JavaScript sau khi tải - một ứng dụng React, một nguồn cấp dữ liệu cuộn vô hạn, nội dung chỉ xuất hiện sau một cú nhấp chuột - thì một trình phân tích cú pháp sẽ không thấy gì, vì HTML mà nó phân tích là một lớp vỏ trống. Đó là lúc Puppeteer (hoặc Playwright) vào cuộc: nó chạy JavaScript của trang và cung cấp cho bạn DOM đã kết xuất.

Vấn đề thực tiễn ở cả hai là truy cập: các trang web thực sẽ nhận diện dấu vân tay, giới hạn tỷ lệ và kiểm soát địa lý. Hướng dẫn này chạy cả hai phương pháp trên Trình duyệt Scraping Scrapeless - một trình duyệt đám mây chống phát hiện - vì vậy việc lấy dữ liệu thành công, sau đó chỉ ra khi nào nên sử dụng Cheerio và khi nào cho Puppeteer. Cả hai con đường dưới đây đều được thực hiện trực tiếp trên cùng một trang.

Tĩnh hay động: làm thế nào để phân biệt

Kiểm tra nhanh: xem nguồn trang (không phải công cụ kiểm tra). Nếu dữ liệu có trong HTML thô, Cheerio là đủ. Nếu mã nguồn là một lớp vỏ gần như trống và nội dung chỉ xuất hiện trong DOM trực tiếp, bạn cần Puppeteer.

Tại sao chọn Trình duyệt Scraping Scrapeless

Trình duyệt Scraping Scrapeless là một trình duyệt đám mây tùy chỉnh, chống phát hiện, được thiết kế cho các trình thu thập dữ liệu web và các tác nhân AI. Đối với việc thu thập dữ liệu bằng Node, nó mang lại:

• Một kết nối Puppeteer tiêu chuẩn - Puppeteer.connect() trả về một Browser thông thường, do đó mã của bạn không bị thay đổi.
• Kết xuất JS phía đám mây - các trang động thực tế xây dựng nội dung của chúng, vì vậy cả page.content() (cho Cheerio) và trích xuất trực tiếp đều hoạt động.
• Địa chỉ proxy dân cư tại hơn 195 quốc gia - giữ egress để việc lấy dữ liệu thành công và duy trì nhất quán.
• Chống phát hiện dấu vân tay - phiên được đọc như một trình duyệt thực, vì vậy các trang được kết xuất thay vì thách thức.
• Bảo toàn phiên - giữ cho cookies luôn hoạt động trong suốt một phiên chạy nhiều trang.

Lấy mã API của bạn trên kế hoạch miễn phí tại app.scrapeless.com.

Yêu cầu trước khi cài đặt

• Node.js 18 hoặc mới hơn
• Tài khoản Scrapeless và mã API - đăng ký tại app.scrapeless.com
• Kiến thức cơ bản về các bộ chọn CSS

Cài đặt

npm install @scrapeless-ai/sdk puppeteer-core cheerio

export SCRAPELESS_API_KEY="your_api_token_here"

Kết nối

import { Puppeteer } from '@scrapeless-ai/sdk';

const browser = await Puppeteer.connect({
  apiKey: process.env.SCRAPELESS_API_KEY,
  sessionName: 'js-node-scraping',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();
await page.goto('https://books.toscrape.com/', {
  waitUntil: 'domcontentloaded',
  timeout: 60000,
});

Đường dẫn A - Cheerio (phân tích cú pháp tĩnh)

Khi nội dung có trong HTML, hãy lấy mã bằng page.content() và phân tích cú pháp nó bằng Cheerio. API bộ chọn có kiểu jQuery, vì vậy nó đọc một cách tự nhiên:

import * as cheerio from 'cheerio';

const html = await page.content();
const $ = cheerio.load(html);

const titles = $('.product_pod h3 a')
  .map((i, el) => $(el).attr('title'))
  .get();

console.log(titles.length, '—', titles[0]);
// 20 — A Light in the Attic

Cheerio không hiển thị bất kỳ điều gì - nó chỉ phân tích chuỗi mà bạn đưa cho nó. Điều này làm cho nó nhanh và lý tưởng khi bạn đã có HTML. Bạn cũng có thể sử dụng nó trên HTML từ bất kỳ nguồn nào, không chỉ trong trình duyệt.

Nhận mã API của bạn trong gói miễn phí: app.scrapeless.com

Đường dẫn B - Puppeteer (trích xuất động)

Khi nội dung được xây dựng bằng JavaScript, trích xuất nó từ DOM trực tiếp trong trang đã được hiển thị. Cùng bộ chọn, nhưng được đánh giá trong trình duyệt sau khi các tập lệnh của trang đã chạy:

const titles = await page.evaluate(() =>
  [...document.querySelectorAll('.product_pod h3 a')].map((a) => a.getAttribute('title')),
);

console.log(titles.length, '—', titles[0]);
// 20 — A Light in the Attic

Trên cùng một trang danh mục, cả hai đường dẫn đều trả về cùng 20 tiêu đề - vì nội dung có trong HTML, cả hai phương pháp đều hoạt động. Sự khác biệt thể hiện rõ trên một trang được trình bày bởi khách hàng: Cheerio trên HTML thô sẽ không tìm thấy gì, trong khi đường dẫn Puppeteer vẫn trả lại các mục vì trang đã được hiển thị trước.

Đối với nội dung động tải khi tương tác, hãy điều khiển trang trước khi trích xuất - cuộn để tải nội dung lười, nhấp để hiển thị, sau đó waitForSelector trên kết quả:

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForSelector('.product_pod', { timeout: 10000 });
// ...sau đó trích xuất như ở trên

Lựa chọn giữa chúng

• Nội dung có trong HTML thô? Sử dụng Cheerio - nó nhanh hơn và đơn giản hơn.
• Nội dung được xây dựng bởi JavaScript, cuộn vô hạn, hoặc chỉ hiển thị khi nhấp? Sử dụng Puppeteer để vẽ, sau đó trích xuất.
• Cả hai trên một trang? Phổ biến - vẽ bằng Puppeteer, sau đó chuyển page.content() cho Cheerio nếu bạn thích ergonomics bộ chọn của nó cho các phần tĩnh.

Những gì bạn nhận được

Cả hai đường dẫn đều tạo ra cùng một danh sách phẳng khi dữ liệu có mặt:

{
  "count": 20,
  "first": "A Light in the Attic"
}
// Ghi chép thực tế: cả Cheerio và Puppeteer đều trả về 20 tiêu đề từ cùng một trang.

Một vài quan sát chân thành:

• Đừng vẽ khi bạn không cần phải. Nếu HTML đã có dữ liệu, Cheerio bỏ qua hoàn toàn chi phí vẽ.
• Vẽ khi nguồn là một shell. Một HTML thô gần như rỗng với một DOM trực tiếp đã được điền là tín hiệu để sử dụng Puppeteer.
• Chờ nội dung, không phải đồng hồ. Đối với các trang động, waitForSelector tốt hơn setTimeout cố định.
• Bộ chọn là kiến thức chung. Các bộ chọn CSS giống nhau hoạt động trong Cheerio và trong querySelectorAll, vì vậy việc di chuyển giữa các đường dẫn là rẻ.

Kết luận: một quyết định, hai con đường sạch sẽ

Web scraping với JavaScript và Node.js chỉ cần một cuộc gọi sớm - dữ liệu có trong HTML hay được xây dựng bởi JavaScript? Cheerio xử lý trường hợp đầu tiên với tốc độ phân tích; Puppeteer xử lý trường hợp thứ hai bằng cách vẽ trang. Chạy cả hai trên Scrapeless Scraping Browser có nghĩa là việc lấy dữ liệu thành công theo cả hai cách, với lối ra nhà ở và chống phát hiện bên dưới. Để có quy trình làm việc chống bot sâu hơn, hãy xem hướng dẫn Scrapling + Scrapeless; trang sản phẩm Scraping Browser và tài liệu bao gồm toàn bộ bề mặt SDK. Kiểm tra HTML thô trước, với Cheerio khi có thể và Puppeteer khi cần, và chờ nội dung chứ không phải đồng hồ.

Sẵn sàng để xây dựng pipeline dữ liệu hỗ trợ AI của bạn?

Tham gia cộng đồng của chúng tôi để yêu cầu một gói miễn phí và kết nối với các nhà phát triển đang xây dựng các trình thu thập dữ liệu Node: Discord · Telegram.

Đăng ký tại app.scrapeless.com để nhận runtime Scraping Browser miễn phí và áp dụng các mẫu ở trên cho các trang tĩnh và động mà quy trình làm việc của bạn cần. Xem giá cả để mở rộng.

Câu hỏi thường gặp

Q: Khi nào tôi nên sử dụng Cheerio thay vì Puppeteer?
Khi dữ liệu đã có trong HTML ban đầu của trang. Cheerio chỉ phân tích đánh dấu, vì vậy nó nhanh hơn và đơn giản hơn - không cần vẽ. Sử dụng Puppeteer khi JavaScript xây dựng nội dung.

Q: Làm thế nào để tôi biết một trang là tĩnh hay động?
Xem mã nguồn trang thô (không phải trình kiểm tra). Nếu dữ liệu có trong nguồn, nó tĩnh - Cheerio hoạt động. Nếu nguồn gần như rỗng và nội dung chỉ xuất hiện trong DOM trực tiếp, nó động - sử dụng Puppeteer.

Q: Tôi có thể sử dụng cả hai trên cùng một trang không?
Có. Kết xuất với Puppeteer, sau đó truyền page.content() cho Cheerio nếu bạn thích tính năng chọn lựa của nó cho các phần tĩnh.

Q: Cheerio so với Playwright so với Puppeteer — cái nào?
Cheerio cho phân tích tĩnh. Puppeteer hoặc Playwright (cả hai đều là trình duyệt đầy đủ) cho kết xuất động — chọn cái nào mà ngăn xếp của bạn đã sử dụng; phiên Scrapeless hoạt động với cả hai qua CDP.

Q: Tôi có cần một proxy không?
Đối với các trang tĩnh công cộng, thường thì không — nhưng gán proxyCountry sẽ cung cấp một địa chỉ IP dân cư ổn định mà các trang web thực xem như một khách truy cập bình thường, điều này càng quan trọng hơn khi bạn mở rộng quy mô.

Q: Tôi có thể chạy điều này mà không có đại lý AI không?
Có. Đây là SDK Scrapeless cộng với Puppeteer và Cheerio đơn giản — không cần đại lý.