Điều gì chính xác xảy ra khi bạn duyệt một trang web trong trình duyệt của bạn?


64

Điều gì xảy ra đằng sau hậu trường khi chúng ta gõ www.cnn.com trong trình duyệt và làm thế nào để thông tin được hiển thị trên màn hình?

Một lời giải thích kỹ thuật sẽ được đánh giá cao.


Một lời giải thích kỹ thuật tuyệt vời có thể được tìm thấy trong cuốn sách này: Mạng máy tính: Cách tiếp cận từ trên xuống phiên bản thứ 6 (Liên kết: Sách ). (trang 495-500) Họ đi vào một số lượng chi tiết đáng kể; bắt đầu từ những gì xảy ra khi máy tính được bật cho đến khi trang web được hiển thị trong trình duyệt của người dùng. Bạn có thể có được một hương vị của những gì được đề cập trong cuốn sách trong bộ slide này. (Liên kết: Slides 88 đến 95)
Slothworks

Bạn có thể tìm thấy thông tin chi tiết tại đây: github.com/vasanthk/how-web-works hoặc ở đó html5rocks.com/en/tutorials/iternals/howbrowserswork
mems

Câu trả lời:


134

Trình duyệt: "Ok, vì vậy, tôi có một người dùng yêu cầu địa chỉ này: www.cnn.com. Tôi hình dung vì không có dấu gạch chéo hay bất cứ điều gì, đây là yêu cầu trực tiếp của trang chính. Cũng không có giao thức hoặc cổng được xác định, vì vậy tôi sẽ cho rằng đó là HTTP và sẽ chuyển đến cổng 80 ... ồ, điều đầu tiên là trước tiên. Này DNS, bạn ơi, dậy đi! www.cnn.com này đang trốn ở đâu vậy? "

DNS: "Phải ... đợi một chút, tôi sẽ hỏi các máy chủ ISP. Ok, nó trông giống như 157.166.226.25."

Trình duyệt: "Ok. Bộ giao thức Internet, đến lượt bạn! Hãy gọi 157.166.226.25. Vui lòng gửi cho họ tiêu đề HTTP này. Nó yêu cầu cấu trúc và nội dung cơ bản của trang chính của họ để tôi biết còn gì nữa để tìm nạp ... oh tốt, Tôi đoán là không quan tâm đến điều này. "

TCP / IP: "Ý bạn là gì khi đến lượt tôi ? Giống như tôi đã không làm việc trở lại ngay tại đó cho DNS? Chúa ơi, cần gì để có được một chút đánh giá cao ở đây ..."

Trình duyệt: ...

TCP / IP: "Vâng, vâng ... Kết nối ... Tôi sẽ chỉ yêu cầu cổng chuyển tiếp. Bạn biết đấy, mọi chuyện không dễ dàng gì, tôi sẽ phải chia yêu cầu đẹp của bạn thành nhiều phần để nó kết thúc và lắp ráp bất kỳ thứ gì họ gửi lại từ tất cả hàng ngàn gói tôi nhận được ... à, đúng rồi, bạn không quan tâm. Hình. "

Trong khi đó, tại trụ sở của CNN, một tin nhắn cuối cùng đã kết thúc trước cửa Máy chủ Web.

Máy chủ web CNN: "Nzhôô! Một khách hàng! Anh ấy muốn tin tức! Trang trước! Còn nó thì sao?"

CNN Server Side Script Engine: "Phải, sẽ làm! Trang trước, phải không?"

Máy chủ cơ sở dữ liệu CNN: "Yey! Làm việc cho tôi! Bạn cần nội dung gì?"

CNN Server Side Script Engine: "... ừ, xin lỗi DB, tôi có một bản sao của trang trước ngay trong bộ nhớ cache của mình, không cần phải biên dịch bất cứ thứ gì. Nhưng này, lấy ID người dùng này và lưu trữ, tôi sẽ gửi nó với khách hàng nữa, vì vậy chúng tôi biết chúng ta sẽ nói chuyện với ai sau này. "

Máy chủ cơ sở dữ liệu CNN: "Yey!"

Quay lại máy tính của người dùng ...

TCP / IP: "Ooookay, đây là câu trả lời. Ôi trời, tại sao tôi lại có cảm giác đây sẽ là một thứ lớn ..."

Trình duyệt: "Uh, wow ... cái này có tất cả các loại mã javascript ... rất nhiều hình ảnh, vài hình thức ... Phải, điều này sẽ mất một lúc để hiển thị. Tốt hơn hãy truy cập nó. Hey, hệ thống IP, Có rất nhiều thứ bạn sẽ cần lấy. Hãy xem tôi cần một vài bảng định kiểu từ i.cdn.turner.com - qua HTTP và yêu cầu tệp /cnn/.element/css/2.0/common.css. Và sau đó cũng nhận được một số tập lệnh đó tại i.cdn.turner.com, tôi đang đếm sáu cho đến nay ... "

TCP / IP: "Tôi nhận được hình ảnh. Chỉ cần cung cấp cho tôi địa chỉ máy chủ và tất cả những thứ đó. Và bọc nội dung tệp đó trong yêu cầu HTTP, tôi không muốn xử lý nó."

DNS: "Kiểm tra i.cdn.turner.com ... này, một chút chuyện nhỏ, nó thực sự được gọi là cdn.cnn.com.c. feetprint.net. IP là 4.23.41.126"

Trình duyệt: "Chắc chắn, chắc chắn ... đợi một chút, việc này sẽ mất vài giây để xử lý, tôi đang cố gắng hiểu tất cả kịch bản này ..."

TCP / IP: "Này, đây là CSS mà bạn yêu cầu. Ồ, và ... vâng, những đoạn script bổ sung đó cũng vừa quay trở lại."

Trình duyệt: "Whew, có thêm ... một số loại quảng cáo video!"

TCP / IP: "Ôi trời, nghe có vẻ vui ...

Trình duyệt: "Cũng có tất cả các loại hình ảnh! Và CSS này trông hơi khó chịu ... đúng vậy, vì vậy nếu phần đó ở đó và có dòng này ở trên cùng ... làm thế nào trên trái đất sẽ phù hợp nữa ... không , Tôi sẽ phải kéo dài điều này một chút để làm cho nó ... Ồ, nhưng tập tin CSS khác ghi đè lên quy tắc đó ... Chà, điều này sẽ không phải là một phần dễ dàng để kết xuất, chắc chắn là vậy! "

TCP / IP: "Ok, ok, đừng làm tôi mất tập trung trong một giây, vẫn còn nhiều việc phải làm ở đây."

Trình duyệt: "Người dùng, đây là một báo cáo tiến độ nhỏ cho bạn. Xin lỗi, tất cả có thể mất vài giây, có tới 140 yếu tố khác nhau để tải và đến lúc 16 giờ."

Một hoặc hai giây sau ...

TCP / IP: "Ok, đó là tất cả. Này, nghe này ... xin lỗi tôi đã chộp lấy bạn trước đó, bạn quản lý ở đó à? Điều này có vẻ như cũng khá tải cho bạn."

Trình duyệt: "Phew, yeah, tất cả các trang web này ngày nay, họ chắc chắn không làm cho bạn dễ dàng. Chà, tôi sẽ quản lý. Đó là những gì tôi ở đây."

TCP / IP: "Tôi đoán nó khá nặng đối với tất cả chúng ta những ngày này ... ồ, đừng hả hê ở đó DNS!"

Trình duyệt: "Này người dùng! Trang web đã sẵn sàng - hãy lấy tin tức của bạn!"


17
Vì vậy, đây là những gì PC của tôi làm sau khi trời tối.
Phoshi

7
Giải thích tuyệt vời ... Hat to off you ... Bingo ...
Rachel

7
Phần kể chuyện tuyệt vời :)
Michael Borgwardt

5
@dex: ... và cho đến ngày nay họ vẫn đang phát triển mạnh mẽ, sắp xếp tất cả các yêu cầu hay thay đổi của người dùng với sự siêng năng đáng khen ngợi trong sách lịch sử. Nhưng, giống như tất cả mọi thứ, một ngày nào đó sẽ là thời gian của họ để nghỉ hưu, trở nên duyên dáng với những cách tiếp cận hiện đại hơn phù hợp với thời hiện đại hơn. Nhưng hãy yên tâm rằng họ sẽ luôn ở đó, trong di sản của chúng tôi, theo dõi với một nụ cười hiểu biết và truyền lại cho các thế hệ tương lai tất cả những bài học khó khăn mà họ đã học được trong thời kỳ sôi động của truyền thông internet mới nổi này.
Ilari Kajaste

3
Hoan hô cho những người không tán thành, phải không, @wahnfrieden? Tôi cho rằng nó khá chính xác, và nhiều thông tin.
Jürgen A. Erhard


18
  • Trình duyệt chia những gì bạn nhập (URL) thành tên máy chủ và đường dẫn.
  • Trình duyệt tạo một yêu cầu HTTP để yêu cầu dữ liệu tại tên máy chủ và đường dẫn cụ thể.
  • Trình duyệt thực hiện tra cứu DNS để phân giải tên máy chủ thành địa chỉ IP.
  • Trình duyệt tạo kết nối TCP / IP đến máy tính được chỉ định qua địa chỉ IP. (Kết nối này thực sự được hình thành từ nhiều máy tính, mỗi máy tính truyền dữ liệu tiếp theo.)
  • Trình duyệt gửi yêu cầu HTTP xuống kết nối đến địa chỉ IP đã cho.
  • Máy tính đó nhận được yêu cầu HTTP từ kết nối TCP / IP và chuyển nó đến chương trình máy chủ web.
  • Máy chủ web đọc tên máy chủ và đường dẫn và tìm hoặc tạo dữ liệu mà bạn đã yêu cầu.
  • Máy chủ web tạo ra phản hồi HTTP chứa dữ liệu đó.
  • Máy chủ web gửi phản hồi HTTP đó xuống kết nối TCP / IP đến máy của bạn.
  • Trình duyệt nhận được phản hồi HTTP và chia nó thành các tiêu đề (mô tả dữ liệu) và phần thân (chính dữ liệu).
  • Trình duyệt diễn giải dữ liệu để quyết định cách hiển thị nó trong trình duyệt - thông thường đây là dữ liệu HTML chỉ định các loại thông tin và dạng chung của chúng.
  • Một số dữ liệu sẽ là siêu dữ liệu chỉ định thêm các tài nguyên cần được tải, chẳng hạn như biểu định kiểu để bố cục chi tiết hoặc hình ảnh nội tuyến hoặc phim Flash. Siêu dữ liệu này được chỉ định lại dưới dạng URL và toàn bộ quá trình này lặp lại cho từng cái cho đến khi tất cả được tải.

Điều này là tốt, nhưng có thể đáng để đề cập đến bộ nhớ đệm (trên trình duyệt và các nơi khác), proxy, cân bằng tải, CDN, v.v. Tôi nghĩ rằng đây là tất cả một phần quan trọng để hiểu cách các trang web bận rộn (trên trái đất) xử lý hàng triệu yêu cầu gần như đồng thời cho số lượng lớn nội dung.
Sam Dutton

12

Bước đầu tiên là tra cứu DNS (Máy chủ tên miền). Nó sử dụng các máy chủ DNS được chỉ định trong cài đặt mạng của bạn (hoặc được DHCP cung cấp cho bạn) để tra cứu tên miền hàng đầu (cnn.com) và sau đó yêu cầu máy chủ tên miền đó cho địa chỉ IP của tên miền phụ được chỉ định (www.cnn.com).

Sau khi có địa chỉ IP, trình duyệt của bạn bắt đầu liên lạc với máy chủ web. Điều này được thực hiện bằng cách sử dụng giao thức được chỉ định (thường mặc định là HTTP 1.1). Yêu cầu 'NHẬN' cho '/' được gửi tới máy chủ, đáp ứng với nội dung tài liệu HTML và các tiêu đề thích hợp (thông báo cho trình duyệt loại nội dung, HTML và thông tin khác của tài liệu). Sau đó, trình duyệt phân tích tài liệu và tìm thấy bất kỳ URL nào cần nhúng vào trang (như hình ảnh hoặc biểu định kiểu được liên kết) và thực hiện các yêu cầu GET trên mỗi URL.

Trình duyệt cũng thường tự động thực hiện yêu cầu GET cho '/favicon.ico' (để hiển thị biểu tượng CNN nhỏ bên cạnh tiêu đề trang web).

Trình duyệt của bạn cũng có thể sẽ chỉ định trong các tiêu đề yêu cầu của nó rằng nó muốn nén nội dung phản hồi, sử dụng thuật toán gzip. Điều này làm cho tệp tải xuống nhỏ hơn nhiều, nếu máy chủ hỗ trợ. Điều này hoàn toàn minh bạch với bạn, mặc dù nó giống như tải xuống một tệp ZIP và giải nén nó.

Khi bạn tải lại trang, trình duyệt của bạn sẽ kiểm tra xem trang đó đã được lưu trong hệ thống của bạn chưa và nếu có, nó sẽ thực hiện một yêu cầu HTTP chỉ cho tiêu đề của tài liệu và kiểm tra ngày sửa đổi của nó. Nếu ngày này muộn hơn bản sao được lưu trong bộ nhớ cache, nó sẽ yêu cầu lại toàn bộ nội dung tài liệu và làm mới trang. Nếu không, nó chỉ sử dụng bản sao địa phương của bạn.


Anh ta không biết những điều cơ bản và bạn chỉ cần thổi cho anh ta bằng DNS, DHCP và IP. Hãy giải thích cấu trúc gói IP cho anh ấy!

6
Ông hỏi chi tiết kỹ thuật. Anh ta có thể tra cứu IP nếu muốn.

Có điều là anh ta có lẽ không muốn tìm kiếm bất cứ điều gì ... :(

8

Thiếu rất nhiều so với các câu trả lời khác là những gì xảy ra ở phía CNN:

  • Một máy tại CNN nhận được tin nhắn từ máy tính của bạn yêu cầu trang.
  • Nó chuyển hướng yêu cầu này đến một trong nhiều máy tính mà CNN đang sử dụng cho trang web của mình (lý do là vì vậy, bằng cách này, bạn có thể truyền bá công việc kết hợp các trang web phản hồi trên nhiều máy tính)
  • Máy tính CNN nhận được yêu cầu của bạn và nó phản hồi với một trang web có lẽ gần như hoàn toàn được tính toán trước, nhưng có thể nó sẽ thay đổi một số điều trước khi gửi cho bạn (có thể là quảng cáo ở đầu trang, có thể là tin tức tiêu đề). Đôi khi, máy tính lắp ráp trang từ rất nhiều thành phần nhỏ mỗi khi chúng nhận được yêu cầu; không chắc CNN làm gì
  • Phản hồi thực hiện thông qua mạng tới máy tính của bạn, sau đó hiển thị nó.
  • câu trả lời không bao gồm các hình ảnh: máy tính của bạn sau đó sẽ gửi một yêu cầu khác cho các hình ảnh và khá nhiều tình huống tương tự xảy ra.

6

Đây rõ ràng không phải là một lời giải thích kỹ thuật, nhưng nó là một trợ giúp trực quan dễ thương (từ Vladstudio.com tuyệt vời ) có thể hữu ích cho một số người:

Internet hoạt động như thế nào


1

Thông tin bạn vừa hỏi có thể lấp đầy vài chục cuốn sách. Nhưng đây là nỗ lực của tôi để giải thích nó: Trình duyệt của bạn cho hệ điều hành của bạn tìm địa chỉ IP của cnn.com. Sau đó, hệ điều hành của bạn yêu cầu một máy chủ DNS cho địa chỉ IP cho cnn.com. IP được gửi đến broswer liên hệ với địa chỉ IP và yêu cầu trang. cnn.com sau đó gửi cho bạn và trang html. Các trình duyệt phân tích cú pháp html và gửi thông tin đến trình kết xuất HTML. Trình duyệt sau đó sẽ báo cho HĐH những gì sẽ hiển thị trên màn hình.



1

Có một video thực sự hay của "Sendung mit der Maus" (một chương trình truyền hình dành cho trẻ em rất nổi tiếng của Đức giải thích về công nghệ cho trẻ em):

Die Sendung mit der Maus - Wie funktioniert das Internet (Cách thức hoạt động của Internet).

Thật không may, chỉ bằng tiếng Đức, nhưng buồn cười ngay cả khi không có văn bản. Đàn ông với những chiếc mũ bảo hiểm ngộ nghĩnh chơi các gói IP và dữ liệu được ghi vào thẻ giấy. Cổ điển :-).

BTW, những lời giải thích thực sự khá tốt.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.