从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL)

2024-03-14 16:32

本文主要是介绍从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

写在前面的话,这是一篇译文,阅读资料时顺带整理翻译的,原文地址:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/


作为一个程序员,你应该对web应用是如何工作的有一个高水平的认识,它工作过程都包含了哪些技术:浏览器、HTTP、HTML、web server、 request handlers等等。
这篇文章,我们将会对当你访问一个URL时所发生的一系列事情进行深入的探讨。

1.将URL输入到浏览器中

当然,这是最点单的一个,例如:facebook.conm

2.浏览器根据域名查找IP地址

image
浏览的第一步就是为访问域名计算出IP地址。DNS查找过程如下:

  • Browser cache(浏览器缓存)—浏览器会缓存DNS记录一段时间。有趣的是,操作系统并没有告诉浏览器每一个DNS记录缓存的存活时间,所以浏览器自己会缓存它们固定的一段时间(不同的浏览器存在差异,一般是2-30分钟)。
  • OS cache(操作系统缓存)—如果浏览器缓存中没有找到对应的记录,浏览器就会做一次系统请求(Windows系统中就是根据名称从host文件中获得IP地址)。操作系统有它自己的缓存。
  • Router cache(路由缓存)—请求会在你的路由器上继续进行,路由一般都会有自己的DNS缓存。
  • ISP DNS cache(ISP DNS缓存)—下一个地方就是查找ISP's DNS服务器了,当然,它也会有一份缓存。
  • Recursive search(递归查找)—你的ISP's DNS服务从根域名开始循环查找,根据.com查找顶级域名服务器,然后再到 Facebook 的域名服务器。通常来说,DNS服务器都会有.com域名服务器的缓存,所以根域名服务器不是必须的。

下面是一个DNS循环查找的图表: image

3.The browser sends a HTTP request to the web server

image
你可以确定 Facebook 的页面不是从浏览器缓存中取到的,因为动态页面会很快就过期失效的(把过期时间设置在过去)。
所以,浏览器将会向 Facebook 的服务器发送一个请求:

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[...]

GET 关键字表示请求获取: http://facebook.com/。浏览器的自我标识(User-Agent),和请求接受什么类型的响应。(Accept和Accept-Encoding)。Connection关键字请求服务器保持TCP链接。
请求也会包含这个域名下的cookies。

4.Facebook 服务器通过重定向进行响应

image
这是 Facebook 返回浏览器请求的响应:

HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location: http://www.facebook.com/
P3P: CP="DSP LAW"
Pragma: no-cache
Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;path=/; domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-Cnection: close
Date: Fri, 12 Feb 2010 05:09:51 GMT
Content-Length: 0

服务器响应通过301 Moved Permanently告诉浏览器访问 http://www.facebook.com/来代替http://facebook.com/.

5.浏览器重定向

image 浏览器现在知道http://www.facebook.com/是正确的URL地址,然后向这个地址发送了另一个GET请求:

GET http://www.facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
Host: www.facebook.com

请求头和上面的基本相同。

6.服务器处理请求

image 服务器将会接收GET请求,然后处理它,并且对它做出响应。
这看起来是个简单的任务,实际上这里会发生许多有趣的事情,即使是访问像我博客这样简单的网站,更不用说像 Facebook 这样的大型网站了。

  • web服务软件
    web服务软件(例如:IIS 或者 Apache)接收HTTP请求,并且决定采用哪种方法来处理这个请求。一个请求处理是一个进程(在ASP.NET, PHP, Ruby,...),包括读取请求和形成HTML响应。
  • 请求处理
    请求处理读取请求的参数和cookies。它可能会读取或者更新服务器上存储的数据。然后请求处理将会生成一个HTML响应。
7.服务器返回HTML响应

image
这是服务器返回的响应:

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 GMT2b3
��������T�n�@����[...]

整个响应是36KB。
Content-Encoding关键字告诉了浏览器响应主体内容是通过 gzip 方式进行压缩的。通过解压后,就可以看到你期盼已久的HTML了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="facebook" class=" no_js">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />

处理压缩方式外,响应头还指定了是否缓存页面,通过哪种方式缓存,cookies如何设置,隐私数据如何处理等等信息。

8.浏览器开始渲染HTML

在浏览器接收整个 HTML 文档之前,网站已经开始渲染了。

9.浏览器为嵌入的对象发送请求 (例如:图片等)

image
浏览器渲染HTML时,会注意的哪些需要发起请求的标准。然后发送GET请求为它们获取文件。
下面是我访问 Facebook ,浏览器做的请求:

  • Images http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gifhttp://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif …
  • CSS style sheets http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.csshttp://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css …
  • JavaScript files http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.jshttp://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js …

每个请求都会和请求HTML页面一样,走相似的流程。所以,浏览器会在DNS中查找域名,发送请求URL,重定向等等。
当然,静态文件是可以让浏览器缓存的。一些文件可以直接从缓存中获得,不用连接服务器。浏览器知道这些特有文件缓存多长时间,因为响应头的Expires关键字设置了这个文件的有效期。除此之外,每一个响应可能也会保留一个ETag头,它就像版本号一样。如果浏览器发现这个文件的ETag号已经存在了,它可以立即停止请求。

10.浏览器发送AJAX请求

image 在 web2.0 的时代,客户端可以在页面渲染完成之后继续和服务器进行交互。
例如,当你的好友登录或登出时,Facebook聊天会持续更新你的在线好友列表。为了更新你的在线好友列表, JavaScript 已经向服务器发送了 AJAX 请求了。


到此,当你访问一个URL时会发生什么基本到涉及到了,当然,里面的技术详细来讲还有太多太多了,比如:DNS服务器解析来做高并发、负载均衡,AJAX异步请求等等。但是,因为这些都不是这篇文章的主题,就不再补充了,以后遇到相关好的文章可以再翻译了哈!

这篇关于从 URL 输入到页面展现发生了什么?(What really happens when you navigate to a URL)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/809004

相关文章

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

Anaconda 中遇到CondaHTTPError: HTTP 404 NOT FOUND for url的问题及解决办法

最近在跑一个开源项目遇到了以下问题,查了很多资料都大(抄)同(来)小(抄)异(去)的,解决不了根本问题,费了很大的劲终于得以解决,记录如下: 1、问题及过程: (myenv) D:\Workspace\python\XXXXX>conda install python=3.6.13 Solving environment: done.....Proceed ([y]/n)? yDownloa

解决Office Word不能切换中文输入

我们在使用WORD的时可能会经常碰到WORD中无法输入中文的情况。因为,虽然我们安装了搜狗输入法,但是到我们在WORD中使用搜狗的输入法的切换中英文的按键的时候会发现根本没有效果,无法将输入法切换成中文的。下面我就介绍一下如何在WORD中把搜狗输入法切换到中文。

当你输入一个网址后都发生什么

原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/  作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等。 本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~

Weex入门教程之3,使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下,详细看官方教程 Node.js 环境 Node.js官网 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

ViewPager+fragment实现切换页面(一)

如今的很多应用中都是下面有一排按钮,点击可以切换页面,滑动也可以切换页面。下面就来简单的实现这个功能。 思路 首先肯定是会用到viewpager这个控件,为了能够向下兼容,最好用v4包下的viewpager,Activity要继承FragmentActivity 其次用一个集合来存储所有的fragment页面在设置viewpager的适配器时,把存储fragment页面的list集合传入ada

在 Qt Creator 中,输入 /** 并按下Enter可以自动生成 Doxygen 风格的注释

在 Qt Creator 中,当你输入 /** 时,确实会自动补全标准的 Doxygen 风格注释。这是因为 Qt Creator 支持 Doxygen 以及类似的文档注释风格,并且提供了代码自动补全功能。 以下是如何在 Qt Creator 中使用和显示这些注释标记的步骤: 1. 自动补全 Doxygen 风格注释 在 Qt Creator 中,你可以这样操作: 在你的代码中,将光标放在