乐趣区

关于面试:当你在浏览器中输入网址后发生了什么

jiezi

当你在浏览器中输出网址后产生了什么?

这是一个高频的前端面试题，这个问题能够考查面试者对互联网基本原理的理解，包含域名解析、HTTP 申请、服务器响应等方面的常识。

域名解析 -IP 寻址

浏览器会向 DNS 服务器发送申请，将域名解析为对应的 IP 地址。

什么是 DNS？

域名零碎 (Domain Name System)
是互联网的一项服务。它作为将域名和 IP 地址互相映射的一个分布式数据库，可能使人更不便地拜访互联网。DNS 应用 TCP 和 UDP 端口 53。

这个过程会从上面的缓存中查问 DNS 记录：

  • 浏览器缓存（浏览器缓存一段时间的 DNS 记录）
  • 零碎缓存
  • 路由器缓存
  • ISP DNS 缓存
  • ISP 递归查问

浏览器向指标服务器发送 HTTP 申请

浏览器会向指标服务器发送 HTTP 申请，申请特定的资源，如 HTML 文件、图片、CSS 文件等。

GET http://facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

例如下面发送的 HTTP 申请应用的 GET 办法，蕴含了 UA 信息，Connection 申请头通知服务器放弃 TCP 连贯关上，不便后续应用，还携带了 Cookie。

指标服务器响应

服务器接管到申请后会解决并返回相应的资源，包含 HTTP 响应头和响应体。

这里波及到常见的 Web 服务器：IIS or Apache，Nginx。这些服务器软件会决定把哪些申请交给某些特定的服务解决（request handler）- 可能是由 ASP.NET，PHP，Ruby，Golang，Node.js 这些开发语言编写的服务端程序。

下面的服务读取 http 申请携带的参数，来获取或者更新存储在服务器上的数据。

浏览器接管资源渲染页面 

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
    pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="DSP LAW"
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 12 Feb 2010 09:05:55 GMT

响应头 Content-Type 批示返回的文件类型为 html，浏览器接管到服务器返回的数据后会解析并渲染页面，展现给用户。

其余

在页面加载过程中可能会波及到重定向、缓存、Cookie 等其余操作。

参考链接

  • https://www.cloudflare-cn.com/learning/dns/what-is-dns/
退出移动版