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.
- Đ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.
- 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
- 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ủ.
- 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.
- 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.
- 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.
- 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.
HelloHello 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 - - It's a programming language that facilitates the processing of actions taken by the user like validating the inputs. Along with that it also facilitates the generation of HTML content dynamically on the browser side. Modern age SPA [Single Page App] frameworks use this mechanism. [I will publish a separate article on SPA].
CSS [Cascading Style Sheets] - - as its name suggests it provides styling for the HTML elements with color, font, and other design styles.
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