一个网页被显示的前生今世(一)

cover-image

作为一个前端开发人员, 首先对于浏览器, 以及各种WEB服务的工作机理要有一个清楚的认识. 从你在地址栏输入网址的那一刻起到网页显示在你的显示器上, 这期中到底发生了什么, 本文将浅显地讨论这方面的机理.

##先来讲点题外话.URI(URL)

####什么是URI
就中文翻译通用资源标识符(URI)来讲, 或者我更喜欢叫它统一资源定位器(URL), 似乎很难把它与网址挂上钩. 实际上, 网址就是一种基本的URL. 不知道有多少人思考过, 我们经常输入的网址格式一般都是www.xxxx.com, 或者再加上协议名 http https 端口以及路径什么的 或者再加上账号密码！如下图：
URL

第一部分：协议名(以单个冒号结束)
第二部分：用户信息 也就是账号密码！(登陆ftp时常用)
第三部分：主机名(也就是域名)
第四部分：端口
第五部分：查询，这里有个bug。。。 应该是?号后的内容才是查询！
第六部分：片段ID(是不会发送到服务器的！)

浏览器解析URL之后, 采用相应的协议和地址来向服务器发送信息.

当然浏览器对残缺的URL也具有一定的解析(矫正把..)能力, 比如 http:www.baidu.com 也是可以解析的..

我们发散一下思维, 对于一些协议, 比如mongodb:// ssh://也可以用user:password@domain的方式来发送认证.

####PS:至于URI与URL的区别, 据说业内还在争论, 所以暂且就看做一样好了…

##DNS查询
浏览器开始向对应的地址发送请求了, 第一步是通过访问的域名找出DNS地址.

PS: 如202.202.43.125这样奇葩的IP网址就不用了…

DNS查找过程如下：

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

  • 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会操作系统发出一个调用, 系统从它的DNS缓存中取出对应的缓存, 例如Windows下可以通过 ipconfig /dnsflush 命令来清除这个缓存。如果系统缓存中也没有记录, 系统还会在hosts文件中查找这个记录。

  • 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
    ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

  • 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。递归的顶层是全球只有7台的DNS根服务器, 前几天的国内根服务器故障影响的余波可是还没消散呢→_→

##向web服务器发送HTTP请求
浏览器向我们的服务器发送了一个GET请求!
我们使用Chrome的开发者工具来看一下这个请求头(header)

HTTP HEADER

我们可以看到Request Method暴露了它是一个GET方式的请求.而Request URL定义了要读取的URL

浏览器定义的User-Agent头表明了请求发起者的身份, 这使得服务器能够根据不同的系统环境,浏览器来响应不同的内容. Connection头要求服务器为了后边的请求不要关闭TCP连接。 另外Accept和Accept-Encoding头标明了浏览器希望接受的响应类型.

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

##301重定向
观察仔细的同学会发现, 如果我们在浏览器的地址栏输入baidu.com, 打开的网页总是www.baidu.com, 难道是浏览器的智能解析吗? 其实不然, 在这里服务器捣了一次鬼. 它发送了一个301重定向响应, 这样浏览器就会访问“http://www.baidu.com/” 而非“http://baidu.com/”。

HTTP/1.1 301 Moved Permanently

####为什么需要301重定向呢?

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。
其中一个原因跟搜索引擎排名SEO有关。你看, 如果一个页面有两个地址，就像 http://www.baidu.com/ 和 http://baidu.com/ ，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。

####前端的童鞋需要注意什么
让我们回忆一下如何写一个超级链接? 超简单 是不是! 其实这里有一个隐含的301重定向. 我们在写a标签(锚)的时候经常会这样写<a href="http://www.baidu.com">Baidu.</a>

服务器会自动地将 http://www.baidu.com 跳转到 http://www.baidu.com/ , 不要说看不出区别而跳转总是需要时间的, 在这些无关紧要的地方浪费时间实在是太可耻了是不是→_→

多次301的坏处总是大于好处的. 它不仅会导致打开网站的性能变差, 而且它的滥用会导致搜索引擎对网站的降权. 因为当一个页面有好几个名字时，它可能会在缓存里出现好几次。

##服务器处理请求
Web服务器端由apache/nginx…将各种请求交给响应的后台程序来处理….

##未完待续

###> Go to 一个网页被显示的前生今世(二)