Sự khác biệt giữa cây DOM trình duyệt và kết xuất cây là gì

Question

Tôi muốn biết về sự khác biệt "cây dom" và "hiển thị cây"?

Cây kết xuất được tạo từ "cây dom" hay Cây khác được trình duyệt tạo ra?

Answer 1

Câu hỏi hay. Cây DOM về cơ bản là cây chứa tất cả các phần tử HTML (các nút) của bạn, trong khi cây kết xuất là đỉnh cao của các cây DOM và CSSOM. Cây kết xuất là cây được hiển thị trên trang. Hi vọng điêu nay co ich! Tôi đã viết một bài báo về vấn đề này, check it out :)

http://www.jjburton.com/2016/02/12/web-science-browser-internals-rendering.html

The big question...'How does the browser render a web page?'. Before starting, let's quickly answer some sub-questions:

Answer 2

Đây là một số điều rất tốt, tôi nghĩ bạn nên đọc đầu tiên!

1. gì Mỗi Frontend Developer nên biết về trang web Rendering

   http://frontendbabel.info/articles/webpage-rendering-101/

2. Làm thế nào các trình duyệt làm việc: Đằng sau hậu trường của các trình duyệt web hiện đại

   http://taligarsiel.com/Projects/howbrowserswork1.htm

3. Render cây Xây dựng, Giao diện, và Paint

   https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

hy vọng sự giúp đỡ dành cho bạn!

Answer 3

Kết xuất cây được tạo bằng cách kết hợp cây DOM (Được tạo từ phân tích cú pháp HTML) và CSSOM (Được tạo từ phân tích cú pháp CSS được xác định cho tài liệu).

Chỉ hiển thị cây chứa các nút sẽ hiển thị trên màn hình, tức là nếu hiển thị cho bất kỳ nút nào được đánh dấu là none thì nó sẽ không phải là một phần của cây hiển thị.

Kết xuất cây sau đó được chuyển đến giai đoạn bố cục và cuối cùng là giai đoạn sơn sẽ vẽ các pixel thực tế trên màn hình và nội dung hiển thị cho bạn.

Để trả lời câu hỏi của bạn: Cả cây dom và cây hiển thị chỉ được tạo bởi trình duyệt và có cây hiển thị được tạo từ cây dom như được giải thích ở trên.