科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网网络频道路由交换输入facebook的URL按下回车后究竟发生了什么

输入facebook的URL按下回车后究竟发生了什么

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

作为一名软件开发或是网络技术人员,你应该对Web应用程序的运行原理和协议交换,以及涉及到的技术:如浏览器、HTTP、HTML、Web服务器和请求处理程序等都有所了解才行。在这篇文章中,我们将深入探讨你访问某个URL时发生的一系列事情。

来源:51CTO 2011年4月1日

关键字: Web服务器 DNS服务器 URL

  • 评论
  • 分享微博
  • 分享邮件

在本页阅读全文(共3页)

  7、服务器发回HTML响应

图 8

  图 8

  下面是服务器生成并发回的一个响应:

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

2b3????????T?n?@????[...]
The entire response is 36 kB, the bulk of them in the byte blob at the end that I trimmed.
The Content-Encoding header tells the browser that the response body is compressed using the gzip algorithm.

After decompressing the blob, you'll see the HTML you'd expect:
<!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" />
...

  除了压缩外,消息头指定是否以及如何缓存页面,cookie设置(在这个响应中没有),隐私信息等等。

  注意消息头中的Content-Typt设置成text/html了,它告诉浏览器以HTML呈现响应的内容,而不是作为一个文件下载,浏览器通过消息头决定如何解释响应的内容,但也会考虑其他因素,如URL扩展。

  8、浏览器开始渲染HTML

  在浏览器未接收完整个HTML文档之前,它就开始渲染了。

图 9

  图 9

  9、浏览器发送嵌入到HTML中的对象请求

图 10

  图 10

  在浏览器渲染HTML时,它会发现还需要访问其它URL,浏览器继续为这些资源发出GET请求,下面是我访问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

  每个URL都会经历访问HTML页面类似的过程,因此,浏览器会在DNS中查找域名,发送请求,跟随重定向等。

  但静态文件 - 和动态页面不一样 - 允许浏览器缓存,有些文件在下一次访问时可直接从浏览器缓存中提取,不用联系服务器,浏览器知道某个特定文件的缓存有效期,因为第一次从服务器返回到浏览器时就包含了Expires头信息,此外,每个响应可能也包含一个类似版本号的ETag头,如果浏览器看到一个ETag,它会立即停止传输文件。

  你能猜到URL中的fbcdn.net代表什么吗?没错,它表示Facebook内容交付网络,Facebook使用内容交付网络(CDN)分发静态内容 - 图像,样式表和JavaScript文件,因此,文件将被复制到全球许多服务器上。

  静态内容通常会占用网站的大量带宽,但也很容易被复制到CDN网络中的加速节点,一般情况下,网站会使用第三方CDN提供商,而不是自己运营CDN,例如,Facebook的静态文件由世界最大的CDN提供商Akamai托管。

  我们还是举一个例子,当你ping static.ak.fbcdn.net时,你会从akamai.net服务器得到一个应答,同样,如果你分多次ping URL,可能会从不同的服务器得到应答,这说明背后的负载均衡正在发生作用。

  10、浏览器进一步发送异步(Ajax)请求

图 11

图 11

  根据Web 2.0的精神,即使页面渲染完毕后,客户端也要继续和服务器通信。

  例如,Facebook chat会持续更新你的朋友列表(他们登录和退出都会很快反馈给你),在你浏览器中执行的JavaScript向服务器发送一个异步请求,异步请求是通过编程实现的指向特定URL的GET或POST请求,还是以Facebook为例,客户端向http://www.facebook.com/ajax/chat/buddy_list.php发送一个POST请求,获取你的在线朋友列表。

  这种模式有时指的是Ajax,Ajax表示异步JavaScript和XML,但服务器不一定非要以XML格式进行响应,例如,Facebook返回JavaScript代码片段响应异步请求。

  Fiddler工具允许你查看浏览器发送的异步请求,实际上,你不但可以观察请求,而且还可以修改这些请求并进行重发,因此可以轻松欺骗Ajax请求,许多在线游戏的开发人员也因此而郁闷不已。

  Facebook chat提供了一个有趣的Ajax问题示例:将数据从服务器推向客户端。因为HTTP是一个请求-响应协议,聊天服务器不能将新消息推送给客户端,相反,客户端必须每隔几秒从服务器去取数据,以了解是否有新消息到达。

  长轮询在这种情景中对降低服务器负载很有用,轮询时如果服务器没有任何新消息,它就不发回应答,同时,如果该客户端有新消息到达,服务器会发现未完成的请求,并返回消息作为响应。

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章