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

本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

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

这不仅仅是一个面试问题, 也是我们每次在浏览器里输入网址的时候也常常思考这个问题, 这篇文章给我们提供了针对这个问题的一些思考.

Step 1. URL被输进浏览器地址栏
Step 2. 如果你的请求对象在浏览器缓存中, 请看Step 8
Step 3. DNS查找服务器ip地址

当我们想连接google.com时, 我们实际上是连接 googleweb服务器的主机. 这主机有一个74.125.236.65的ip地址, 此时, 如果你在浏览器中输入http://74.125.236.65, 也会显示google的主页, 看起来http://google.comhttp://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缓存中找, 如果没找到, ISPDNS递归查找将起作用. 像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请求被服务器上运行的特殊程序所处理, 常见的服务器有ApacheIIS等. 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
......... ................

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响应包含一张图片的标签, 浏览器将发送一个HTTPGET请求到服务器去获取这张图片. 这个过程又会把整个流程再走一遍, 但其实情况并没那么糟, 图片, 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

PS. 本人有若干成套学习视频, 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

你可能感兴趣的:(当你在浏览器中输入网址时发生了什么?)