在浏览器中输入网址到网页展现全部过程

最新推荐文章于 2023-04-21 11:34:30 发布
最新推荐文章于 2023-04-21 11:34:30 发布
阅读量941 收藏 1
点赞数
分类专栏： 网络篇 文章标签： 输入网址到网页显示的全过程

序

最近接触到了整个网站的开发流程，所以就总结一下网站的运行机制，对网络应用如何工作有一个完整的层次化的认知。

第一步过程

  • 首先，你得在浏览器里输入要网址:

    • 例如百度或者facebook。

第二步过程

  • 浏览器查找域名的IP地址（域名就是指输入的网址）

    • 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。

    • 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。

    • ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

    • 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会 有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

第三步过程

  • 在请求之前，需要浏览器与服务器建立连接（TCP或者UDP）

    • 与服务器建立连接时TCP属于安全的连接，需要三次握手，这里不在说明。
  • 与服务器响应软件建立管道连接（socket）

第四步过程

  • 浏览器给web服务器发送一个HTTP请求

    • 因为像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; [...]
DontTrackMeHere: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

  • 解读上面请求体

    • GET 这个请求定义了要读取的URL： “HTTP://facebook.com/”。

    • Connection头要求服务器为了后边的请求不要关闭TCP连接。

    • 请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。

  • 补充说明

    • 用来看原始HTTP请求及其相应的工具很多。作者比较喜欢使用fiddler，当然也有像FireBug这样其他的工具。这些软件在网站优 化时会帮上很大忙。 
      除了获取请求，还有一种是发送请求，它常在提交表单用到。发送请求通过URL传递其参数(e.g.: HTTP://robozzle.com/puzzle.aspx?id=85)。发送请求在请求正文头之后发送其参数。

    • 像“HTTP://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“HTTP: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加 斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。

第五步过程

服务器“处理”请求

  • 服务器接收到获取请求，然后处理并返回一个响应。 
    这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西- 就像作者博客这样简单的网站，何况像baidu那样访问量大的网站呢！

  • Web 服务器软件web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求来处理它。请求处理就 是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY…）。

  • 举 个最简单的例子，需求处理可以以映射网站地址结构的文件层次存储。像HTTP://example.com/folder1/page1.aspx这个地 址会映射/httpdocs/folder1/page1.aspx这个文件。

  • web服务器软件可以设置成为地址人工的对应请求处理，这样 page1.aspx的发布地址就可以是HTTP://example.com/folder1/page1。* 请求处理请求处理阅读 请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。

  • 所 有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会有一个SQL数据库来存储数据，存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案有：sharding （基于主键值讲数据表分散到多个数据库中），复制，利用弱语义一致性的简化数据库。 
    委托工作给批处理是一个廉价保持数据更新的技术。举例来讲，Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新（作者猜测是这样的，改功能如何完善不得而知）。批处理作业更新会导致一些不太重要的数据陈旧，但能使数据更新耕作更快更简洁。

第六步

  • 服务器发回一个HTML响应.
  • 下面就是一个响应头（响应头与body体分开的） 
    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 
    2b3Tn@[…] 
    整个响应大小为35kB，其中大部分在整理后以blob类型传输。

内容编码头告诉浏览器整个响应体用gzip算法进行压缩。解压blob块后，你可以看到如下期望的HTML：

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 

第七步

  • 浏览器开始显示HTML 
    • 在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了

第八步

  • 浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
  • 下面是几个我们访问facebook.com时需要重获取的几个URL：

图片 
http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif 
http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif 
… 
CSS 式样表 
http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css 
http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css 
… 
JavaScript 文件 
http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js 
http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js 
… 
这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

但 不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取。服务器的响应中包含了静态文件保存的期限 信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应都可能包含像版本号一样工作的ETag头（被请求变量的实体值），如果浏览器观察到文件的版本 ETag信息已经存在，就马上停止这个文件的传输。

试着猜猜看“fbcdn.net”在地址中代表什么？聪明的答案是”Facebook内容分发网络”。Facebook利用内容分发网络（CDN）分发像图片，CSS表和javascript文件这些静态文件。所以，这些文件会在全球很多CDN的数据中心中留下备份。

静态内容往往代表站点的带宽大小，也能通过CDN轻松的复制。通常网站会使用第三方的CDN。例如，Facebook的静态文件由最大的CDN提供商Akamai来托管。

举例来讲，当你试着ping static.ak.fbcdn.Net的时候，可能会从某个akamai.net服务器上获得响应。有意思的是，当你同样再ping一次的时候，响应的服务器可能就不一样，这说明幕后的负载平衡开始起作用了。


更多内容参见：http://www.cnblogs.com/jesse131/p/6215961.html

YinghaoGuo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2013最新猎豹安全浏览器 3.0.14 官方正式版
05-10
猎豹浏览器具有首创的智能切换引擎，动态选择内核匹配不同网页，并且完美支持HTML5新国际网页标准，网页展现更炫酷，更动感，极速浏览的同时也充分保证兼容性。 猎豹安全浏览器3.0新特性： -新增安全中心, 全新...
Python调用腾讯API进行人像动漫化
热门推荐
ZHW-鲜橙大AI课题组的博客
03-29 4万+
Python调用腾讯API进行人像动漫化1. 作者介绍2. API获取的获取3. 代码调试3.1整体结构3.2代码展示3.3完整代码3.4效果展示：4. 问题与分析 1. 作者介绍 李犇，男， 西安工程大学电子信息学院，21级硕士研究生 研究方向：智能信息处理 电子邮箱：[email protected] 孟莉苹，女，西安工程大学电子信息学院，2021级硕士研究生，张宏伟人工智能课题组 研究方向：机器视觉与人工智能 电子邮件：[email protected] 2. API获取的获取 1.确保电脑正确连接网
从输入网址到获得页面的过程
qq_50726065的博客
05-04 4万+
从输入网址到获得页面的过程 查询DNS，获取域名对应的IP地址 浏览器搜索自身的DNS缓存，如果找到则返回IP； 否则，浏览器就向本地域名服务器请求查询IP，如果存在，则返回IP； 否则，本地域名服务器发起一个迭代DNS请求，查询到IP后返回给本地主机； 浏览器获得域名对应的IP地址后，发起HTTP三次握手； TCP/IP连接建立起来后，浏览器就可以向服务器发送http请求； 服务器接受到这个请求，根据路径参数，经过后端的一些处理生成HTML页面，代码返回给浏览器； 浏览器拿到完整的HT
关于浏览器输入一个网址后页面经历的过程总结
薛定谔的猫-前端领域
04-27 1万+
浏览器的架构如上图，包括。 主流程 二、用户输入 根据规则，把这段内容加上协议，合成为完整的 URL。 判断输入的关键字是搜索内容，还是请求的 URL 如果是搜索内容：使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。 如果是地址：添加协议头等信息 三、网络请求 强缓存 浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果...
JavaScript基础之浏览器地址栏输入URL会发生什么
lee前端技术站
07-04 5370
当我们在浏览器的地址栏输入一个地址后，接下来到底会发生什么呢？ 当你在浏览器中输入一个地址的时候，浏览器会从浏览历史记录，或者书签等地方模糊匹配出你想要的地址，提示补全url，对于Chrome来说，可以做到你想搜索的网页已经呈现出来。这个时候，其实还没有按下回车或者是搜索按钮。那么当一旦按下回车或者是搜索键后会发生什么呢？ 首先，浏览器会将输入的地址解析成对应的IP 因为浏览器一般都会有2-30分钟左右的dns缓存，所以首先回去缓存中去查找对应的IP,如果有，则返回IP; dns中没有查找到IP,那
整理的用Python编写的爬虫文档.pdf
最新发布
06-13
1 Python 爬虫入门教程 [Python]网络爬虫（一）：网络爬虫的定义 网络爬虫... 打开网页的过程其实就是浏览器作为一个浏览的"客户端"，向服务器 端发送了 一次请求，把服务器端的文件"抓"到本地，再进行解释、 展现。 2
SEM培训资料.docx
06-06
在优化过程中你是否遇到过下面的问题？ SEM培训资料全文共16页，当前为第1页。 通常我们在分析数据后都会得到很多需要改进方向，就像上面所说；提升CTR、增加点击量、扩充关键词等等。大局部的同学会分几个方面，...
ebsite for net网站建设系统最新官方版
04-03
过去的CMS都支持模型,但都只是只支持内容模型,eBSite支持的模型包括，内容模型，分类模型，用户模型，与表单模型,eBSite的模型可以自定义模型展现字段的中文名称，还能设置不同字段对应的输入控件，更加值得一提的是...
IBM WebSphere Portal门户开发笔记01
03-11
5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式（值） 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...
输入网址到网页显示的过程是什么？
Waghhhh的博客
10-28 3万+
原文链接：https://blog.csdn.net/donggx/article/details/71402871 从用户输入一个网址到网页最终展现到用户面前，中间的大致流程总结如下： 1) 在客户端浏览器中输入网址URL。 2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。 3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。 4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。 5) WEB服务器响应请求，返回指定的URL.
在浏览器的地址栏输入网址的背后
桐花思雨
04-14 1万+
目录浏览器的地址栏中输入网址，回车之后查找 `DNS` 缓存发起 `DNS` 查询`DNS` 采用分布式设计的特点分布式、层次数据库 浏览器的地址栏中输入网址，回车之后 本文将以 Web 页面的请求历程为例，来和你聊聊计算机网络中这些协议是怎样工作的、数据包是怎么收发的，从输入 URL 、敲击回车到最终完成页面呈现在你面前的这个过程 首先，我打开了 Web Browser ，然后在 Google 浏览器 URL 地址栏中输入了 maps.google.com 然后 …… 查找 DNS 缓存 浏览器在这个
在浏览器中输入Google.com并且按下回车之后发生了什么？
weixin_30655569的博客
05-30 1153
　　本文试图回答一个古老的面试问题：当你在浏览器中输入google.com并且按下回车之后发生了什么？ 　　不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。 　　这将是一个协作的过程，所以深入挖掘吧，并且帮助我们一起完善它。仍然有大量的细节等待着你来添加，欢迎向我们发送Pull Requset！ 　　回车键按下 　　为了从头开始，我们选择键盘上的回车键被按到最低处...
当你输入网址到网页呈现发生了什么？
weixin_44132193的博客
01-12 3950
我们在搜索框输入网址后到底发生了什么呢？ 参考教程 https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works 我们会在浏览器的搜索框内输入一个网址（域名） 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址 找到之后，浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端 服务器同意客户端的请求后，将网页的文件以数据包的形式传输到浏览器 浏览器将数据包
浏览器中输入网址到看到网页内容经历了哪些过程
h295928126的博客
09-20 2576
浏览器中输入网址到看到网页内容经历了哪些过程
从输入 URL 网址到获得页面的过程，浏览器做了什么？ (越详细越好)
秋天，黄叶坠地，凉风有信。
03-26 1万+
导航过程发生了什么 也许大多数人使用 Chrome 最多的场景就是在地址栏输入关键字进行搜索或者输入地址导航到某个网站，我们来看看浏览器是怎么看待这个过程的。 我们知道浏览器 Tab 外的工作主要由 Browser Process 掌控，Browser Process 又对这些工作进一步划分，使用不同线程进行处理： UI thread ： 控制浏览器上的按钮及输入框； network thread: 处理网络请求，从网上获取数据； storage thread: 控制文件等的访问； 浏览器主进程中的不同
如何在百度搜索到自己的网站？新站必看
jian8182的博客
06-15 1万+
步骤一： 首先，打开这个网页http://www.baidu.com/search/url_submit.html
从浏览器输入网址到页面显示, 经历了什么?
洪晓鸿
04-21 2182
当我们在浏览器中输入网址并按下回车键，从输入网址到页面显示这个过程包含了多个步骤。什么步骤???
Spring官网下载最新jar包
m0_67393157的博客
04-27 402
1.浏览器搜索Spring，或者直接输入网址https://spring.io/ 2.点击图中标出的小树叶图标（SPRING FRAMEWORK）； 3.点击图中的小猫图标，进入GitHub网站； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IkMuVJUx-1651024601397)(//img-blog.csdn.net/20180319161207151)] 4.进入GitHub网站之后，继续向下浏览，会看到如下内容，然后点击图中标出的"Spring Framewo
请说明从用户在浏览器地址栏中输入网页URL地址到在浏览器中显示出Web页面期间浏览器的工作过程。
05-30
当用户在浏览器地址栏中输入网页URL地址后，浏览器会进行以下步骤： 1. URL解析：浏览器会解析URL，将其分解成协议、域名、端口号、路径等部分。 2. DNS解析：浏览器会根据解析出来的域名去DNS服务器中查找对应的IP地址。 3. 建立TCP连接：浏览器会通过IP地址和端口号建立TCP连接。 4. 发送HTTP请求：浏览器会向服务器发送HTTP请求，请求中包含请求头、请求体等信息。 5. 接收HTTP响应：服务器会将HTTP响应发送回浏览器，响应中包含响应头、响应体等信息。 6. 渲染页面：浏览器会根据接收到的响应，解析HTML、CSS、JavaScript等文件，构建DOM树、CSSOM树和渲染树，并将页面渲染出来。 7. 关闭TCP连接：页面渲染完成后，浏览器会关闭TCP连接。 以上是浏览器在从用户输入网页URL地址到显示Web页面期间的工作过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值