头图

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

这是一个高频的前端面试题,这个问题可以考察面试者对互联网基本原理的了解,包括域名解析、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等其他操作。

参考链接


来了老弟
508 声望31 粉丝

纸上得来终觉浅,绝知此事要躬行