本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java
, 数据结构与算法
, iOS
, 安卓
, python
, flutter
等等, 如有需要, 联系微信tsaievan
.
当你在浏览器中输入网址时发生了什么?
这不仅仅是一个面试问题, 也是我们每次在浏览器里输入网址的时候也常常思考这个问题, 这篇文章给我们提供了针对这个问题的一些思考.
Step 1. URL
被输进浏览器地址栏
Step 2. 如果你的请求对象在浏览器缓存中, 请看Step 8
Step 3. DNS
查找服务器ip
地址
当我们想连接google.com
时, 我们实际上是连接 google
的web
服务器的主机. 这主机有一个74.125.236.65
的ip地址, 此时, 如果你在浏览器中输入http://74.125.236.65
, 也会显示google
的主页, 看起来http://google.com
和http://74.125.236.65
是同一个东西, 没什么区别, 但其实不是这样, 每一秒钟, Google
都要接收巨量的网络请求,为了满足这一点, Google
在多个地点都拥有多个服务器, 因而我们需要让Google
决定哪一台服务器最能满足我们的需求. 使用google.com
就为我们做到了这一点. 我们在浏览器里输入google.com
, DNS(Domain Name System)开始起作用, 并将URL
解析为合适的ip
地址
下面几点总结了DNS
服务器工作的步骤:
-
检查浏览器缓存
浏览器会在一定时间内保存DNS
缓存记录, 所以,DNS
查询第一步就是来到这里 -
检查操作系统缓存
如果浏览器没有缓存记录, 就看操作系统是否保存了最近的DNS
查询缓存 -
路由缓存
如果上面步骤都没有获取到DNS
记录, 那么将会查看路由是否有缓存 -
ISP
缓存
如果所有步骤都失败, 那么就会去ISP
寻找. 首先, 将会在ISP
缓存中找, 如果没找到,ISP
的DNS
的递归查找将起作用. 像Google
这样的网站, 通过DNS
查找到正确的ip
地址是一个极其复杂的过程.
Step 4. 浏览器建立一个和服务器的TCP
连接
Step 5. 浏览器想服务器发送一个HTTP
请求
浏览器根据HTTP
协议向服务器发送一个GET
请求
GET http://google.com/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
浏览器以请求头的形式向URL
关联的服务器发送一些元信息. User-Agent
描述了浏览器的属性, Accept-Encoding
描述了可以接收的响应的类型.Connection
告诉服务器保持已经建立的TCP
连接. 请求也包含Cookies
, 这是保存在客户端的一些元信息, 它包含了之前浏览同一个站点的session
信息, 这些session
信息以键值对的形式保存. 例如: 登录Google
的用户名.
Step 6. 服务器处理请求
浏览器包装的HTTP
请求被服务器上运行的特殊程序所处理, 常见的服务器有Apache
和IIS
等. web
服务器把这些请求转给合适的请求处理者处理
例如URL
-http://edusagar.com/index.php
被一个在PHP
文件(index.php)
写入的程序所处理. 一旦GET
请求被接收, Apache
服务器部署了执行index.php
文件的环境. 然后, 这个php
程序将会产生一个响应-在本例中是一个HTML
响应. 这个响应会根据HTTP
协议被返回给浏览器.
Step 7. 浏览器收到HTTP
响应
HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Connection: Keep-Alive
Content-length: 1215
Date: Fri, 30 May 2014 08:10:15 GMT
.........<some blob> ................
HTTP
响应会标明服务器返回的状态码:
1xx 信息消息
2xx 响应成功
3xx 定位到其他URL
4xx 客户端错误
5xx 服务端错误
服务端设定多种其他的响应头帮助浏览器渲染合适的内容, Content-Typ
告诉浏览器显示何种类型的内容. Content-length
表明响应的字节数. 根据Content-Encoding
, 浏览器可以解析响应体的数据
Step 8. 浏览器显示HTML
内容
Rendering of html content is also done in phases.
渲染HTML
内容也在这个阶段完成
浏览器先渲染HTML
的初略的框架, 然后发送多个GET
请求去获取其他内容. 例如: 如果一个HTML
响应包含一张图片<img src="/assets/img/logo.png" />
的标签, 浏览器将发送一个HTTP
的GET
请求到服务器去获取这张图片. 这个过程又会把整个流程再走一遍, 但其实情况并没那么糟, 图片, JS
, CSS
文件等, 这些静态文件将被浏览器缓存, 下次就不用再去从服务器获取了.
Step 9. 客户端与服务器的交互
一旦HTML
页面被加载, 用户就有多种途径和服务器交互. 例如, 他可以填写一个登录表单登录网站, 这同样需要走上述的流程, 唯一的区别是这个HTTP
请求是POST
而不是GET
, 服务器将发送表单数据到服务器去处理(本例中是用户名和密码)
一旦服务器给用户授权, 它将会发送合适的HTML
内容(可能是用户的资料)返回给浏览器, 隐忍用户可以在登录请求处理之后看到新的页面
Step 10 AJAX
查询
另一种客户端与服务器的交互是通过AJAX(Asynchronous JavaScript And XML)]
请求, 这是一个异步的GET/POST
请求, 服务器可以通过多种途径返回响应json
,xml
,html
等, AJAX
请求不阻塞当前的页面, 而是在后台线程运行, 正因如此, 可以动态地通过发起AJAX
请求去修改web
页面.
希望本文能够对文章标题所提出的问题给予读者一点提示
What happens when you type a URL in browser
网友评论