Việc triển khai Shadow DOM trong các dự án của tôi có làm cho chúng nhanh hơn như DOM ảo được React sử dụng không?
Câu trả lời:
DOM ảo
Virtual DOM là về việc tránh những thay đổi không cần thiết đối với DOM, vốn tốn kém về hiệu suất, bởi vì những thay đổi đối với DOM thường gây ra kết xuất trang. Virtual DOM cũng cho phép thu thập một số thay đổi để được áp dụng cùng một lúc, vì vậy không phải mọi thay đổi đều gây ra kết xuất lại mà thay vào đó, việc kết xuất chỉ xảy ra một lần sau khi một tập hợp các thay đổi được áp dụng cho DOM.
Shadow DOM
Shadow dom chủ yếu là về việc đóng gói quá trình thực hiện. Một phần tử tùy chỉnh duy nhất có thể triển khai logic phức tạp hơn hoặc ít hơn kết hợp với DOM phức tạp hơn hoặc ít hơn. Toàn bộ ứng dụng web có độ phức tạp tùy ý có thể được thêm vào một trang bằng cách nhập và <body><my-app></my-app>các thành phần có thể tái sử dụng và kết hợp đơn giản hơn cũng có thể được triển khai dưới dạng các phần tử tùy chỉnh nơi phần biểu diễn bên trong được ẩn trong DOM bóng như <date-picker></date-picker>.
Đóng gói kiểu Shadow DOM cũng nhằm ngăn chặn kiểu vô tình được áp dụng cho các phần tử mà nhà thiết kế không có ý định, chẳng hạn như vì CSS hoặc thư viện thành phần bạn đang sử dụng đã thay đổi một bộ chọn hiện áp dụng cho các phần tử khác sử dụng cùng tên lớp CSS. Các kiểu được thêm vào các thành phần được xác định phạm vi cho thành phần đó và ngăn chặn hiện tượng chảy ra hoặc thay đổi kiểu.
Shadow DOM và hiệu suất
Mặc dù ngay từ đầu, shadow DOM không phải là về hiệu suất, nó cũng có ý nghĩa về hiệu suất. Bởi vì các kiểu có phạm vi, trình duyệt có thể đưa ra giả định về một số thay đổi để chỉ ảnh hưởng đến một khu vực giới hạn của trang (DOM bóng của một phần tử tùy chỉnh) có thể hạn chế hiển thị cho khu vực của thành phần đó, thay vì hiển thị toàn bộ trang.
Đây là lý do các >>>, /deep/và ::shadowcombinators CSS, cho phép áp dụng phong cách qua các biên giới bóng DOM, đã bị phản đối và có thể được gỡ bỏ ngay từ Chrome (trình duyệt khác không bao giờ có họ AFAIK). Sự tồn tại đơn thuần của các tổ hợp này ngăn cản loại tối ưu hóa được đề cập trong đoạn trước.
Angular2 sử dụng những lợi thế của cả hai thế giới.
Nó sử dụng luồng dữ liệu một chiều và chỉ chạy phát hiện thay đổi trên mô hình. Nếu nó phát hiện thay đổi nó gây ra DOM để được cập nhật bởi các ràng buộc cập nhật và thực hiện chỉ thị cấu trúc như *ngFor, *ngIf, ... cập nhật các DOM. Do đó DOM chỉ được cập nhật khi mô hình thực sự thay đổi.
Angular2 sử dụng Shadow DOM (chỉ với Shadow DOM ViewEncapsulation.Nativehiện tại không phải là mặc định) để sử dụng khả năng đóng gói kiểu do trình duyệt cung cấp hoặc (mặc định hiện tại) chỉ mô phỏng đóng gói kiểu bằng cách viết lại các kiểu được thêm vào các thành phần, như một giải pháp cho đến khi các biến DOM và CSS gốc (để thay đổi phong cách toàn cầu năng động) trở nên phổ biến rộng rãi.
Không, Shadow DOM và Virtual DOM không liên quan, mặc dù có tên hơi giống nhau:
Virtual DOM: Khái niệm phản ứng về việc giữ hai bản sao của DOM (bản gốc và bản cập nhật) vì những lý do khác nhau. Trước khi hiển thị, React sẽ phân biệt hai đối tượng để xác định xem nó có nên áp dụng (các) bản cập nhật cho cây DOM thực hay không. Điều này dẫn đến hiệu suất được tăng cường, vì chúng tôi chỉ cập nhật các phần của chế độ xem yêu cầu nó, không phải toàn bộ màn hình.
Shadow DOM: Một phần của thông số Thành phần Web theo đề xuất của W3C, về cơ bản cho phép đóng gói các phần tử DOM nhỏ hơn và các kiểu CSS vào một phần tử DOM duy nhất:
Phần tử DOM Shadow mẫu
<video width="300" height="150" />
Tuy nhiên, <video>thực sự gói gọn các yếu tố sau:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Vì vậy, bằng cách sử dụng DOM bóng, chúng tôi có thể ẩn các chi tiết thực hiện các yếu tố web của chúng tôi, và chỉ vượt qua cùng những thông tin cần thiết để các phần tử con (ví dụ height, width), trong đó, có lẽ gây nhầm lẫn, mạnh mẽ tương tự như ReactJS thành ngữ đi qua propscác thành phần .
Thông tin được cung cấp qua :
<video>), nhưng không có kỳ vọng tăng hiệu suất.