Máy chủ đột biến bên trong html
Đây là bài đăng số 10 của loạt bài dành riêng cho việc khám phá JavaScript và các thành phần xây dựng của nó. Trong quá trình xác định và mô tả các yếu tố cốt lõi, chúng tôi cũng chia sẻ một số quy tắc chung mà chúng tôi sử dụng khi xây dựng SessionStack, một ứng dụng JavaScript cần phải mạnh mẽ và có hiệu suất cao để giúp người dùng xem và tái tạo các lỗi ứng dụng web của họ theo thời gian thực Nếu bạn bỏ lỡ các chương trước, bạn có thể tìm thấy chúng ở đây
Các ứng dụng web ngày càng nặng về phía máy khách, do nhiều lý do như nhu cầu về giao diện người dùng phong phú hơn để phù hợp với những ứng dụng phức tạp hơn phải cung cấp, tính toán thời gian thực, v.v. Độ phức tạp tăng lên khiến việc biết chính xác trạng thái của giao diện người dùng tại mọi thời điểm nhất định trong vòng đời của ứng dụng web của bạn trở nên khó khăn hơn Điều này thậm chí còn khó hơn nếu bạn đang xây dựng một số loại khung hoặc chỉ một thư viện chẳng hạn, phải phản ứng và thực hiện một số hành động nhất định phụ thuộc vào DOM Tổng quanMutingObserver là một API Web được cung cấp bởi các trình duyệt hiện đại để phát hiện các thay đổi trong DOM. Với API này, người ta có thể nghe các nút mới được thêm hoặc xóa, các thay đổi thuộc tính hoặc thay đổi nội dung văn bản của các nút văn bản Tại sao bạn muốn làm điều đó? Có khá nhiều trường hợp mà API MutationObserver có thể thực sự tiện dụng. Ví dụ
Đây chỉ là một vài ví dụ về cách MutationObserver có thể trợ giúp Cách sử dụng MutationObserverTriển khai Đối tượng được tạo có ba phương thức
Đoạn mã sau đây cho thấy cách bắt đầu quan sát Bây giờ, giả sử bạn có một số Sử dụng jQuery, bạn có thể xóa thuộc tính Như chúng ta đã bắt đầu quan sát, sau khi gọi Đây là đột biến do loại bỏ thuộc tính Và cuối cùng, để ngừng quan sát DOM sau khi hoàn thành công việc, bạn có thể làm như sau Ngày nay, lựa chọn thay thếTuy nhiên, Có một số tùy chọn khác có sẵn
bỏ phiếuCách đơn giản nhất và không phức tạp nhất là bỏ phiếu. Sử dụng trình duyệt setInterval WebAPI, bạn có thể thiết lập một tác vụ sẽ kiểm tra định kỳ xem có bất kỳ thay đổi nào xảy ra không. Đương nhiên, phương pháp này làm giảm đáng kể hiệu suất của ứng dụng web/trang web sự kiện đột biếnVào năm 2000, API MutationEvents đã được giới thiệu. Mặc dù hữu ích, các sự kiện đột biến được kích hoạt trên mọi thay đổi trong DOM, điều này lại gây ra các vấn đề về hiệu suất. Ngày nay, API Đây là trình duyệt hỗ trợ cho CSS hoạt hìnhMột giải pháp thay thế hơi lạ là một giải pháp dựa trên hoạt ảnh CSS. Nghe có vẻ hơi khó hiểu. Về cơ bản, ý tưởng là tạo một hoạt ảnh sẽ được kích hoạt sau khi một phần tử đã được thêm vào DOM. Thời điểm hoạt ảnh bắt đầu, sự kiện Trước tiên, chúng tôi cần một phần tử cha, bên trong đó, chúng tôi muốn lắng nghe các nút chèn Để xử lý việc chèn nút, chúng ta cần thiết lập một loạt hoạt ảnh khung hình chính sẽ bắt đầu khi nút được chèn Với các khung hình chính được tạo, hoạt ảnh cần được áp dụng cho các yếu tố bạn muốn lắng nghe. Lưu ý thời lượng nhỏ - chúng đang nới lỏng dấu chân hoạt ảnh trong trình duyệt Thao tác này thêm hoạt ảnh cho tất cả các nút con của Chúng tôi cần một hàm JavaScript sẽ đóng vai trò là trình lắng nghe sự kiện. Trong chức năng, kiểm tra Bây giờ là lúc thêm trình lắng nghe sự kiện vào cha mẹ Đây là trình duyệt hỗ trợ hoạt hình CSS
Khi bạn tích hợp thư viện của SessionStack trong ứng dụng web của mình, nó sẽ bắt đầu thu thập dữ liệu như thay đổi DOM, yêu cầu mạng, ngoại lệ, thông báo gỡ lỗi, v.v. và gửi nó đến máy chủ của chúng tôi. , SessionStack sử dụng dữ liệu này để tạo lại mọi thứ đã xảy ra với người dùng của bạn và hiển thị các vấn đề về sản phẩm của bạn giống như cách chúng đã xảy ra với người dùng của bạn. Khá nhiều người dùng nghĩ rằng SessionStack ghi lại một video thực — không phải vậy. Quay một video thực tế rất nặng, trong khi lượng nhỏ dữ liệu chúng tôi thu thập lại rất nhẹ và không ảnh hưởng đến UX cũng như hiệu suất của ứng dụng web của bạn |