What does a browser do?

What does a browser do?

Câu chuyện dài, một công việc trên trình duyệt chủ yếu bao gồm

  • DNS resolution
  • HTTP exchange
  • Rendering
  • Rinse and repeat

DNS Resolution

Quá trình này đảm bảo rằng một khi người dùng nhập URL, trình duyệt sẽ biết nó phải kết nối với máy chủ nào. Trình duyệt liên hệ với máy chủ DNS để thấy rằng google.com chuyển đổi thành IP 216.58.207.110, một địa chỉ IP mà trình duyệt có thể kết nối.

HTTP Exchange

Khi browser đã xác định được máy chủ nào sẽ phục vụ yêu cầu của chúng tôi, và nó sẽ bắt đầu kết nối TCP và bắt đầu trao đổi HTTP, Nhưng một cách cho trình duyệt để giao tiếp với các máy chủ những gì nó cần, và cho máy chủ để trả lời lại.

HTTP đơn giản là tên của giao thức phổ biến nhất để giao tiếp trên web, và các trình duyệt chủ yếu nói chuyện qua HTTP khi giao tiếp với máy chủ. Trao đổi HTTP liên quan đến ứng dụng (trình duyệt của chúng tôi) gửi yêu cầu và máy chủ trả lời lại bằng phản hồi bằng 1 reponse .

Ví dụ: sau khi trình duyệt đã kết nối thành công với máy chủ google.com, nó sẽ gửi một yêu cầu giống như sau:
GET / HTTP/1.1Host: google.comAccept: */*

Hãy phân tích từng yêu cầu :
* GET / HTTP / 1.1 : với dòng đầu tiên này, browser sẽ yêu cầu máy chủ truy xuất tài liệu tại vị trí /, thêm vào đó, phần còn lại của yêu cầu sẽ tuân theo giao thức HTTP / 1.1 (nó cũng có thể sử dụng 1.0 hoặc 2)

* Host : google.com : đây là tiêu đề HTTP duy nhất bắt buộc trong HTTP / 1.1. Vì máy chủ có thể phục vụ nhiều tên miền (google.com, google.co.uk, v.v.), client ở đây đề cập rằng yêu cầu dành cho máy chủ cụ thể đó

* Accept: */* : một tiêu đề tùy chọn, trong đó trình duyệt đang thông báo cho máy chủ rằng nó sẽ chấp nhận bất kỳ loại phản hồi nào. Máy chủ có thể có một tài nguyên mà có sẵn ở các định dạng JSON, XML hoặc HTML, do đó, nó có thể chọn bất kỳ định dạng nào nó thích

Sau khi browser hoạt động như một máy khách được thực hiện với yêu cầu của nó, nó sẽ khởi động lại máy chủ để trả lời lại. Đây là những gì một phản ứng trông giống như :

HTTP/1.1 200 OKCache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Server: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINSet-Cookie: NID=1234; expires=Fri, 18-Jan-2019 18:25:04 GMT; path=/; domain=.google.com; HttpOnly

<!doctype html><html">......</html>

Dựa vào những thông tin trên mà ta rất nhiều thông tin để hiểu nó. Máy chủ cho chúng tôi biết rằng yêu cầu đã thành công (200 OK) và thêm một vài tiêu đề vào phản hồi .
ví dụ : nó cho biết máy chủ nào đã xử lý yêu cầu của chúng tôi (Máy chủ: gws), chính sách X-XSS-Protection của phản hồi này, v.v.

Ngay bây giờ, bạn không cần phải hiểu từng dòng trong phản hồi header này . Chúng tôi sẽ bao trùm giao thức HTTP, các header của nó, và sau đó trong loạt bài này tiếp theo của chúng tôi .

Hiện tại, tất cả những gì bạn cần hiểu là client và máy chủ đang trao đổi thông tin và họ làm như vậy thông qua HTTP.

Rendering

Cuối cùng, nhưng không kém phần quan trọng, quá trình Rendering lại cho người dùng. browser sẽ tốt đến mức nào nếu thứ duy nhất nó hiển thị cho người dùng là danh sách các nhân vật hài hước?

<!doctype html><html">......</html>

Trong phần body của response , máy chủ bao gồm header Kiểu content-type Trong trường hợp của này, nội dung được đặt thành văn bản / html, vì vậy chúng tôi đang mong đợi đánh dấu HTML trong phản hồi – đó chính xác là những gì chúng tôi tìm thấy trong phần body .

nó là một trình duyệt thực sự tỏa sáng. browser phân tích cú pháp HTML, tải các tài nguyên bổ sung có trong đánh dấu (ví dụ: có thể có các tệp JavaScript hoặc tài liệu CSS để tìm nạp) và trình bày chúng cho người dùng càng sớm càng tốt.