Nguồn: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
PS: Bản dịch sẽ có sai sót về lỗi chính tả hoặc hướng nhìn chủ quan của người dịch, các bạn nên đọc kỹ bài gốc để có thể nắm rõ hơn về kiến thức được chia sẽ trong bài.
Trong bài này chúng ta sẽ có một cái nhìn tổng quan về những gì sẽ diễn ra khi bạn duyệt một trang web trên browser trong máy tính hoặc điện thoại của bạn.
Những lý thuyết này tuy không giúp quá nhiều trong việc viết code ở thời điểm hiện tại, nhưng dần dần về sau bạn sẽ thấy được sự lợi hại của các kiến thức mang tính nền tảng này.
Clients and servers
Các máy tính có kết nối với internet thì có thể được gọi là clients và servers. Dưới đây là một mô hình đơn giản để biểu diễn mối quan hệ của chúng:
- Clients là các thiết bị có kết nối với internet được sử dụng để duyệt web (ví dụ: máy tính cá nhân có kết nối mạng, điện thoại được kết nối wifi, 3/4/5G) và các phần mềm trình duyệt web có sẳn trên các thiết bị đó (chrome, firefox, ...).
- Servers là các máy tính chứa webpages, sites hoặc apps. Khi máy client muốn truy cập vào webpage, một bản sao của webpage sẽ được tải về từ máy server xuống máy client để có thể hiển thị lên trên phần mềm trình duyệt web của người dùng.
The other parts of the toolbox
Khái niệm về client và server được đề cập ở trên chưa thực sự nói lên được toàn bộ câu chuyện. Còn rất nhiều các thành phân liên quan nữa, và chúng ta sẽ cùng đề cập tới chúng trong phần tiếp theo đây.
Bây giờ hãy thử tưởng tượng, web giống như một con đường. Cuối con đường đó là client đại diện cho nhà của bạn. Đầu đường sẽ là server, sẽ là một cửa hàng mà bạn muốn tới để mua một số thứ gì đó.
Trên đường đi từ nhà bạn (client) tới cửa hàng (server), chúng ta sẽ phải chào hỏi một số nhân vật nữa sau đây:
Internet connection: nó cho phép bạn có thể gửi và nhận giữ liệu qua lại trên web. Về cơ bản nó như đường ống nối từ nhà bạn (client) tới cửa hàng (server) để bạn vận chuyển hàng hoá qua lại.
TCP/IP: Transmission Control Protocol và Internet Protocol - Giao thức điều khiển truyền dẫn và giao thức kết nối internet. Chúng là những giao thức giao tiếp có thể quyết định được cách mà data của bạn được truyền tải dọc đường truyền internet. Điều này giống như cơ chế vận chuyển cho phép bạn đặt hàng, đến cửa hàng và mua hàng. Trong ví dụ của chúng tôi, nó giống như một chiếc ô tô hoặc một chiếc xe đạp (hoặc bất kỳ phương tiện nào khác mà bạn có thể di chuyển).
DNS: Domain Name System - Hệ thống tên miền, nó giống như một cuốn số địa chỉ các websites. Khi bạn gõ một địa chỉ website lên trên thanh trình duyệt, trình duyệt sẽ tìm trong DNS để tìm được địa chỉ IP của website trước, sau khi tìm được thì sẽ sẽ bắt đầu truy suất trang web đó. Trình duyệt sẽ cần phải tìm ra địa chỉ của máy server đang chứa trang web đó để nó có thể gửi HTTP message tới đúng nơi. Cơ bản giống như việc bạn phải tìm được đúng địa chỉ của cửa hàng mà bạn muốn mua sắm.
HTTP: Hypertext Transfer Protocol - Giao thức truyền siêu văn bản. Nó là một giao thức ứng dụng nhằm quy định ra một ngôn ngữ chung giữa client và server để chúng có thể dùng và giao tiếp với nhau. Tưởng tượng nó giống như một ngôn ngữ bạn dùng để có thể đặt được những món hàng mà bạn muốn mua ở cửa hàng.
Component files: Một website được tạo thành từ rất nhiều files khác nhau, những files này sẽ được chia thành 2 loại chính:
- Code files: Các trang web được xây dựng chủ yếu từ HTML, CSS và JavaScript, sau này có thể còn có nhiều các công nghệ khác.
- Assets: Đây là tên chung cho tất cả nội dung khác tạo nên trang web, chẳng hạn như hình ảnh, âm nhạc, video, tài liệu Word và PDF.
So what happens, exactly?
Khi bạn gõ địa chỉ website lên trên thanh trình duyệt (tương đồng với việc bạn đang đi bộ tới cửa hàng):
- Trình duyệt sẽ đi đến DNS server, tìm địa chỉ chính xác của cái server đang chứa website đó (tìm địa chỉ cửa hàng)
- Trình duyệt sẽ gửi một HTTP request message tới server đó, yêu cầu máy server gửi về cho nó một bản copy của website đang muốn xem (bạn đi được tới cửa hàng và order hàng hoá muốn mua). Message gửi đi và tất cả các data được gửi qua lại giữa client và server nhờ internet connection sử dụng TCP/IP.
- Lúc này nếu máy server chấp nhận request tới từ máy client, server sẽ gửi cho client một message "200 OK", nghĩa là "Okay nha, bạn có thể xem website này nha! Nó đây!", và tiếp theo đó server sẽ bắt đầu gửi về cho browser ở client các files của website, nó là một chuỗi các phần nhỏ được gọi là data packets (gói giữ liệu) (Lúc này cửa hàng chấp nhận đơn hàng và đưa hàng hoá cho bạn mang về nhà)
- Trình duyệt sẽ tập hơn các file đó lại thành một website hoàn chỉnh và hiển thị lên cho bạn xem.
Phân tích thứ tự và thành phần các files cấu thành nên website
Khi browsers gửi request đến server để yêu cầu được tải các HTML files, các HTML files đó thường chứa các thẻ <link> thường gắn các liên kết để tải các file css, ngoài ra còn có thẻ <script> gắn liên kết để tải thên các file code javaScript khác. Việc hiểu được thứ tự parsing (phân tích cú pháp) của browser khi nó load một trang HTML là cực kỳ quan trọng:
- Browser sẽ phân tích cú pháp HTML trước nhất, như vậy thì browser mới có thể hiểu được thẻ như thẻ <link> hoặc thẻ <script> được gắn trên HTML
- Trong lúc đọc và phân tích HTML, khi đọc tới các thẻ <link>/<script>, browser sẽ gửi request ngược lại về phía server để tải tiếp các file css, javaScript được gắn kèm trong các thẻ đó để tiếp tục parsing (phân tích).
- Browser sẽ generates một cây DOM và lưu in-memory (vùng nhớ của browser) để lưu HTML sau khi phân tích, và một cấu trúc CSSOM (CSS Object Model) cũng được lưu in-memory dùng để chứa CSS sau khi phân tích, và sau cùng browser sẽ biên dịch và thực thi JavaScript.
- Sau khi làm xong các step trên, build cây DOM, apply stylesheet từ CSSOM và biên dịch, thực thi xong javaScript. Một website hoàn chỉnh sẽ được hiển thị lên trên browser cho người dùng thưởng thức.
Giải thích về DNS
Một địa chỉ thực của website là một chuỗi số khá là khó nhớ nên việc người dùng có thể nhớ nó và gõ chính xác địa chỉ website kiểu như thế này 192.0.2.172 lên trình duyệt là không dễ dàng. Để giải quyết vấn đề này, người ta đã phát minh ra Domain Name System (DNS). System này sử dụng một server đặt biệt có thể match một địa chỉ web mà bạn gõ trên trình duyệt (like "mozilla.org") với đúng IP address của website đó.
Lúc đó website có thể được truy cập nhanh chóng bởi địa chỉ IP của nó, bạn có thể sử dụng DNS Look Tool để tra thông tin địa chỉ IP của một website domain name nào đó.
Giải thích về Packets
Trước đó chúng ta sử dụng thuật ngữ "Packets - gói" để mô tả định dạng dữ liệu được gửi từ máy server đến máy client. Ý nghĩa ở đây là gì? Về cơ bản, khi dữ liệu được gửi qua web, nó sẽ được gửi thành hàng nghìn đoạn nhỏ. Có nhiều lý do tại sao dữ liệu được gửi trong các gói nhỏ. Đôi khi chúng bị rơi hoặc bị hỏng và việc thay thế các phần nhỏ sẽ dễ dàng hơn khi điều này xảy ra. Ngoài ra, các gói có thể được định tuyến dọc theo các đường dẫn khác nhau, giúp việc trao đổi nhanh hơn và cho phép nhiều người dùng khác nhau tải xuống cùng một trang web cùng một lúc. Nếu mỗi trang web được gửi dưới dạng một đoạn lớn, mỗi lần chỉ một người dùng có thể tải xuống, điều này rõ ràng sẽ khiến web trở nên kém hiệu quả và không thú vị khi sử dụng.