Trình duyệt hiển thị HTML như thế nào

Hãy hiểu ngắn gọn khi bạn mở trình duyệt và gõ địa chỉ web như http. //www. ugaoo. com. Đại khái tất cả mọi thứ diễn ra phía sau hiện trường, trước khi bạn bắt đầu thấy trang web được hiển thị trong trình duyệt của mình.  

  1. Điều đầu tiên mà trình duyệt làm là thử và phân giải tên miền www. ugaoo. com đến địa chỉ IP/s.  
  2. Sau đó, trình duyệt sẽ tạo một yêu cầu HTTP tới máy chủ đằng sau địa chỉ IP đó với đường dẫn URL mà bạn đã yêu cầu trong thanh địa chỉ của trình duyệt
  3. Khi trình duyệt đưa ra yêu cầu, trước tiên trình duyệt sẽ mở kết nối với máy chủ. Sau đó gửi yêu cầu HTTP đến máy chủ.  
  4. Với giả định rằng máy chủ có khả năng hiểu các yêu cầu HTTP. Máy chủ sẽ xử lý yêu cầu đến và phản hồi thích hợp dựa trên đường dẫn được yêu cầu.   
  5. Nếu đường dẫn được yêu cầu không hợp lệ hoặc yêu cầu xác thực. Máy chủ sẽ phản hồi với một lỗi có liên quan hoặc chuyển hướng bạn đến trang đăng nhập tương ứng.  
  6. Giả sử đường dẫn yêu cầu của bạn có thể được phục vụ bởi máy chủ. Máy chủ sẽ phản hồi bằng một trang HTML, được hiển thị trong trình duyệt của bạn.  
  7. Khi toàn bộ phản hồi được gửi từ máy chủ, nó sẽ đóng kết nối do trình duyệt của bạn mở. (GHI CHÚ. chú ý đến điểm thứ 3 và thứ 7. Giao thức HTTP được cho là không trạng thái. Đóng kết nối máy chủ sau khi toàn bộ phản hồi được gửi là lý do tại sao nó được gọi là không trạng thái. )

Điểm quan trọng cần hiểu ở đây là máy chủ có thể phản hồi bằng một URL mới mà người dùng có thể được chuyển hướng đến. Bạn sẽ nhận thấy URL được chuyển hướng này bị thay đổi trên thanh địa chỉ của trình duyệt

Ở trên, chúng ta đã xem xét cách máy chủ nhận yêu cầu và phản hồi bằng trang HTML. Bây giờ chúng ta hãy hiểu ngắn gọn về trang HTML là gì.  

Trang HTML là gì?

Dạng dài - Ngôn ngữ đánh dấu siêu văn bản

Its text file which contains HTML , etc with their respective starting and ending tags, arranged in defined structure by the HTML standard. These tags are arranged in parent child relationship like below. Entire contents are enclosed inside starting and ending tag.


		
			 Hello 
		

		
			

Hello web world

The HTML page is divided into two major sections and . The first section contains the tags and contents related to showing the title, logo, and other relevant configurations used by the browser to render the page properly. It also ideally contains other resources like CSS & javascript URLs which are processed by the browser to render the page. ( I will not get into details of what is CSS and Javascript. They themselves are big topics individually to understand in detail). The second section contains the HTML tags which result in the page that you see in your browser.

Có một số tài nguyên khác góp phần hiển thị trang mà chúng tôi thấy trong trình duyệt

JavaScript -

Images - - All the images that we see on the page, are rendered through this image tag.

Phông chữ -  Nếu trang HTML đang sử dụng bất kỳ phông chữ nào không phải là phông chữ chuẩn có sẵn trên bất kỳ máy nào. Nó sẽ được tải xuống từ máy chủ

Phương tiện khác - Các tài nguyên phương tiện khác như video sẽ được định cấu hình bên trong trang HTML bằng các thẻ HTML tương ứng.  

HTML cung cấp bố cục trang liên kết tất cả các tài nguyên được đề cập ở trên cần thiết để hiển thị trang.   

Bây giờ hãy xem cách trình duyệt hiển thị trang HTML sau khi nhận được phản hồi từ máy chủ

The browser starts processing the HTML page line by line from the beginning till the end of the page. It starts rendering the HTML tags placed inside the tag to show the page content. While rendering these HTML tags, when it encounters above mentioned resources. It makes a separate HTTP request to fetch those resources from the server. 

Một điểm quan trọng cần hiểu ở đây là các tài nguyên này có thể không chỉ được phục vụ từ cùng một máy chủ. Trang HTML có thể có các tài nguyên đang trỏ đến các máy chủ khác để tải xuống các tài nguyên này. Chính cơ chế này tạo điều kiện tích hợp dễ dàng với các dịch vụ quảng cáo kỹ thuật số khác nhau giữa nhà xuất bản và nhà quảng cáo

Trình duyệt bắt đầu hiển thị trang ngay khi nó bắt đầu nhận HTML dưới dạng phản hồi từ máy chủ, tuần tự và từng dòng một. Nó không đợi toàn bộ HTML được tải xuống ở phía trình duyệt. Nếu bạn đã chứng kiến ​​​​việc duyệt internet từ thời quay số điện thoại, bạn có thể nhớ lại, trang được hiển thị chậm bắt đầu từ đầu đến cuối trang.  

Khía cạnh quan trọng cuối cùng cần hiểu là cách điều hướng giữa các trang khác nhau của trang web được hỗ trợ thông qua các trang HTML.  

Navigation to another page from the page which has been rendered at present, is being facilitated through anchor HTML tag. Page URL configured against any given anchor tag will take the user to that respective page once the user clicks on that anchor tag link. When you click on the link, you will notice the browser address bar URL gets changed to the one which has been configured against the anchor tag. 

Quá trình được đề cập ở trên lặp lại để hiển thị lại trang mới này. Trừ khi đó là một ứng dụng web SPA

Khía cạnh quan trọng cần hiểu đối với thẻ neo là URL được định cấu hình không nhất thiết phải từ cùng một trang. Nó có thể trỏ đến bất kỳ URL trang web công khai nào. Bạn có thể định cấu hình thẻ liên kết để mở URL mới này bên trong một tab hoàn toàn mới

Trang HTML được hiển thị như thế nào trong trình duyệt?

Các bước kết xuất bao gồm kiểu, bố cục, màu vẽ và trong một số trường hợp là kết hợp . Các cây CSSOM và DOM được tạo trong bước phân tích cú pháp được kết hợp thành một cây kết xuất, cây này sau đó được sử dụng để tính toán bố cục của mọi thành phần hiển thị, sau đó được vẽ lên màn hình.

Trình duyệt web có hiển thị các thẻ HTML không?

Công cụ kết xuất trình duyệt. Thành phần phần mềm bên trong trình duyệt biến các thẻ HTML thành một bộ lệnh cho hệ điều hành . Các trình duyệt khác nhau có công cụ kết xuất khác nhau. Không có sự khác biệt lớn giữa chúng nhưng bạn nên biết những khác biệt này.

Tệp HTML được biên dịch bởi trình duyệt như thế nào?

HTML không được biên dịch - nó chỉ mô tả cách hiển thị trang web. Và điều đó sau đó được trình duyệt giải thích - nó không kết thúc dưới dạng mã máy. Nó giống như một bản đồ hoặc bản in màu xanh cho công cụ kết xuất của trình duyệt biết cách xây dựng trang web.