← 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% website hiện đại dựa vào JavaScript để kết xuất nội dung. Một HTTP request tiêu chuẩn chỉ thấy khung HTML ban đầu. Dữ liệu thực tế chỉ tải sau khi JavaScript thực thi, đó là lý do các công cụ scraping truyền thống trả về các trang trống.

Các task trình duyệt của FourA giải quyết vấn đề này bằng cách chạy một phiên bản headless Chrome thực sự cho mỗi request.

Cơ chế hoạt động

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

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

Toàn bộ quá trình diễn ra trên 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 dùng task trình duyệt

Sử dụng task trình duyệt khi:

  • Các ứng dụng Single-page application (React, Vue, Angular)
  • Các trang có nội dung tải chậm (lazy-loaded), cuộn vô tận (infinite scroll), nút "tải thêm" ("load more")
  • Các trang web yêu cầu chấp thuận 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 dùng các task single khi:

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

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

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

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

Mẹo tối ưu hiệu năng

  • 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 lên đối với các backend thực sự chậm.
  • Dùng single làm mặc định và chỉ chuyển sang browser khi nội dung bị thiếu trong response.

Kế hoạch tiếp theo

Chúng tôi đang phát triển thêm các khả năng trình duyệt bổ sung bao gồm chụp ảnh màn hình, tạo PDF và điều hướng nhiều bước (click, cuộn, điền biểu mẫu). Nhưng ngay cả khi chưa có các tính năng đó, các task trình duyệt đã xử lý được vấn đề phổ biến nhất: lấy nội dung thực tế từ các trang kết xuất bằng JavaScript thay vì một khung trang trống.

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