Cách thu thập dữ liệu từ các trang web bằng JavaScript vào năm 2026 | Cách Nstdata
Tóm tắt
Sử dụng fetch() bản địa cộng với Cheerio khi phản hồi đã chứa dữ liệu; một trình duyệt không cần thiết cho HTML tĩnh.
Sử dụng Playwright khi các giá trị cần thiết chỉ xuất hiện sau khi JavaScript chạy, nhưng hãy chờ điều kiện trang có ý nghĩa thay vì một khoảng thời gian tùy ý.
Các bộ thu thập dữ liệu sản xuất cần thời gian giới hạn rõ ràng, kiểm tra trạng thái, xác thực lược đồ, số lần thử lại có giới hạn, giới hạn tỷ lệ, và định danh ổn định—không chỉ là các bộ chọn hoạt động một lần.
Nstdata Crawl phù hợp với điểm mà việc kết xuất, thử lại, phát hiện trang, và chuyển đổi đầu ra trở thành công việc hạ tầng thay vì logic ứng dụng.
Chỉ thu thập các trang công khai hoặc được ủy quyền, tôn trọng các quy tắc và điều khoản áp dụng, và giảm thiểu dữ liệu được giữ lại.
Thu thập dữ liệu web JavaScript bắt đầu với phản hồi, không phải trình duyệt
Thu thập dữ liệu web JavaScript là quá trình yêu cầu một tài nguyên web được phép, trích xuất các trường cần thiết, và trả lại một bản ghi ổn định để sử dụng sau này. Phương pháp đáng tin cậy rẻ nhất được xác định bởi nơi dữ liệu tồn tại: trong HTML ban đầu, trong một tải trọng JSON nhúng, thông qua một API đã được tài liệu, hoặc chỉ trong một trạng thái trình duyệt đã được kết xuất.
Quyết định đó quan trọng hơn sự phổ biến của thư viện. Một trang tĩnh thường có thể được xử lý bằng fetch() và Cheerio của Node.js. Một danh mục được kết xuất bởi khách hàng có thể yêu cầu Playwright. Một quy trình làm việc rộng hoặc lặp lại có thể được phục vụ tốt hơn bằng cách sử dụng một lớp quản lý bộ sưu tập như Nstdata Crawl, trong khi mã JavaScript của bạn giữ quyền sở hữu xác thực và quy tắc kinh doanh.
Hướng dẫn MDN Fetch lưu ý một chế độ thất bại quan trọng: fetch() không từ chối chỉ vì máy chủ trả về lỗi HTTP. Mã của bạn phải kiểm tra hoặc trạng thái một cách rõ ràng trước khi phân tích nội dung. Chi tiết nhỏ này phân tách một bản ghi hợp lệ khỏi một trang 404 được gán thương hiệu bị lưu trữ một cách ngẫu nhiên như dữ liệu sản phẩm.
Trải nghiem Nstdata - Bat dau dung thu mien phi ngay
response.ok
Chọn phương pháp thu thập dữ liệu JavaScript đúng
Phương pháp đúng là tùy chọn ít phức tạp nhất mà nhất quán trả về dữ liệu đầy đủ, hợp lệ.
Hành vi trang
Lựa chọn đầu tiên
Nâng cấp khi
HTML hoàn chỉnh trong phản hồi
fetch() + Cheerio
Các trường cần thiết vắng mặt hoặc đánh dấu thay đổi thường xuyên
Điểm cuối JSON có cấu trúc
Yêu cầu JSON trực tiếp
Điểm cuối không được tài liệu, không ổn định, hoặc quyền truy cập không được ủy quyền
Nội dung xuất hiện sau khi các script chạy
Playwright
Các thao tác trên trình duyệt, hàng đợi, thử lại, hoặc hiện vật chiếm ưu thế trong việc bảo trì
Nhiều trang hoặc phát hiện trang có giới hạn
API thu thập có quản lý
Bạn cần xác thực miền tùy chỉnh vượt ra ngoài việc trích xuất chung
Cheerio tải và truy vấn HTML mà không thực thi JavaScript trên trang. Hướng dẫn tải tài liệu và hướng dẫn bộ chọn chính thức của nó khiến nó trở thành lựa chọn tốt cho các trang được kết xuất từ máy chủ. Playwright điều khiển một trang trình duyệt, và tài liệu tài liệu định vị khuyến nghị các thuộc tính hướng tới người dùng và các hợp đồng rõ ràng thay vì các đường dẫn CSS mong manh.
Sự phân biệt là thiết thực: không khởi động Chromium để phân tích một tiêu đề đã có trong phản hồi, và không tiếp tục thêm bộ chọn Cheerio khi HTML chỉ là một khung ứng dụng trống. Để có thêm bối cảnh, hãy so sánh thu thập dữ liệu và thu thập trước khi quyết định xem công việc của bạn là trích xuất một trang hay phát hiện nhiều trang.
Hướng dẫn chi tiết: Xây dựng một bộ thu thập dữ liệu JavaScript từng bước
Hướng dẫn này trích xuất tiêu đề sách, giá cả và URL chính thống từ Books to Scrape, một trang thực hành công khai được xây dựng cho các bài tập thu thập dữ liệu. Quy trình làm việc được giới hạn cố ý ở một trang.
Phương pháp 1: Thu thập HTML tĩnh với fetch và Cheerio
Bước 1: Tạo dự án
Sử dụng một phiên bản Node.js hiện tại với fetch() tích hợp sẵn và cài đặt Cheerio:
Kịch bản dưới đây kiểm tra trạng thái HTTP, xác thực loại nội dung, phân tích từng thẻ sản phẩm, chuẩn hóa URL, và từ chối kết quả trống. Những kiểm tra này làm cho các lỗi trở nên rõ ràng thay vì trả về một mảng trống có vẻ thành công.
const $ = cheerio.load(await response.text());const books =$("article.product_pod").map((_, card)=>{const link =$(card).find("h3 a");const title = link.attr("title")?.trim();const href = link.attr("href");const priceText =$(card).find(".price_color").text().trim();if(!title ||!href ||!/^£\d+\.\d{2}$/.test(priceText))returnnull;return{ title, priceText,url:newURL(href, target).href};}).get().filter(Boolean);if(books.length===0)thrownewError("Kiểm tra sơ đồ thất bại: không có sách");console.log(JSON.stringify({count: books.length,sample: books[0]},null,2));}finally{clearTimeout(timer);}
Kết quả có hình dạng ổn định ngay cả khi văn bản trình bày xung quanh các thẻ thẻ thay đổi:
{"count":20,"sample":{"title":"A Light in the Attic","priceText":"£51.77","url":"https://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html"}}
Xem đầu ra này như một hợp đồng. Một bản ghi chỉ được chấp nhận khi tiêu đề, định dạng giá và URL tuyệt đối của nó vượt qua xác thực. Một bộ chọn trả về hai mươi nút không phải là bằng chứng rằng các nút đó là hai mươi sản phẩm đúng.
Phương pháp 2: Kết xuất JavaScript với Playwright
Bước 1: Xác nhận rằng việc kết xuất là cần thiết
Mở phản hồi mạng hoặc vô hiệu hóa JavaScript trong trình duyệt thử nghiệm. Nếu các giá trị mục tiêu đã có trong HTML, hãy tiếp tục với Phương pháp 1. Nếu chúng xuất hiện sau một cuộc gọi XHR/fetch, hãy ưu tiên một điểm cuối có cấu trúc có thẩm quyền khi được tài liệu hóa; nếu không, hãy kết xuất trang.
Bước 2: Chờ một điều kiện ngữ nghĩa
Cac locater của Playwright giải quyết dựa trên DOM hiện tại và bao gồm hành vi tự động chờ. Một kịch bản sản xuất vẫn nên thiết lập thời gian chờ điều hướng và chờ đợi bộ sưu tập cụ thể mà nó cần:
import{ chromium }from"playwright";const browser =await chromium.launch({headless:true});try{const page =await browser.newPage();await page.goto("https://books.toscrape.com/",{waitUntil:"domcontentloaded",timeout:30_000,});const cards = page.locator("article.product_pod");await cards.first().waitFor({state:"visible"});const titles =await cards.locator("h3 a").evaluateAll((links)=> links.map((link)=> link.getAttribute("title")?.trim()).filter(Boolean),);if(titles.length===0)thrownewError("Không có tiêu đề hợp lệ");console.log(JSON.stringify({count: titles.length,first: titles[0]}));}finally{await browser.close();}
Tránh waitForTimeout(5000) như một chiến lược sẵn sàng. Nó chậm trên các trang nhanh và vẫn đua trên các trang chậm. Chờ một bộ chứa kết quả, một phản hồi API đã biết hoặc một điều kiện khác có nghĩa là trang đã thực sự sẵn sàng.
Biến tẩy JavaScript thành sản xuất an toàn
An toàn sản xuất đến từ việc giới hạn công việc và kiểm tra ý nghĩa, không phải từ việc gửi yêu cầu nhanh hơn.
Thời gian chờ cho mỗi ranh giới mạng. Bảo vệ DNS, kết nối, phản hồi, điều hướng trình duyệt và lưu trữ hạ nguồn. Một yêu cầu bị kẹt không được chiếm dụng một công nhân không xác định.
Chỉ thử lại các lỗi tạm thời. Thử lại các lỗi mạng được chọn, 429, và một số phản hồi 5xx với thời gian chờ gấp đôi giới hạn và jitter. Không thử lại các bộ chọn không hợp lệ hoặc lỗi xác thực vĩnh viễn.
Hạn chế độ đồng thời theo host. Bắt đầu một cách thận trọng, quan sát độ trễ và tỷ lệ lỗi, và tôn trọng Retry-After khi được cung cấp.
Sử dụng các định danh ổn định. Lưu trữ URL chính thức hoặc ID sản phẩm do trang cung cấp và làm cho các thao tác ghi là idempotent để một lần thử lại không gây trùng lặp bản ghi.
Xác thực nội dung, không chỉ trạng thái. Kiểm tra các trường mong đợi, định dạng giá trị, ngôn ngữ và băng bản ghi tối thiểu/tối đa. Một lỗi 404 mềm thường trả về 200.
Ghi lại bối cảnh hoạt động. Ghi lại host mục tiêu, trạng thái, thời gian, số lần thử lại, phiên bản trình phân tích và kết quả xác thực—không bao giờ bao gồm thông tin xác thực hoặc nội dung phản hồi riêng tư.
Sử dụng Nstdata Crawl khi việc Kết xuất, Thử lại và Tìm kiếm trang trở thành điểm nghẽn
Một trình thu thập dữ liệu JavaScript đã tiến vào công việc hạ tầng khi công việc của các trình duyệt, thử lại, dọn dẹp dữ liệu, trạng thái tác vụ và lưu trữ tài sản tốn nhiều công sức hơn so với các bản ghi bạn thực sự cần. Nstdata Crawl giải quyết nút thắt đó như một lớp thu thập web được quản lý cho các công việc trang công cộng và trang giới hạn. Nó trả về đầu ra có cấu trúc hoặc hình ảnh để dịch vụ Node.js của bạn có thể tập trung vào xác thực miền, loại bỏ trùng lặp, làm phong phú và lưu trữ. Hình thức thanh toán hiện tại hỗ trợ sử dụng theo yêu cầu và đăng ký, với việc xử lý URL và lưu lượng proxy được tính lẻ; xác minh kế hoạch trực tiếp phù hợp với khối lượng công việc của bạn. Nstdata Crawl có thể giảm chi phí hoạt động, nhưng không thay thế các kiểm tra quyền và các bài kiểm tra chấp nhận cụ thể cho doanh nghiệp.
Loại bỏ việc bảo trì đội tàu trình duyệt: Sử dụng kết xuất được quản lý khi việc thực thi JavaScript là cần thiết thay vì tự vận hành các trình duyệt.
Ngăn chặn phát hiện trang không kiểm soát: Thiết lập độ sâu rõ ràng, giới hạn trang, và quy tắc bao gồm/loại trừ để một lần thu thập không thể lang thang vào lịch, trang tìm kiếm, luồng đăng nhập, hoặc các tham số vô hạn.
Cung cấp đầu ra có thể sử dụng cho ứng dụng của bạn: Yêu cầu đại diện mà mã downstream của bạn cần, sau đó xác minh thành công của thân phản hồi và trạng thái tác vụ trước khi chấp nhận nó.
Đo lường chi phí so với các bản ghi đã chấp nhận: Xem xét các mô hình thanh toán hiện tại cho Crawl và so sánh chi phí mỗi bản ghi đã được xác minh, chứ không chỉ là chi phí mỗi yêu cầu.
Thông tin xác thực API là điều kiện tiên quyết cho một yêu cầu Crawl trực tiếp, vì vậy không có đầu ra dịch vụ quản lý nào được hiển thị ở đây. Khi bạn tích hợp nó, hãy giữ khóa trong một trình quản lý bí mật hoặc biến môi trường, không bao giờ trong kiểm soát nguồn.
Giữ cho JavaScript Web Scraping Được Ủy Quyền và Giới Hạn
Việc thu thập dữ liệu web bằng JavaScript có trách nhiệm sử dụng dữ liệu công khai hoặc được ủy quyền cho một mục đích xác định và thu thập chỉ những gì ứng dụng cần. Đọc các điều khoản của trang, thông báo quyền riêng tư và luật áp dụng; tôn trọng các giới hạn hợp đồng và kỹ thuật; và tránh bỏ qua xác thực, tường thu phí, các trang riêng tư, và dữ liệu cá nhân được quy định mà không có căn cứ pháp lý phù hợp.
Giao thức loại trừ Robots tiêu chuẩn hóa các quy tắc robots.txt cho các chương trình thu thập, đồng thời cũng nêu rõ rằng những quy tắc này không phải là ủy quyền truy cập. Xem robots.txt như một tín hiệu hoạt động, không phải như quyền thu thập hoặc tái sử dụng dữ liệu. Định nghĩa giới hạn bảo quản, xóa HTML nguồn còn lại khi nó không còn cần thiết, và giữ quy trình liên lạc hoặc lập hồ sơ ra khỏi các pipeline thu thập chung.
Kết luận: xây dựng trình thu thập nhỏ nhất có thể chống chịu sự thay đổi
Bắt đầu với fetch() và Cheerio, chỉ nâng cấp lên các trang thực sự động cho Playwright, và chuyển các hoạt động kết xuất và thu thập lặp lại sang hạ tầng được quản lý khi việc bảo trì của chúng vượt quá logic miền của bạn. Chạy ví dụ tĩnh, thêm các xác nhận sơ đồ cho mục tiêu được ủy quyền thực sự của bạn, và đo lường các bản ghi đã chấp nhận trước khi tăng khả năng đồng thời. Nếu nhiều nguồn proxy sau này trở thành mối quan tâm vận hành, hãy đánh giá Nstdata Proxy Manager như một lớp định tuyến riêng biệt.
H: JavaScript có tốt cho việc thu thập dữ liệu web không?
Có, JavaScript là một lựa chọn mạnh mẽ cho việc thu thập dữ liệu khi nhóm của bạn đã sử dụng Node.js hoặc khi mục tiêu yêu cầu thực thi qua trình duyệt. fetch() gốc, Cheerio, Playwright, và các thư viện hàng đợi trưởng thành có thể xử lý khối lượng công việc từ một trang tĩnh đến các pipeline thu thập được duy trì.
H: Tôi nên sử dụng Cheerio hay Playwright?
Sử dụng Cheerio khi phản hồi ban đầu chứa HTML cần thiết, và sử dụng Playwright khi JavaScript cần chạy để tạo ra dữ liệu. Xác nhận sự khác biệt đó trước khi chấp nhận chi phí và độ phức tạp của một trình duyệt.
H: Tại sao fetch lại trả về một trang ngay cả khi gặp lỗi 404?
fetch() trả về một Response cho các trạng thái lỗi HTTP, vì vậy mã của bạn phải kiểm tra response.ok hoặc response.status. Nó sẽ từ chối cho một số lỗi mạng lựa chọn, không phải mọi kết quả HTTP không thành công.
H: Làm thế nào để tôi ngăn các selector bị hỏng?
Ưu tiên các thuộc tính ngữ nghĩa, ID ổn định, dữ liệu có cấu trúc và các bộ chọn có phạm vi, sau đó xác thực bản ghi được trích xuất. Giám sát dấu vân tay của lược đồ và đầu ra mẫu sẽ phát hiện sự trôi lặng sớm hơn so với việc kiểm tra số lượng nút.
H: Proxy có làm cho việc thu thập dữ liệu (scraping) hợp pháp không?
Không, proxy chỉ thay đổi hướng đi của mạng; chúng không cấp quyền hoặc xóa bỏ các nghĩa vụ pháp lý, hợp đồng, quyền riêng tư hoặc bản quyền. Chỉ sử dụng proxy trong một chính sách thu thập hợp pháp, được ủy quyền.
H: Khi nào tôi nên sử dụng Nstdata Crawl thay vì trình thu thập dữ liệu của riêng mình?
Sử dụng Nstdata Crawl khi việc hiển thị trình duyệt, khám phá có giới hạn, thử lại, trạng thái tác vụ hoặc chuyển đổi đầu ra trở thành công việc hạ tầng thường xuyên. Giữ lại lớp JavaScript của riêng bạn cho xác thực cụ thể theo miền, danh tính, lưu trữ và thực thi chính sách.
Ivy Lin
Sep. 2nd 2026
110M+ IP that voi ti le truy cap thanh cong 99.9%
Phan hoi trung binh ~0.5s cho tac vu dong thoi cao
Chi tu $0.1/GB
Truy cap ngay cac pool proxy residential, datacenter, IPv6 va ISP cao cap.
