<CSS常用的水平垂直居中方法 ES6二叉树的实现>

浏览器打开页面的过程中发生了什么

#### 前言
　　这个问题老调重弹，却经久未衰，因为它的开放性。如果问外行人，可能回答：“就是浏览器向服务器发送请求，服务器返回给浏览器一个页面。”如果问内行人，答案则可能各不相同，回答的越“清楚”，疑问则越多。
　　说不如写清晰，因此决定，从前端的角度，  把自己的理解写下来，其中只谈及前端相关部分，其他诸如键盘、显示器、内存，CPU、电阻、 电  、光纤、光、光子、电子、能量之类的基本不涉及，倒不是为言简意赅，而是知识匮乏。
　　因为网站情况不同，此处使用本站博客<http://www.boatsky.com/blog/list.html>为例。
主要有以下几个大的步骤，有的步骤有交叉，并不严格按上大步骤走完才走下个
一、用域名找到服务器IP
二、HTTP包装数据
三、TCP传输数据
四、服务器处理
五、浏览器渲染页面

#### 用域名找到服务器IP
##### 浏览器DNS缓存
　　浏览器输入域名后，优先使用浏览器DNS缓存的IP，以chrome为例，使用chrome://dns 可查看哪些域名被缓存了，DNS缓存虽好，缺点也有，曾经遇到内网与外网域名相同（二级域名相同，三级域名不同，这时却缓存了二级域名），当先访问内网之后，再访问外网时，则依然访问的是内网的问题。
　　清除DNS缓存，打开chrome://net-internals/#dns ，点击clear host cache。同时，点击HSTS后，在Delete domain处输入完整域名

##### hosts映射
　　如浏览器DNS无该缓存，继续查找本地的hosts文件是否有这个网址映射关系，该文件在windows系统下位于C:\Windows\System32\drivers\etc下，Mac在/private/etc/下，可自行修改删除，同时有些抓包工具fiddler+willow，可以看到域名指向的IP，同时也可以修改，且hosts优先级高于抓包工具

##### 本地DNS解析器缓存查找
　　如hosts文件无该映射，则在本地DNS解析器缓存查找
　　查看方法，windows cmd下ipconfig /displaydns
　　删除方法， windows cmd下 ipconfig/flushdns

##### DNS服务器
　　如果没有指定DNS服务器，则在还会查找路由器的DNS缓存，如路由器没有该缓存，则去默认的DNS服务器（很多人都是设置为自动获取）查找。如果指定的DNS服务器，直接指向该DNS服务器，该DNS服务器一般是网络服务商，又名本地DNS服务器，可以在TCP/IP参数里面查看首选本地DNS服务器IP是什么，其中本地DNS服务器会对域名进行缓存，所有使用该DNS服务器的对该域名都使用同一缓存。

如果本地DNS服务器无该缓存，分种两种情况，如使用转发模式，则该DNS服务器会查找上级DNS服务器，以此循环，直到找到域名服务器对应的DNS服务器；如非转发模式，则本地DNS服务器，发至13台根DNS服务器，根DNS服务器，再向下递归找到管理该域名的域名服务商对应的DNS服务器。

插个题外话，以上13台根DNS服务器指的IPv4,其中1主8辅，分别：9个在美国，英国1个，瑞典1个，日本1个。
IPv6则有25个，3主22辅，3主在中美日三国，分别：中国4，美国3，日本1，法国3，印度3， 德国2 ，俄罗斯1， 意大利1， 西班牙1， 奥地利1， 瑞士1， 智利1， 南非1， 澳大利亚1， 荷兰1。从这也能反映出世界各国互联网人口与发展程度。
参考<a href="https://yeti-dns.org/operators.html" title="https://yeti-dns.org/operators.html" target="_blank" rel="nofollow">https://yeti-dns.org/operators.html</a>

#### HTTP包装数据
　　找到服务器IP后（假设该IP只对应一台服务器），客户端与服务器进行交互，有五层模型，分别是：应用层、传输层、网络层、数据链路层、物理层，而HTTP协议（HyperText Transfer Protocol）是应用层的一种实现，使用了ASCII文本的报文方式，分成请求报文与响应报文，其中报文分成起始行、首部字段、主体。
　　为了方便理解，请看该例子在chrome下的HTTP报文
```
General：
	Request URL:http://www.boatsky.com/blog/list.html
	Request Method:GET
	Status Code:200 OK
	Remote Address:139.162.109.34:80
	Referrer Policy:no-referrer-when-downgrade

Response Headers：
	Cache-Control:no-cache, private
	Connection:keep-alive
	Content-Encoding:gzip
	Content-Type:text/html; charset=UTF-8
	Date:Wed, 03 Jan 2018 15:02:25 GMT
	Server:nginx
	Set-Cookie: 略
	Transfer-Encoding:chunked
	Vary:Accept-Encoding

Request Headers：
	 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
	Accept-Encoding:gzip, deflate
	Accept-Language:zh-CN,zh;q=0.8
	Cache-Control:max-age=0
	Connection:keep-alive
	Cookie:略
	Host:www.boatsky.com
	Referer:http://www.boatsky.com/movie/list.html
	Upgrade-Insecure-Requests:1
	User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
```
　　General起始行，Response Headers响应首部 Request Headers为请求首部，另外返回的HTML页面则为主体，前两者是特定形式（除特殊扩展字段），后者则随意。

#### TCP传输数据
　　HTTP的连接，几乎都使用TCP/IP承载，操作系统提供了操纵TCP连接的工具，我们这里可以略过其的实现。客户端与服务器传输数据前需进行TCP连接，传说中的三次握手：
　　1.客户端向服务器发送一个小的TCP分组，其设置了特殊的SYN标记，表示其为连接请求
　　2.服务器接受该连接，进行连接参数计算后，返回给客户端一个TCP分组，SYN与ACK标记被置位，表示连接请求已被接受
　　3.客户端向服务器回送达一条确认信息，表示已成功建立。

等TCP流分段传输完成后，需要断开这个连接需要4次握手
　　1.客户端向服务器发送FIN请求，请求关闭连接
　　2.服务器收到后回返ACK标记，表示收到关闭请求
　　3.服务器关闭连接，发送FIN给客户
　　4.客户端返回ACK标记，表示已关闭

#### 服务器处理
　　那服务器是如何返回请求页面的呢？
　　本服务器使用nginx进行转发，nginx监听80端口，而域名后不带端口刚好就是默认的80，URL请求在nginx中进行解析。
　　简单看一下nginx相关配置:
```
location / {
	try_files $uri $uri/ /index.php$is_args$query_string;
}

location ~ \.php$ {
	try_files $uri =404;
	fastcgi_pass 127.0.0.1:9000;
	fastcgi_index index.php;
	fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
	include fastcgi_params;
}
```
　　因为[西法](http://www.boatsky.com "太空船博客")的网站使用php写的，还用了Laravel框架，先尝试查找该uri对应的文件，如果没找到，则把index.php放到url的域名后，这时再把所有.php的请求，转发到本机的监听9000端口的 FastCGI管理器 上，比如php自带的 php-cgi.exe，在windows可以使用php-cgi.exe -b 127.0.0.1:9000启动，当然更好的是使用PHP-FPM。 php-cgi解析php文件后，会返回一个html给nginx，nginx再返回给客户端。

#### 浏览器渲染页面
　　其实浏览器对资源一般是有缓存的，可以用ETag， Expires，Last-Modified等判断修改，有修改或过期才会从服务器中重新下载资源。
如果没有缓存，浏览器拿到html文档后，在内存中生成dom树，同时像css,js,img等资源文件与html是并行请求与获取的，css也会同时生成css树，这里为了分开域名，把资源放到res.boatsky.com域名上，增大并联量。
浏览器把dom树与css树合并一个 渲染树，在页面上进行渲染，为了让用户更快的看到部分内容，浏览器会一边解析一边渲染。
这部分在之前的博客提到过<a href="http://www.boatsky.com/blog/2.html" title="http://www.boatsky.com/blog/2.html">如何用正确的姿势写HTML</a>
  
 参考书《HTTP权威指南》

如果觉得有帮忙，您可以在本页底部留言。

浏览器打开页面的过程中发生了什么

全部留言

我要留言