这是一道经典的面试常见问题,涉及到了很多方面的知识。
这篇文章简单介绍当你访问一个URL时,背后到底发生了什么。
1. 输入URL
URL全称Uniform Resource Locator(统一资源定位器), 用于定位互联网上的资源
完整的URL包含
- 协议,如http、https、ftp
- 域名,如baidu.com
- 端口,如http一般使用80端口
- 文件路径 ,如/htm_data/20/1510/1441477.html
2. DNS解析
要想知道具体那台服务器上有你需要的资源,需要知道它的IP地址。由于IP地址不方便记忆,所以互联网的设计者发明了域名。当输入一个URL时,比如输入https://www.baidu.com,需要将其中的域名baidu.com转换为IP地址。DNS(Domain Name System)提供的服务就是将域名转换到对应的IP地址。
DNS解析的过程如下:
- 从浏览器缓存中查询。浏览器会缓存一段时间的DNS记录。
- 从操作系统缓存中查询。如果浏览器中没有包含对应的记录,讲继续查询操作系统缓存。系统缓存主要存在hosts文件中。
- 从路由器中查询DNS缓存。路由器通常也会有自己的DNS缓存。
- 从ISP的DNS缓存中查询。
-
从域名服务器中递归查询。由本地域名服务器依次查询根域名服务器、顶级域名服务器、主域名服务器,查询到后相应给客户端主机。
3. 浏览器发送HTTP请求到Web服务器
HTTP是应用层协议,它使用TCP作为其传输层协议。
浏览器构建HTTP请求报文并通过TCP协议发送至服务器制定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文由请求行、请求报头和请求正文三部分组成。
GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,zh-TW;q=0.8,en-US;q=0.7,en;q=0.6
Cookie: BAIDUID=BE...
常用的HTTP请求方法有GET, PUT, POST, DELETE。
Header中的各字段:User-Agent表示发出请求的客户端的类型。Accept和Accept-Encoding表示接受何种类型的响应。Cookies是网站保存在客户端本地的键值对,一般包含用户登录信息和一些用户设置。
4. Web服务器处理请求并返回HTTP响应
Web服务器接收这个HTTP请求,处理这个请求,并返回响应结果。
Web服务器接收HTTP请求并决定使用哪个请求处理程序处理这个请求。常见的 web服务器有 Apache、Nginx、IIS、Lighttpd。
请求处理程序读取请求和参数以及cookies。它会读取以及可能更新一些存储在服务器的数据,接着请求处理程序会生成一个HTML响应。这个过程就是后端工程师所关心的部分。一般会用到一些服务端的Web框架,如Djnago(Python)和Express(Node/Javascript)。
HTTP/1.1 200 OK
Bdpagetype: 1
Bdqid: 0xd47475a20004bb07
Cache-Control: private
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Cxy_all: baidu+39f5578e2dd536a8ec249b22b2c3b62d
Date: Wed, 18 Apr 2018 02:03:13 GMT
Expires: Wed, 18 Apr 2018 02:02:18 GM
HTTP响应也由三部分组成:状态码, 响应报头和响应报文。
TODO: 详细说明HTTP
5. 浏览器解析并渲染页面
浏览器一边接收HTTP文件,一边渲染页面。
随着浏览器渲染HTML,浏览器会注意到有些标签需要请求其他URLs的资源,浏览器将会重复以上的步骤,如在DNS中查询域名,并向URL发送请求等步骤。
- 遇到link标签引用的CSS文件
- 遇到script标签引用的JavaScript文件
- 遇到img标签引用的图片
浏览器执行script标签中的JavaScript代码