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

• Tổng quan về công cụ, thời gian chạy và ngăn xếp cuộc gọi
• Bên trong công cụ V8 của Google + 5 mẹo về cách viết mã được tối ưu hóa
• Quản lý bộ nhớ + cách xử lý 4 lỗi rò rỉ bộ nhớ phổ biến
• Vòng lặp sự kiện và sự phát triển của lập trình async + 5 cách để mã hóa tốt hơn với async/await
• Tìm hiểu sâu về WebSockets và HTTP/2 với SSE + cách chọn đúng đường dẫn
• So sánh với WebAssugging + tại sao trong một số trường hợp nhất định, sử dụng nó tốt hơn JavaScript
• Các khối xây dựng của Web Worker + 5 trường hợp bạn nên sử dụng chúng
• Nhân viên dịch vụ, vòng đời của họ và các trường hợp sử dụng
• Cơ chế của thông báo đẩy web

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

MutingObserver 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ụ

• Bạn muốn thông báo cho khách truy cập ứng dụng web của mình rằng một số thay đổi đã xảy ra trên trang mà anh ấy hiện đang truy cập
• Bạn đang làm việc trên một khung JavaScript ưa thích mới tải các mô-đun JavaScript động dựa trên cách DOM thay đổi
• Bạn có thể đang làm việc trên trình soạn thảo WYSIWYG, đang cố triển khai chức năng hoàn tác/làm lại. Bằng cách tận dụng API MutationObserver, bạn biết tại bất kỳ thời điểm nào những thay đổi đã được thực hiện, vì vậy bạn có thể dễ dàng hoàn tác chúng

Đây chỉ là một vài ví dụ về cách MutationObserver có thể trợ giúp

Cách sử dụng MutationObserver

Triển khai MutationObserver vào ứng dụng của bạn khá dễ dàng. Bạn cần tạo một phiên bản MutationObserver bằng cách chuyển cho nó một hàm sẽ được gọi mỗi khi xảy ra đột biến. Đối số đầu tiên của hàm là tập hợp tất cả các đột biến đã xảy ra trong một đợt duy nhất. Mỗi đột biến cung cấp thông tin về loại của nó và những thay đổi đã xảy ra

Đối tượng được tạo có ba phương thức

• observe — bắt đầu lắng nghe những thay đổi. Nhận hai đối số — nút DOM bạn muốn quan sát và một đối tượng cài đặt
• disconnect — ngừng lắng nghe những thay đổi
• takeRecords - trả về lô thay đổi cuối cùng trước khi gọi lại được kích hoạt

Đ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ố div rất đơn giản trong DOM

Sử dụng jQuery, bạn có thể xóa thuộc tính class khỏi div đó

Như chúng ta đã bắt đầu quan sát, sau khi gọi mutationObserver.observe[...], chúng ta sẽ thấy một bản ghi trong bảng điều khiển của MutationRecord tương ứng

Đây là đột biến do loại bỏ thuộc tính class

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, MutationObserver được hỗ trợ rộng rãi

lựa chọn thay thế

Tuy nhiên, MutationObserver không phải lúc nào cũng có mặt. Vậy các nhà phát triển đã làm gì trước khi MutationObserver xuất hiện?

Có một số tùy chọn khác có sẵn

• bỏ phiếu
• sự kiện đột biến
• CSS hoạt hình

bỏ phiếu

Cá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ến

Và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 MutationObserver2 không còn được dùng nữa và các trình duyệt hiện đại sẽ sớm ngừng hỗ trợ hoàn toàn

Đây là trình duyệt hỗ trợ cho MutationObserver2

CSS hoạt hình

Mộ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 MutationObserver4 sẽ được kích hoạt. nếu bạn đã đính kèm trình xử lý sự kiện vào sự kiện đó, bạn sẽ biết chính xác khi nào phần tử được thêm vào DOM. Khoảng thời gian thực hiện của hoạt ảnh phải nhỏ đến mức người dùng thực tế không nhìn thấy được

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 MutationObserver5. Khi hoạt ảnh kết thúc, sự kiện chèn sẽ kích hoạt

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 MutationObserver6 ban đầu phải được thực hiện để đảm bảo đó là hoạt ảnh mà chúng tôi muốn

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

MutationObserver cung cấp một số lợi thế so với các giải pháp nêu trên. Về bản chất, nó bao gồm mọi thay đổi đơn lẻ có thể xảy ra trong DOM và nó được tối ưu hóa hơn khi kích hoạt các thay đổi theo đợt. Trên hết, MutationObserver được hỗ trợ bởi tất cả các trình duyệt hiện đại chính, cùng với một vài polyfill sử dụng MutationObserver2 dưới mui xe

MutationObserver chiếm vị trí trung tâm trong thư viện của SessionStack

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