Nhận xét User Agent Stylesheet Là Gì, What Is A User Agent Stylesheet là chủ đề trong nội dung hiện giờ của blog Hùng Bá Tam Quốc. Tham khảo nội dung để biết cụ thể nhé.

Bạn đang xem: User agent stylesheet là gì


Công việc chính của rendering engine là hiển thị trang được yêu cầu lên màn hình hiển thị của trình duyệt.

Bạn đang xem: User agent stylesheet là gì

Rendering engine có thể hiển thị HTML, văn phiên bản XML với ảnh. Nếu khách hàng sử dụng thêm plugin ở ngoài thì engine rất có thể hiển thị những loại văn bạn dạng khác, chẳng hạn như PDF.

Rendering engines

Tương tự như Javascript engine, trình duyệt không giống nhau cũng sử dụng các rendering engine khác nhau. Một vài bộ engine nổi tiếng:

Gecko — FirefoxWebKit — SafariBlink — Chrome, Opera (từ phiên phiên bản 15 trở đi)Quá trình render

Rendering engine nhận nội dung của văn bạn dạng được yêu mong từ lớp networking.


*

Xây dựng DOM tree

Bước đầu tiên của công việc rendering là phân giải văn phiên bản HTML và đưa những phần tử đã phân giải thành hầu như DOM node thực sự trong DOM tree.

Giả sử chúng ta có đoạn đầu vào như sau:


*

Về cơ phiên bản thì mỗi thành phần được biểu thị như là 1 trong node phụ thân của toàn bộ các element khác nằm trực tiếp ngay dưới (bên trong) nó. Lý lẽ này được vận dụng một giải pháp đệ quy.

Xây dựng CSSOM tree

CSSOM viết tắt của CSS Object Model. Trong những lúc trình để ý đang desgin DOM, nó phát hiện một thẻ link trong phần head và dẫn tới một file CSS tên là theme.css ở mặt ngoài. Dự đoán rằng nó hoàn toàn có thể cần mang đến tài nguyên này để render trang, ngay mau chóng nó điều phối 1 request đến. Trả sử file theme.css có nội dung như sau:

body font-size: 16px;p font-weight: bold; span color: red; phường span display: none; img float: right; tương tự HTML, engine phải chuyển tất cả CSS lịch sự một sản phẩm công nghệ gì đó mà trình duyệt có thể xử lý, đó là CSSOM. Dưới đây là mô bỏng của CSSOM tree:


*

Bạn tất cả tự hỏi nguyên nhân CSSOM lại có kết cấu dạng cây (tree)? Khi thống kê giám sát bộ style cuối cùng cho mỗi object tren trang, trình chăm bẵm sẽ bước đầu với rule áp dụng toàn thể nhất mang đến node đó (ví dụ: nếu nó là con của phần tử body thì áp dụng tất cả style của body) và tinh chỉnh và điều khiển một giải pháp đệ quy rất nhiều style đã được tính toán bằng cách áp dụng các rule cụ thể hơn. 

Với ví dụ nghỉ ngơi trên, ngẫu nhiên text như thế nào nằm bên phía trong thẻ span mà span nằm vào phần tử body thì đều có font-size 16 với màu đỏ. Phần nhiều style này được kế thừa từ phần tử body. Giả dụ như span là bé của phần tử p thì ngôn từ của nó có khả năng sẽ bị ẩn chính vì có style khác rõ ràng hơn sẽ được áp dụng cho nó (ở đây là display: none).

Thêm nữa, xem xét rằng tree ngơi nghỉ trên chưa phải là CSSOM tree hoàn hảo và chỉ biểu thị những style mà ta vẫn ghi đè vào style sheet. Từng trình duyệt hỗ trợ 1 cỗ style khoác định, còn được biết tới là user agent styles – đó chính những gì ta thấy trường hợp như không hỗ trợ style thay thể. Style của chúng ta thêm vào chỉ đơn giản là ghi đè lại rất nhiều phần mặc định này.

Xây dựng render tree

Cùng cùng với phần bộc lộ trực quan tiền trong HTML kết hợp với dữ liệu style từ CSSOM tree là chúng ta đã tất cả đủ nguyên liệu để tạo nên render tree.

Bạn sẽ thắc mắc “render tree” là gì? Nó là 1 trong những cây (tree) của các thành phần trực quan tiền được tạo ra theo thiết bị tự trong số ấy chúng được hiện trên màn hình. Đó là việc thể hiện một cách trực quan của HTML cùng với CSS tương ứng. Mục tiêu của cây này là chất nhận được tô color nội dung theo như đúng thứ tự.

Mỗi node trong render tree được gọi là 1 renderer hoặc render object trong Webkit.

Dưới đây là cách mà render tree của DOM và CSSOM sinh sống trên thể hiện:


*

Để xuất bản render tree, trình săn sóc về cơ bạn dạng sẽ làm những điều sau đây:

Bắt đầu tự root của DOM tree, nó sẽ trải qua mỗi node thấy được. Vài ba node rất có thể bị ẩn đi (ví dụ như tag script, meta, vân vân) hoặc bỏ qua bởi vì chúng không phản chiếu trong kết quả render đầu ra. Vài ba node bị ẩn vày CSS và cũng trở nên bỏ qua ngoài render tree. Ví dụ như node spantrong lấy ví dụ trên thì nó vẫn không có mặt trong render tree do đã được mix style display: nonerồi.Với mỗi node thấy được, trình ưng chuẩn sẽ tìm các rule CSSOM tương xứng và khớp với nó rồi vận dụng vào.Trình trông nom sẽ xuất ra các node thấy được với ngôn từ và style tương ứng.

Bạn có thể xem qua source code của RenderObject (WebKit) nghỉ ngơi đây: https://github.com/WebKit/webkit/blob/fde57e46b1f8d7dde4b2006aaf7ebe5a09a6984b/Source/WebCore/rendering/RenderObject.h

Cùng nghía qua một vài mẫu cốt lõi trong class này nhé:

class RenderObject : public CachedImageClient // Tô màu lại toàn bộ object. Nó sẽ tiến hành gọi khi border color chuyển đổi hoặc // border style vậy đổi. Node* node() const … RenderStyle* style; // the computed style const RenderStyle& style() const; …Mỗi renderer thể hiện một khu vực hình chữ nhật tương ứng với CSS box của một node. Nó bao hàm cả tin tức hình học tập như độ rộng (width), chiều cao (height) hay địa chỉ (position).

Cách bố trí của render tree

Khi renderer được tạo nên và phân phối tree, nó không tồn tại thông tin địa chỉ hay kích thước, phần đo lường các cực hiếm này được điện thoại tư vấn là layout.

HTML sử dụng quy mô layout theo mẫu (flow-based layout), tức là hầu như toàn cục thời gian nó hoàn toàn có thể tính toán thông số kỹ thuật hình học chỉ trong 1 lần duyệt. Khối hệ thống tọa độ có liên quan đến root renderer. Thông số tọa độ top và left được sử dụng.

Layout là 1 quy trình đệ quy, nó bắt đầu ở root renderer, đó là thứ khớp ứng với phần tử trong văn bạn dạng HTML. Layout liên tiếp duyệt đệ quy qua một hoặc toàn thể cây cấp cho bậc(hierarchy) renderer, thống kê giám sát các tin tức hình học quan trọng cho từng renderer.

Vị trí của root renderer là 0,0 và size của nó bằng phần thấy được được của cửa sổ hiển thị trên trình phê duyệt (còn gọi là viewport).

Bắt đầu quá trình tạo layout đó là truyền đạt lại cho mỗi node tọa độ đúng chuẩn mà nó bắt buộc phải xuất hiện trên màn hình hiển thị là ngơi nghỉ đâu.

Tô màu mang đến render tree

Trong quá trình này, renderer tree đang được chú ý qua cùng phương thức paint() của renderer được hotline để hiển thị câu chữ lên màn hình.

Tô màu rất có thể theo cách global hoặc incremantal tương tự như layout):

Global (toàn cục): toàn thể tree được lên màu.Incremental (gia tăng): chỉ gồm một vài ba renderer biến hóa theo biện pháp không ảnh hưởng đến toàn bộ tree. Renderer loại bỏ hóa form chữ nhật của nó trên màn hình. Điều này làm cho OS (hệ điều thành) hiểu đúng bản chất vùng đó cần phải được tô màu lại và ra đời một paint event. OS thực hiện điều đó một giải pháp thông minh bằng phương pháp gộp những vùng thành một.

Xem thêm: Ý Nghĩa Của Come Out Of Là Gì, Trong Lgbt Come Out Có Ý Nghĩa Gì

Về bao quát thì quan trọng là cần phải hiểu rằng tô color là thừa trình diễn ra từ từ. Để gồm UX tốt hơn, render engine sẽ cố gắng hiển thị nội dung trên màn hình hiển thị ngay khi bao gồm thể. Nó sẽ không ngồi yên ổn đợi cho tới khi toàn bộ HTML được parse để bắt đầu xây dựng và bố trí render tree. Từng phần của nội dung sẽ tiến hành parse cùng hiển thị lên trong những khi tiến trình liên tục với các item nội dung tiếp theo sau đang được truyền về bên trên mạng.

Thứ tự cách xử trí script và styleCác script được parse và thực hiện ngay mau lẹ khi parser vừa gặp gỡ thẻ