1.用户输入网址,浏览器发起DNS查询请求
系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)。这样便可获得系统缓存中的记录。
路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。
1
2
3
4
5
6
7
|
GET http: //www.cricode.com/ HTTP/1.1 Host: www.cricode.com Connection: keep-alive Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8 |
Web服务器通常通过监听80端口,来获取客户端的HTTP请求。与客户端建立好TCP连接后,web服务器开始接受客户端发来的数据,并通过HTTP解码,从接受到的网络数据中解析出请求的url信息以前其他诸如Accept-Encoding、Accept-Language等信息。Web服务器根据HTTP请求头的信息,得到响应数据返回给客户端。一个典型的HTTP响应头数据报如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HTTP/1.1 200 OK Date: Fri, 24 Oct 2014 13:55:18 GMT Server: Apache X-Powered-By: PHP/5.4.32 Keep-Alive: timeout=5, max=10000 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=UTF-8 a0f6 <</span>!DOCTYPE HTML> <</span>html> <</span>head> <</span>meta charset= "UTF-8" > <</span>meta http-equiv= "X-UA-Compatible" content= "IE=10,IE=9,IE=8" > <</span>meta name= "viewport" content= "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" > <</span>title><</span>/title> <</span>body class = "home" ><</span>/body> <</span>/html> |
至此,一个HTTP通信过程完成。web服务器会根据HTTP请求头中的Connection字段值决定是否关闭TCP链接通道,当Connection字段值为keep-alive时,web服务器不会立即关闭此连接。(这一步一开始也许还会有重定向及浏览器跟踪重定向地址等)。
5、浏览器解析http response
(1)html文档解析(DOM Tree)
在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了。生成解析树即dom树,是由dom元素及属性节点组成,树的根是document对象。
(2)浏览器发送获取嵌入在HTML中的对象
加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载。
但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。
(3)css解析(parser Render Tree)
浏览器下载css文件,将css文件解析为样式表对象,并用来渲染dom tree。该对象包含css规则,该规则包含选择器和声明对象。
css元素遍历的顺序,是从树的低端向上遍历。
(4)js解析
浏览器UI线程:单线程,大多数浏览器(比如chrome)让一个单线程共用于执行javascrip和更新用户界面。
js阻塞页面:浏览器里的http请求被阻塞一般都是由js所引起,具体原因是js文件在下载完毕之后会立即执行,而js执行时候会阻塞浏览器的其他行为,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞。
js阻塞原因:之所以会阻塞UI线程的执行,是因为js能控制UI的展示,而页面加载的规则是要顺序执行,所以在碰到js代码时候UI线程会首先执行它