Hướng dẫn what is used to render html? - cái gì được sử dụng để hiển thị html?

Biên tập viên Lưu ý: Bài viết này đã được xem xét và cập nhật vào tháng 6 năm 2021.This article was reviewed and updated in June 2021.

Mục đích của bài viết này là để giải thích, một cách rất đơn giản, các bước mà trình duyệt của bạn thực hiện để chuyển đổi HTML, CSS và JavaScript thành một trang web hoạt động mà bạn có thể tương tác. Biết quy trình mà trình duyệt của bạn cần để đưa các trang web vào cuộc sống sẽ trao quyền cho bạn tối ưu hóa các ứng dụng web của bạn để có tốc độ và hiệu suất nhanh hơn.

Bắt đầu nào.

Tổng quan về cách các trình duyệt hiển thị các trang web

Làm thế nào chính xác để trình duyệt hiển thị các trang web? Tôi sẽ giải mã quá trình trong thời gian ngắn, nhưng trước tiên, điều quan trọng là phải tóm tắt lại một số điều cơ bản.

Trình duyệt web là một phần mềm tải các tệp từ máy chủ từ xa (hoặc có lẽ là đĩa cục bộ) và hiển thị chúng cho bạn - cho phép tương tác người dùng. Tôi biết bạn biết trình duyệt là gì 🙂

Tuy nhiên, trong một trình duyệt, có một phần mềm tìm ra những gì cần hiển thị cho bạn dựa trên các tệp mà nó nhận được. Đây được gọi là động cơ trình duyệt.

Công cụ trình duyệt là một thành phần phần mềm cốt lõi của mọi trình duyệt chính và các nhà sản xuất trình duyệt khác nhau gọi động cơ của họ bằng các tên khác nhau. Động cơ trình duyệt cho Firefox được gọi là Gecko và Chrome, được gọi là Blink, đây là một cái nĩa của Webkit.

Bạn có thể xem xét so sánh các công cụ trình duyệt khác nhau nếu điều đó khiến bạn quan tâm. Hãy để cho những cái tên làm bạn bối rối - chúng chỉ là tên.

Đối với mục đích minh họa, hãy để giả sử chúng ta có một động cơ trình duyệt phổ quát. Động cơ trình duyệt này sẽ được biểu diễn bằng đồ họa, như được thấy dưới đây. Trong bài viết này, tôi sử dụng trình duyệt của Trình duyệt và động cơ Trình duyệt có thể thay thế cho nhau. Hãy để điều đó làm bạn bối rối; Điều quan trọng là bạn biết công cụ trình duyệt là phần mềm chính chịu trách nhiệm cho những gì chúng tôi đang thảo luận.

Gửi và nhận thông tin đến trình duyệt

Đây không phải là một lớp mạng khoa học máy tính, nhưng bạn có thể nhớ rằng dữ liệu được gửi qua Internet khi các gói có kích thước bằng byte.

Điểm tôi cố gắng đưa ra là khi bạn viết một số HTML, CSS và JS và cố gắng mở tệp HTML trong trình duyệt của bạn, trình duyệt đọc các byte HTML thô từ đĩa cứng (hoặc mạng) của bạn.

Có cái đó? Trình duyệt đọc các byte dữ liệu thô và không phải là ký tự thực tế của mã bạn đã viết. Tiếp tục nào.

Trình duyệt nhận được byte dữ liệu, nhưng nó có thể thực sự làm bất cứ điều gì với nó; Các byte dữ liệu thô phải được chuyển đổi thành một biểu mẫu mà nó hiểu. Đây là bước đầu tiên.

Từ các byte thô của HTML đến DOM

Những gì đối tượng Trình duyệt cần làm việc là đối tượng mô hình đối tượng tài liệu (DOM). Vì vậy, đối tượng DOM có nguồn gốc như thế nào? Vâng, khá đơn giản.

Đầu tiên, các byte dữ liệu thô được chuyển đổi thành ký tự.

Bạn có thể thấy điều này với các ký tự của mã bạn đã viết. Chuyển đổi này được thực hiện dựa trên mã hóa ký tự của tệp HTML.

Tại thời điểm này, trình duyệt đã chuyển từ các byte dữ liệu thô vào các ký tự thực tế trong tệp. Các nhân vật là tuyệt vời, nhưng họ không phải là kết quả cuối cùng. Những nhân vật này được phân tích nhanh hơn vào một thứ gọi là mã thông báo.

Vì vậy, những mã thông báo này là gì?

Một loạt các ký tự trong tệp văn bản không làm công cụ trình duyệt rất nhiều. Nếu không có quy trình mã thông báo này, loạt các ký tự sẽ dẫn đến một loạt các văn bản vô nghĩa, tức là, mã HTML - và điều đó không tạo ra một trang web thực tế.

Khi bạn lưu một tệp với tiện ích mở rộng .html, bạn báo hiệu đến công cụ trình duyệt để giải thích tệp dưới dạng tài liệu HTML. Cách trình duyệt diễn giải tệp này bằng cách phân tích cú pháp đầu tiên. Trong quy trình phân tích cú pháp và đặc biệt là trong quá trình mã thông báo, mọi thẻ HTML bắt đầu và kết thúc trong tệp được tính đến.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Trình phân tích cú pháp hiểu từng chuỗi trong giá đỡ góc (ví dụ:

    
    
    



    
How Browser Rendering Works
    

    
    
    



    
How Browser Rendering Works
    

Về mặt khái niệm, bạn có thể thấy một mã thông báo là một số loại cấu trúc dữ liệu chứa thông tin về một thẻ HTML nhất định. Về cơ bản, một tệp HTML được chia thành các đơn vị phân tích cú pháp nhỏ được gọi là mã thông báo. Đây là cách trình duyệt bắt đầu hiểu những gì bạn đã viết.

Các nút là tuyệt vời, nhưng chúng vẫn không phải là kết quả cuối cùng.

Bây giờ, đây là bit cuối cùng. Khi tạo các nút này, các nút sau đó được liên kết trong cấu trúc dữ liệu cây được gọi là DOM. DOM thiết lập các mối quan hệ cha mẹ và con cái, các mối quan hệ anh chị em liền kề, v.v ... Mối quan hệ giữa mọi nút được thiết lập trong đối tượng DOM này.

Bây giờ, đây là một cái gì đó chúng ta có thể làm việc với.

Nếu bạn nhớ từ Web Design 101, bạn sẽ không mở tệp CSS hoặc JS trong trình duyệt để xem trang web. Không - Bạn mở tệp HTML, hầu hết các lần trong mẫu

    
    
    



    
How Browser Rendering Works
    

Tùy thuộc vào mức độ lớn của tệp HTML, quy trình xây dựng DOM có thể mất một thời gian. Cho dù nhỏ đến đâu, nó cũng mất một thời gian, bất kể kích thước tệp.

Nhưng chờ đã - những gì về việc tìm nạp CSS?

DOM đã được tạo ra. Tuyệt quá.

Một tệp HTML điển hình với một số CSS sẽ có bảng kiểu được liên kết như hình dưới đây:

Mặc dù trình duyệt nhận được các byte dữ liệu thô và khởi động quy trình xây dựng DOM, nhưng nó cũng sẽ đưa ra yêu cầu tìm nạp bảng kiểu

    
    
    



    
How Browser Rendering Works
    

    
    
    



    
How Browser Rendering Works
    

Như bạn có thể đoán, trình duyệt cũng nhận được các byte dữ liệu CSS thô, cho dù từ Internet hay đĩa cục bộ của bạn. Nhưng chính xác thì những gì được thực hiện với các byte thô của dữ liệu CSS?

Từ các byte thô của CSS đến CSSOM

Bạn thấy, một quá trình tương tự với các byte HTML thô cũng được bắt đầu khi trình duyệt nhận được byte RAW của CSS.

Nói cách khác, các byte dữ liệu thô được chuyển đổi thành các ký tự, sau đó được mã hóa. Các nút cũng được hình thành, và cuối cùng, một cấu trúc cây được hình thành.

Cấu trúc cây là gì? Chà, hầu hết mọi người đều biết có một thứ gì đó gọi là Dom. Theo cách tương tự, cũng có một cấu trúc cây CSS được gọi là mô hình đối tượng CSS (CSSOM).

Bạn thấy đấy, trình duyệt có thể hoạt động với các byte thô của HTML hoặc CSS. Điều này phải được chuyển đổi thành một hình thức mà nó nhận ra - và đó là các cấu trúc cây này.

CSS có một cái gì đó gọi là Cascade. Cascade là cách trình duyệt xác định những kiểu được áp dụng cho một phần tử. Bởi vì các kiểu ảnh hưởng đến một yếu tố có thể đến từ một phần tử cha (nghĩa là, thông qua kế thừa) hoặc đã được đặt trên chính phần tử, cấu trúc cây CSSOM trở nên quan trọng.

Tại sao? Điều này là do trình duyệt phải đệ quy qua cấu trúc cây CSS và xác định các kiểu ảnh hưởng đến một yếu tố cụ thể.

Tất cả đều tốt và tốt. Trình duyệt có các đối tượng DOM và CSSOM. Chúng ta có thể có một cái gì đó được hiển thị trên màn hình bây giờ?

Cây kết xuất

Những gì chúng ta có ngay bây giờ là hai cấu trúc cây độc lập mà don dường như có một mục tiêu chung.

Các cấu trúc cây DOM và CSSOM là hai cấu trúc độc lập. DOM chứa tất cả các thông tin về các mối quan hệ của phần tử HTML, trong khi CSSOM chứa thông tin về cách các phần tử được tạo kiểu.

OK, trình duyệt hiện kết hợp các cây DOM và CSSOM thành một thứ gọi là cây kết xuất.

Cây kết xuất chứa thông tin về tất cả nội dung DOM có thể nhìn thấy trên trang và tất cả các thông tin CSSOM cần thiết cho các nút khác nhau. Lưu ý rằng nếu một phần tử đã bị CSS ẩn (ví dụ: bằng cách sử dụng

    
    
    



    
How Browser Rendering Works
    

Phần tử ẩn sẽ có mặt trong DOM nhưng không phải là cây kết xuất. Điều này là do cây kết xuất kết hợp thông tin từ cả DOM và CSSOM, vì vậy nó biết không bao gồm một phần tử ẩn trong cây.

Với cây kết xuất được xây dựng, trình duyệt chuyển sang bước tiếp theo: Bố cục!

Đặt cây kết xuất

Với cây kết xuất được xây dựng, bước tiếp theo là thực hiện bố cục. Ngay bây giờ, chúng tôi có nội dung và thông tin phong cách của tất cả các nội dung hiển thị trên màn hình, nhưng chúng tôi thực sự đã hiển thị bất cứ điều gì lên màn hình.

Vâng, trước tiên, trình duyệt phải tính toán kích thước và vị trí chính xác của mỗi đối tượng trên trang. Nó giống như truyền tải nội dung và thông tin phong cách của tất cả các yếu tố được kết xuất trên trang cho một nhà toán học tài năng. Nhà toán học này sau đó tìm ra vị trí và kích thước chính xác của từng phần tử với chế độ xem trình duyệt.

Bước bố cục này (mà đôi khi bạn sẽ nghe thấy được gọi là bước phản xạ của người dùng) xem xét nội dung và phong cách nhận được từ DOM và CSSOM và thực hiện tất cả các tính toán bố cục cần thiết.

Để cho nghệ sĩ ra ngoài

Với thông tin về các vị trí chính xác của từng phần tử hiện được tính toán, tất cả những gì còn lại là để sơn sơn các phần tử lên màn hình. Hãy suy nghĩ về nó: Chúng tôi đã có tất cả thông tin cần thiết để thực sự hiển thị các yếu tố trên màn hình. Hãy để chỉ có thể hiển thị cho người dùng, phải không?

Đúng! Đó chính xác là những gì giai đoạn này là tất cả về. Với thông tin về nội dung (DOM), kiểu (CSSOM) và bố cục chính xác của các phần tử được tính toán, trình duyệt hiện đang sơn nút riêng lẻ trên màn hình. Cuối cùng, các yếu tố hiện được hiển thị lên màn hình!

Kết xuất chặn tài nguyên

Khi bạn nghe thấy việc chặn kết xuất, điều gì đến với tâm trí? Chà, tôi đoán là, một cái gì đó ngăn chặn bức tranh thực tế của các nút trên màn hình.

Nếu bạn nói điều đó, bạn hoàn toàn đúng!

Quy tắc đầu tiên để tối ưu hóa trang web của bạn là nhận được HTML và CSS quan trọng nhất được cung cấp cho khách hàng nhanh nhất có thể. DOM và CSSOM phải được xây dựng trước khi sơn thành công, vì vậy cả HTML và CSS đều là tài nguyên chặn kết xuất.

Vấn đề là, bạn nên nhận HTML và CSS của mình cho máy khách càng sớm càng tốt để tối ưu hóa thời gian để kết xuất đầu tiên của các ứng dụng của bạn.

Nhưng chờ đã - còn JavaScript thì sao?

Một ứng dụng web khá chắc chắn sẽ sử dụng một số JavaScript. Đó là sự cống hiến. Vấn đề của người Viking với JavaScript là bạn có thể sửa đổi nội dung và kiểu dáng của một trang bằng JavaScript. Nhớ lại?

Theo ngụ ý, bạn có thể xóa và thêm các phần tử khỏi cây DOM và bạn cũng có thể sửa đổi các thuộc tính CSSOM của một phần tử thông qua JavaScript.

Điều đó thật tuyệt! Tuy nhiên, nó có giá. Xem xét tài liệu HTML sau:

    
    
    



    
How Browser Rendering Works
    

Nó là một tài liệu khá đơn giản.

Bảng kiểu

    
    
    



    
How Browser Rendering Works
    

body {
  background: #8cacea;
}

Và kết quả của điều này là:

Một văn bản và hình ảnh đơn giản được hiển thị trên màn hình. Từ các giải thích trước, trình duyệt đọc các byte RAW của tệp HTML từ đĩa (hoặc mạng) và biến nó thành ký tự.

Các nhân vật được phân tích nhanh hơn vào mã thông báo. Ngay khi trình phân tích cú pháp đạt đến dòng với

    
    
    



    
How Browser Rendering Works
    

    
    
    



    
How Browser Rendering Works
    

Điều gì xảy ra với dòng chảy này khi chúng tôi giới thiệu JavaScript? Chà, một trong những điều quan trọng nhất cần nhớ là bất cứ khi nào trình duyệt gặp thẻ

    
    
    



    
How Browser Rendering Works
    

Điều này là do JavaScript có thể thay đổi cả DOM và CSSOM. Bởi vì trình duyệt không chắc chắn những gì JavaScript đặc biệt này sẽ làm, nên việc phòng ngừa bằng cách tạm dừng toàn bộ cấu trúc DOM hoàn toàn.

Điều này có thể tệ đến mức nào? Chúng ta hãy có một cái nhìn.

Trong tài liệu HTML cơ bản mà tôi đã chia sẻ trước đó, hãy để giới thiệu thẻ

    
    
    



    
How Browser Rendering Works
    

    
    
    



    
How Browser Rendering Works
    

    

Trong thẻ

    
    
    



    
How Browser Rendering Works
    

body {
  background: #8cacea;
}

body {
  background: #8cacea;
}

Điều này hoạt động tốt, như đã thấy dưới đây:

Tuy nhiên, bạn có nhận thấy rằng thẻ

    
    
    



    
How Browser Rendering Works
    

body {
  background: #8cacea;
}

    
    
    
    



    
How Browser Rendering Works
    

Khi tôi làm điều này, biến tiêu đề được giải quyết thành

body {
  background: #8cacea;
}

Tại sao? Khá đơn giản.

Trong khi trình phân tích cú pháp HTML đang trong quá trình xây dựng DOM, một

body {
  background: #8cacea;
}

body {
  background: #8cacea;
}

Vào thời điểm

    
    
    



    
How Browser Rendering Works
    

body {
  background: #8cacea;
}

body {
  background: #8cacea;
}

Điều này đưa chúng ta đến một điểm quan trọng khác: vị trí của kịch bản của bạn.

Và đó không phải là tất cả. Nếu bạn trích xuất nội tuyến

    
    
    



    
How Browser Rendering Works
    

    
    
    
    



    
How Browser Rendering Works
    

Một lần nữa, đó không phải là tất cả! Điều gì sẽ xảy ra nếu

    
    
    



    
How Browser Rendering Works
    

    

document.getElementsByTagName("body")[0].style.backgroundColor = "red";

Vì vậy, điều gì xảy ra khi trình phân tích cú pháp gặp thẻ

    
    
    



    
How Browser Rendering Works
    

Chà, câu trả lời hóa ra là đơn giản: Việc thực hiện JavaScript sẽ bị dừng lại cho đến khi CSSOM sẵn sàng.

Vì vậy, mặc dù việc xây dựng DOM dừng lại cho đến khi gặp phải thẻ

    
    
    



    
How Browser Rendering Works
    

Với CSSOM, việc thực thi JS chờ đợi. Không CSSOM, không thực thi JS.

Thuộc tính Async

Theo mặc định, mỗi tập lệnh là trình chặn trình phân tích cú pháp! Việc xây dựng DOM sẽ luôn bị dừng lại.

Có một cách để thay đổi hành vi mặc định này mặc dù.

Nếu bạn thêm từ khóa

    
    
    



    
How Browser Rendering Works
    

    

    
    
    



    
How Browser Rendering Works
    

Đây là một ví dụ:

    
    
    
    



    
How Browser Rendering Works
    

Đường dẫn kết xuất quan trọng (CRP)

Toàn bộ thời gian này, chúng tôi đã thảo luận về các bước được thực hiện giữa việc nhận các byte HTML, CSS và JS và biến chúng thành các pixel được hiển thị trên màn hình.

Toàn bộ quá trình này được gọi là đường dẫn kết xuất quan trọng (CRP). Tối ưu hóa trang web của bạn cho hiệu suất là tất cả về tối ưu hóa CRP. Một trang web được tối ưu hóa tốt nên trải qua kết xuất tiến bộ và không có toàn bộ quá trình bị chặn.

Đây là sự khác biệt giữa một ứng dụng web được coi là chậm hoặc nhanh.

Chiến lược tối ưu hóa CRP được suy nghĩ kỹ lưỡng cho phép trình duyệt tải một trang càng nhanh càng tốt bằng cách ưu tiên tài nguyên nào được tải và thứ tự được tải.

Theo dõi cách ứng dụng của bạn hiển thị

Bây giờ bạn đã biết cách kết xuất trình duyệt hoạt động, điều quan trọng là đảm bảo rằng các thành phần và yếu tố trong ứng dụng của bạn đang hiển thị như bạn mong đợi. Nếu bạn quan tâm đến việc theo dõi và theo dõi các vấn đề liên quan đến kết xuất trình duyệt và xem cách người dùng tương tác với các thành phần cụ thể, hãy thử logrocket. https://logrocket.com/signup/

Logrocket giống như một DVR cho các ứng dụng web, ghi lại mọi thứ xảy ra trên trang web của bạn. Thay vì đoán cách ứng dụng hoặc trang web của bạn đang hiển thị trong các trình duyệt cụ thể, bạn có thể thấy chính xác những gì người dùng trải nghiệm. Với logrocket, bạn có thể hiểu cách người dùng tương tác với các thành phần và bề mặt bất kỳ lỗi nào liên quan đến các yếu tố không hiển thị chính xác.

Ngoài ra, Logrocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn. LOGROCKETTERS Ứng dụng của bạn để ghi lại các yêu cầu/phản hồi với các tiêu đề + thân. Nó cũng ghi lại HTML và CSS trên trang, tái tạo các video hoàn hảo pixel của các ứng dụng một trang phức tạp nhất. Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình - bắt đầu giám sát miễn phí.

Sự kết luận

Đã hiểu những điều cơ bản về cách trình duyệt hiển thị HTML, CSS và JS của bạn, tôi cầu xin bạn dành thời gian để khám phá cách bạn có thể tận dụng kiến ​​thức này trong việc tối ưu hóa các trang của bạn để có tốc độ.

Một nơi tốt để bắt đầu là phần hiệu suất của tài liệu Nguyên tắc cơ bản của Google Web.

Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh

Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.

Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.

Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!

Hãy thử nó miễn phí.