← Tất cả bài viết
Cập nhật sản phẩm 3 phút đọc

Browser Tasks: Cách scrape các trang web sử dụng nhiều JavaScript

Hơn 70% trang web hiện đại cần JavaScript để hiển thị nội dung. Dưới đây là cách browser tasks của FourA giúp bạn lấy toàn bộ trang khi các request HTTP trả về kết quả trống.

browserjavascriptpuppeteerproduct-update

Hơn 70% trang web hiện đại dựa vào JavaScript để hiển thị nội dung. Một request HTTP tiêu chuẩn chỉ nhìn thấy lớp vỏ HTML ban đầu. Dữ liệu thực tế chỉ tải sau khi JavaScript thực thi, đó là lý do tại sao các công cụ scraping truyền thống thường trả về các trang trống.

Browser tasks của FourA giải quyết vấn đề này bằng cách chạy một instance Chrome headless thực tế cho mỗi request.

Cách thức hoạt động

Khi bạn gửi một task với type: "browser", FourA sẽ:

  1. Khởi chạy một trình duyệt Chrome headless
  2. Điều hướng đến URL mục tiêu
  3. Đợi JavaScript thực thi và DOM ổn định
  4. Tùy chọn đợi một CSS selector cụ thể xuất hiện
  5. Trả về HTML đã được hiển thị đầy đủ

Toàn bộ quá trình này diễn ra trên cơ sở hạ tầng của FourA. Bạn nhận lại HTML sạch mà không cần cài đặt trình duyệt, không cần cấu hình Puppeteer và không cần quản lý các bản cập nhật Chrome.

Khi nào nên sử dụng Browser Tasks

Sử dụng browser tasks khi:

  • Các ứng dụng đơn trang (React, Vue, Angular)
  • Các trang có nội dung tải chậm (lazy-loaded) (cuộn vô hạn, nút "tải thêm")
  • Các trang web yêu cầu đồng ý cookie hoặc thiết lập JS ban đầu
  • Nội dung nằm sau các luồng xác thực phía client

Tiếp tục sử dụng các task single khi:

  • Các trang HTML được render phía máy chủ (trang tin tức, blog, wiki)
  • Các REST API trả về trực tiếp JSON
  • Tốc độ là ưu tiên hàng đầu (browser tasks mất từ 2 đến 10 giây so với dưới 1 giây đối với các task single)

Ví dụ: Scrape một ứng dụng React

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

Selector waitFor yêu cầu FourA đợi cho đến khi .dashboard-content xuất hiện trong DOM trước khi chụp lại trang. Điều này đảm bảo tất cả dữ liệu bất đồng bộ đã được tải xong.

Mẹo tối ưu hiệu suất

  • Luôn sử dụng waitFor với một selector cụ thể thay vì dựa vào timeout. Cách này vừa nhanh hơn vừa đáng tin cậy hơn.
  • Đặt timeout hợp lý. 15 giây là đủ cho hầu hết các SPA. Chỉ tăng thêm đối với các backend thực sự chậm.
  • Sử dụng single làm mặc định và chỉ chuyển sang browser khi nội dung bị thiếu trong response.

Bước tiếp theo

Chúng tôi đang phát triển thêm các tính năng trình duyệt khác bao gồm chụp ảnh màn hình, tạo PDF và điều hướng nhiều bước (nhấp chuột, cuộn, điền biểu mẫu). Nhưng ngay cả khi không có những tính năng bổ sung đó, browser tasks đã giải quyết được điểm khó khăn phổ biến nhất: lấy nội dung thực tế từ các trang được render bằng JavaScript thay vì một lớp vỏ trống rỗng.

Xem tài liệu hướng dẫn để biết bảng so sánh đầy đủ các loại task.