Hướng dẫn how are html and css files read by the browser? - các tệp html và css được trình duyệt đọc như thế nào?

Đây là mô tả tốt nhất tôi tìm thấy về cách trình duyệt xử lý HTML và CSS:

Công cụ kết xuất sẽ bắt đầu phân tích tài liệu HTML và biến các thẻ thành các nút dom trong một cây gọi là "cây nội dung". Nó sẽ phân tích dữ liệu kiểu, cả trong các tệp CSS bên ngoài và trong các yếu tố kiểu. Thông tin kiểu dáng cùng với các hướng dẫn trực quan trong HTML sẽ được sử dụng để tạo ra một cây khác - cây kết xuất.


Nói chung, công việc của công cụ kết xuất là:

  • Token hóa các quy tắc (chia đầu vào thành tokens aka lexer)
  • Xây dựng cây phân tích cú pháp bằng cách phân tích cấu trúc tài liệu theo quy tắc cú pháp ngôn ngữ

CSS phân tích cú pháp

Không giống như HTML, CSS là ngữ pháp không có ngữ cảnh (với ngữ pháp xác định). Vì vậy, chúng tôi sẽ có đặc tả CSS xác định ngữ pháp từ vựng và cú pháp CSS, mà trình phân tích cú pháp áp dụng đi qua bảng kiểu.
So we'll have CSS specification defining CSS lexical and syntax grammar, that the parser applies going through the stylesheet.

Ngữ pháp từ vựng (từ vựng) được xác định bởi các biểu thức thông thường cho mỗi mã thông báo:

comment     \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num     [0-9]+|[0-9]*"."[0-9]+
nonascii    [\200-\377]
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}
name        {nmchar}+
ident       {nmstart}{nmchar}*

"Nhận dạng" là viết tắt của định danh, giống như một tên lớp. "Tên" là ID phần tử (được giới thiệu bởi "#")

Ngữ pháp cú pháp được mô tả trong BNF.

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;

Đối với một mô tả mở rộng về quy trình làm việc của trình duyệt, hãy xem bài viết này.

Phát triển web

Trong bài viết này, chúng tôi sẽ đi sâu vào DOM và CSSOM để hiểu cách trình duyệt hiển thị một trang web. Trình duyệt chặn một số kết xuất của một trang web cho đến khi một số tài nguyên nhất định được tải trước trong khi các tài nguyên khác được tải không đồng bộ.

freecodecamp.org Từ năm 2015, 40.000 sinh viên tốt nghiệp đã nhận được việc làm tại các công ty công nghệ bao gồm Google, Apple, Amazon và Microsoft. Các tệp HTML được đọc từ trên xuống dưới khi bay, điều đó có nghĩa là, bất cứ điều gì ở trên cùng, sẽ chạy trước.

Sau khi HTML đã được phân tích cú pháp, đã đến lúc parse the CSS (được tìm thấy trong các tệp CSS bên ngoài và trong các yếu tố kiểu) và xây dựng CSSOM tree (mô hình đối tượng CSS).

4. Phân tích cú pháp CSS

Khi trình duyệt gặp phải bảng kiểu CSS, có thể là bên ngoài hoặc nhúng, nó cần phân tích văn bản vào một cái gì đó có thể sử dụng để tạo kiểu cho bố cục. Cấu trúc dữ liệu mà trình duyệt biến CSS thành CSSOM. DOM và CSSOM tuân theo các khái niệm tương tự, theo nghĩa là cả hai đều là cây, nhưng chúng là different data structures. Giống như xây dựng DOM ra khỏi HTML của chúng tôi, việc xây dựng CSSOM trong CSS được coi là một quá trình chặn kết xuất.

Tokenization & xây dựng CSSOM

Hướng dẫn how are html and css files read by the browser? - các tệp html và css được trình duyệt đọc như thế nào?

Tương tự như phân tích cú pháp HTML, phân tích cú pháp CSS bắt đầu bằng mã thông báo. Trình phân tích cú pháp CSS lấy các byte và chuyển đổi chúng thành các ký tự, sau đó là mã thông báo, sau đó các nút và cuối cùng chúng được liên kết với CSSOM. Trình duyệt thực hiện một cái gì đó gọi là selector machting, điều đó có nghĩa là mỗi tập hợp các kiểu sẽ được khớp với tất cả các nút (phần tử) trên trang.

Trình duyệt bắt đầu với quy tắc chung nhất áp dụng cho một nút (ví dụ: nếu một nút đó là con của phần tử cơ thể, thì tất cả các kiểu cơ thể được kế thừa bởi nút đó) và sau đó tinh chỉnh các kiểu tính toán bằng cách áp dụng các quy tắc cụ thể hơn. Đây là lý do tại sao chúng tôi nói rằng các quy tắc phong cách là cascading.

body {
  font-size: 16px;
  color: white;
} 

h2 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Hãy tưởng tượng chúng ta có HTML và CSS dưới đây:

Hướng dẫn how are html and css files read by the browser? - các tệp html và css được trình duyệt đọc như thế nào?

CSSOM cho mã này sẽ trông giống như thế này:

Lưu ý rằng trong lược đồ ở trên, các phần tử lồng nhau có cả

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
0 (từ cha mẹ - ví dụ:
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
1 kế thừa màu của nó từ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
2 và
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
3 kế thừa kích thước phông chữ của nó từ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
2) và
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
5 (có thể ghi đè lên các quy tắc được kế thừa từ cha mẹ từ cha mẹ Hoặc không - ví dụ:
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
6 ghi đè lên cả màu sắc và kích thước phông chữ được kế thừa từ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
7 và
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
8 không nhận được lề trái từ nút cha).

Vì chúng tôi có thể có nhiều nguồn cho CSS của chúng tôi và chúng có thể chứa các quy tắc áp dụng cho cùng một nút, trình duyệt phải quyết định quy tắc nào sẽ áp dụng cuối cùng. Đó là khi

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
9 phát huy tác dụng và nếu bạn muốn đọc thêm về nó, bạn có thể truy cập trang này.

Trên cùng một lưu ý, giả sử chúng ta có yếu tố này:

href="https://dev.to/">This is just a link!

Nhập chế độ FullScreenen EXIT Mode FullScreen

Và những kiểu CSS này:

a {
   color: red;
}

p  a {
   color: blue;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Và những kiểu CSS này:

Bạn nghĩ rằng trình duyệt sẽ áp dụng quy tắc nào? Câu trả lời là các quy tắc thứ hai, vì kết hợp bộ chọn

body {
  font-size: 16px;
  color: white;
} 

h2 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}
0 có độ đặc hiệu hơn so với chỉ bộ chọn
body {
  font-size: 16px;
  color: white;
} 

h2 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}
1. Nếu bạn muốn chơi xung quanh với tính đặc hiệu, bạn có thể sử dụng máy tính đặc hiệu này.

CSS rules are read from right to left, meaning that if we have something like:
body {
  font-size: 16px;
  color: white;
} 

h2 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}
2, the browser will first look for all
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
6 tags on the page and then it will look if any of those
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
6 tags have a
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
3 tag as a parent. If that's the case, it will apply the CSS rule.

Các quy tắc CSS quan trọng được đọc từ phải sang trái, nghĩa là nếu chúng ta có một cái gì đó như:

body {
  font-size: 16px;
  color: white;
} 

h2 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}
2, trình duyệt trước tiên sẽ tìm kiếm tất cả các thẻ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
6 trên trang và sau đó nó sẽ xem xét nếu bất kỳ thẻ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
6 nào có thẻ
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;
3 làm cha mẹ . Nếu đó là trường hợp, nó sẽ áp dụng quy tắc CSS.

  • Vật liệu giải quyết:
  • Lịch sử ngắn gọn về CSS cho đến năm 2016

Làm thế nào một trình duyệt đọc HTML?

Phân tích cú pháp HTML liên quan đến việc xây dựng mã thông báo và xây dựng cây. Mã thông báo HTML bao gồm các thẻ bắt đầu và kết thúc, cũng như tên và giá trị thuộc tính. Nếu tài liệu được hình thành tốt, phân tích cú pháp thì đơn giản và nhanh hơn. Trình phân tích cú pháp phân tích cú pháp đầu vào vào tài liệu, xây dựng cây tài liệu.. HTML tokens include start and end tags, as well as attribute names and values. If the document is well-formed, parsing it is straightforward and faster. The parser parses tokenized input into the document, building up the document tree.

HTML và CSS được phân tích cú pháp trong trình duyệt như thế nào?

Khi một trang web được tải, trình duyệt trước tiên đọc văn bản HTML và xây dựng cây Dom từ nó. Sau đó, nó xử lý các CSS cho dù đó là nội tuyến, nhúng hoặc CS bên ngoài và xây dựng cây CSSOM từ nó. Sau khi những cây này được xây dựng, sau đó nó xây dựng cây kết xuất từ ​​nó.

Các tệp CSS được trình duyệt được đọc như thế nào?

Các quy tắc CSS được đọc từ phải sang trái, có nghĩa là nếu chúng ta có một cái gì đó như: Phần p {color: blue;}, Trình duyệt trước tiên sẽ tìm kiếm tất cả các thẻ P trên trang và sau đó nó sẽ xem nếu bất kỳ thẻ P nào có thẻ phần là cha mẹ.Nếu đó là trường hợp, nó sẽ áp dụng quy tắc CSS., meaning that if we have something like: section p { color: blue; } , the browser will first look for all p tags on the page and then it will look if any of those p tags have a section tag as a parent. If that's the case, it will apply the CSS rule.

Làm thế nào các tệp HTML và CSS được đọc bởi trình duyệt từ trên xuống dưới?

freecodecamp.org Từ năm 2015, 40.000 sinh viên tốt nghiệp đã nhận được việc làm tại các công ty công nghệ bao gồm Google, Apple, Amazon và Microsoft.Các tệp HTML được đọc từ trên xuống dưới khi bay, điều đó có nghĩa là, bất cứ điều gì ở trên cùng, sẽ chạy trước.on the fly, that means, whatever is on the top, will run first.