JavaScript Rendering là gì?

Trình duyệt Agent không có rác chạy các quy trình trang công cộng được hỗ trợ trong một trình duyệt đám mây để tự động hóa có thể kiểm tra trạng thái trang được tạo ra bằng JavaScript.

Việc kết xuất JavaScript là công việc mà trình duyệt thực hiện khi mã trang chạy và thay đổi những gì người dùng hoặc hệ thống tự động có thể quan sát. Tài liệu ban đầu có thể chứa văn bản hoàn chỉnh, một bố cục một phần, hoặc một khối ứng dụng nhỏ. Các kịch bản có thể lấy dữ liệu, tạo các nút DOM, gán các trình xử lý sự kiện, và cập nhật giao diện một lần nữa sau một tương tác. Do đó, việc kết xuất mô tả một chuỗi trạng thái hơn là một công tắc nhị phân.

Điều này quan trọng đối với tìm kiếm, kiểm tra, khả năng tiếp cận và thu thập dữ liệu web. Một khách hàng HTTP đơn giản đọc phản hồi ban đầu. Một trình duyệt có thể thực thi trang và phơi bày các trạng thái DOM và hình ảnh sau đó. Không có cái nhìn nào được coi là “trang” một cách phổ quát; mỗi cái nhìn đều trả lời một câu hỏi khác nhau. Phương pháp kiểm tra đúng phụ thuộc vào trạng thái nào chứa thông tin mà nhiệm vụ cần.

Đường ống Trình duyệt Phía Sau Một Trang Được Render

Trình duyệt nhận HTML và bắt đầu xây dựng một cây tài liệu. Nó phát hiện các kiểu, kịch bản và tài nguyên khác, sau đó thực thi các kịch bản theo quy tắc tải của chúng. Mã ứng dụng có thể yêu cầu thêm dữ liệu và sửa đổi DOM. Trình duyệt tính toán lại kiểu dáng và bố cục và vẽ một kết quả hình ảnh. Các đầu vào của người dùng sau đó, bộ đếm thời gian hoặc phản hồi mạng có thể kích hoạt một bản cập nhật khác. Trạng thái được kết xuất là kết quả hiện tại của quá trình liên tục này.

The Tài liệu về DOMContentLoaded mô tả sự kiện được kích hoạt sau khi HTML ban đầu đã được phân tích và các script hoãn đã được thực thi. Nó không hứa hẹn rằng mọi yêu cầu dữ liệu bất đồng bộ đã hoàn tất hoặc rằng tất cả các trạng thái giao diện sau này đều có thể nhìn thấy. Một màn hình có thể hiển thị một khung tải tại một sự kiện và chỉ hiển thị các bản ghi thực tế sau một phản hồi riêng biệt.

Việc hiển thị hình ảnh và khả dụng của DOM có liên quan nhưng khác nhau. Một nút có thể tồn tại trong DOM trong khi bị ẩn, nằm ngoài vùng nhìn, hoặc chưa được vẽ. Một ảnh chụp màn hình cần bố cục và vẽ; một việc lấy văn bản có thể chỉ cần một nút DOM đã được xác minh; một quy trình dữ liệu mạng có thể sử dụng một phản hồi có cấu trúc trước khi nút được tạo ra. Chọn lớp quan sát phù hợp với nhiệm vụ.

Server Rendering, Client Rendering, và Trang lai

Server rendering gửi HTML có ý nghĩa trong phản hồi tài liệu đầu tiên. Client-side rendering gửi mã và thường là một shell, sau đó xây dựng nội dung đáng kể trong trình duyệt. Các framework lai có thể gửi HTML từ máy chủ và sau đó làm tươi nó với các trình xử lý sự kiện hoặc cập nhật nó từ dữ liệu mới. Những nhãn này mô tả kiến trúc, nhưng một tuyến đường đơn có thể kết hợp các phương pháp. Chi tiết sản phẩm có thể được render từ máy chủ trong khi các gợi ý được tải sau đó.

Một chẩn đoán thực tế so sánh phản hồi thô với DOM của trình duyệt. Tìm kiếm một giá trị văn bản mục tiêu trong cả hai. Nếu nó có trong phản hồi, một bộ phân tích đơn giản có thể đủ. Nếu nó chỉ xuất hiện sau đó, hãy kiểm tra các yêu cầu mạng và sự chuyển đổi trạng thái do kịch bản điều khiển. Hướng dẫn SEO JavaScript của Google mô tả cách nội dung JavaScript tạo ra công việc kết xuất bổ sung cho các trình thu thập thông tin, củng cố lý do tại sao HTML thô và nội dung đã được kết xuất phải được xem xét riêng biệt.

Sự phân biệt này cũng ảnh hưởng đến việc kiểm tra. Một bài kiểm tra chỉ xác nhận rằng tài liệu đã tải có thể vượt qua trong khi đường dẫn vẫn hiển thị một vòng quay. Một bài kiểm tra chờ đợi một bản ghi chính xác hoặc thông điệp trạng thái trống gắn liền với ý nghĩa thấy được của người dùng. Một trang có thể hoàn toàn tương tác ở một khu vực trong khi khu vực khác vẫn đang tải, vì vậy một cờ “hoàn tất việc hiển thị” toàn cầu thường quá thô sơ.

Yêu cầu Dữ liệu, Cập nhật DOM và Sự sẵn sàng

JavaScript có thể gọi fetch, nhận JSON, cập nhật trạng thái ứng dụng, và sau đó đặt các bản ghi vào DOM. The Tài liệu API Fetch giải thích giao diện mạng có sẵn cho các script. Phản hồi đó có thể là dữ liệu hữu ích theo cách riêng của nó khi quyền truy cập là phù hợp, nhưng nó có thể không bao gồm định dạng phía máy khách hoặc trạng thái được hợp nhất sau này. Theo dõi trường mục tiêu từ phản hồi qua trạng thái thành phần đến nút hiển thị.

Sự sẵn sàng nên được xác định theo các tiêu chí mục tiêu. Đối với một danh sách, điều đó có thể có nghĩa là một bản ghi với ID ổn định hiện diện hoặc một phần tử không có kết quả rõ ràng xuất hiện. Đối với một bảng điều khiển, điều đó có thể có nghĩa là trạng thái đạt đến một giá trị cuối cùng đã được tài liệu hóa. Đối với một trang có các lô lười biếng, điều đó có thể có nghĩa là điều khiển tiếp tục biến mất sau lô cuối cùng. Một giấc ngủ cố định chỉ đơn thuần trì hoãn việc kiểm tra và có thể quá ngắn hoặc không cần thiết quá dài.

The Giao diện MutationObserver minh họa rằng các thay đổi DOM có thể được quan sát sau sự kiện tài liệu gốc. Các khung tự động hóa thường cung cấp chờ đợi định vị cấp cao hơn, nhưng vấn đề cơ bản vẫn tồn tại: trạng thái trang có thể thay đổi nhiều lần. Xác thực trạng thái bạn cần, sau đó ghi lại hoặc trích xuất kịp thời để các cập nhật không liên quan sau đó không làm rối kết quả.

Những thay đổi về kết xuất cho việc thu thập dữ liệu web

Một bộ phân tích HTML chỉ có thể đọc các đánh dấu nó nhận được. Nếu HTML ban đầu thiếu dữ liệu cần thiết, nó không thể tái tạo các nút được tạo bởi trình duyệt bằng cách chọn lựa khó hơn. Một dịch vụ hiển thị có thể thực thi mã trang và trả về một bức tranh HTML sau đó, trong khi một phiên trình duyệt có thể thực hiện các hành động cần thiết và kiểm tra trạng thái. Một điểm cuối có cấu trúc được cấp phép có thể là một con đường thứ ba khi nó trực tiếp tiết lộ các giá trị mục tiêu. Mỗi con đường có chi phí và yêu cầu xác thực khác nhau.

Cái Giới thiệu về Trình duyệt Agent mô tả một bề mặt trình duyệt đám mây cho tự động hóa trang công cộng. Sử dụng khi việc thực thi hoặc tương tác của trình duyệt là trung tâm của nhiệm vụ. Đối với một URL chỉ cần một phản hồi HTML được hiển thị, hướng dẫn Web Unlocker JS Render có thể trực tiếp hơn. Không sản phẩm nào thay đổi nhu cầu xác định con đường chính xác, chờ nội dung mục tiêu và xác thực đầu ra.

Một trình tạo có thể sản xuất một cái nhìn trang kỹ thuật hoàn chỉnh nhưng vẫn là trang kinh doanh sai. Các màn hình đồng ý, thông báo khu vực và trạng thái truy cập đều có thể hiển thị thành công. Kiểm tra URL cuối cùng, tiêu đề, các khóa bản ghi mong đợi, và ngữ nghĩa trạng thái rỗng trước khi lưu trữ dữ liệu. Nếu các bản ghi tải như một số lô khác nhau, hãy so sánh các khóa duy nhất giữa các lô để phát hiện sự lặp lại hoặc kết quả một phần.

Hiển thị, Truy cập và Độ hiển thị Tìm kiếm

Giao diện được hiển thị bởi trình duyệt vẫn nên cung cấp văn bản và điều khiển có ý nghĩa cho người dùng, bao gồm cả những người sử dụng công nghệ hỗ trợ. Nếu dữ liệu chỉ tồn tại trong một biến kịch bản và không bao giờ trở thành nội dung có thể truy cập, một ảnh chụp màn hình hoặc truy vấn DOM có thể kể một câu chuyện khác so với một cái nhìn của trình đọc màn hình. HTML ngữ nghĩa và các trạng thái tải hoặc lỗi rõ ràng làm cho trang dễ dàng kiểm tra và diễn giải hơn.

Các hệ thống tìm kiếm có thể xử lý JavaScript theo nhiều cách và lịch trình khác nhau. Một chủ sở hữu trang muốn nội dung có thể khám phá nên kiểm tra đầu ra được hiển thị và tuân theo hướng dẫn công cụ tìm kiếm hiện tại thay vì giả định mọi trình thu thập dữ liệu thực thi kịch bản chính xác như trình duyệt của người dùng. Đối với một nhà thu thập, bài học tương tự là kiểm tra môi trường thu thập thực tế. Một ảnh chụp màn hình công cụ phát triển không chứng minh rằng một khách hàng HTTP phía máy chủ nhìn thấy cùng một văn bản.

Cái Trang sản phẩm Trình duyệt Agent giải thích con đường trình duyệt được quản lý, và bài viết liên quan về hiển thị JavaScript cung cấp một giải thích rộng hơn. Sử dụng các khái niệm đó để viết một hợp đồng trạng thái cụ thể cho con đường: nội dung ban đầu, sự kiện hoặc tương tác thêm dữ liệu, dấu hiệu sẵn sàng, và các trường chính xác mà người sử dụng cần.

Kết luận

Hiển thị JavaScript là quá trình thực thi và trình bày liên tục của trình duyệt trên một trang. HTML ban đầu, dữ liệu bất đồng bộ, cập nhật DOM, và việc vẽ hình ảnh là những giai đoạn khác nhau. Một quy trình làm việc đáng tin cậy xác định giai đoạn nào sở hữu thông tin mục tiêu và xác minh trạng thái đó một cách trực tiếp thay vì giả định rằng một sự kiện tải có nghĩa là toàn bộ trang đã hoàn tất.