浏览器输入url到页面呈现发生了什么?
1:输入url
浏览器会开启一个线程来处理这个请求,对URL分析判断如果是http协议就按照Web方式来处理,浏览器会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址。对于 google的chrome 的浏览器,他甚至会直接从缓存中把网页展示出来。
2:域名解析
通过DNS解析获取网址的IP地址,
IP 地址:IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码,通过IP 地址才能确定一台主机位置。服务器本质也是一台主机,想要访问某个服务器,必须先知道它的IP 地址;
域名(DN):IP地址由四个数字组成,中间用点号连接,在使用过程中难记忆且易输入错误,所以用我们熟悉的字母和数字组合来代替纯数字的IP地址,比如我们只会记住www.baidu.com(百度域名) 而不是220.181.112.244(百度的其中一个IP地址);
DNS: 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器IP 地址才能建立连接,所以需要通过DNS 把域名解析成一个IP 地址。
域名与 URL 是两个概念:
域名是一台或一组服务器的名称,用来确定服务器在 Internet上的位置;
URL 是统一资源定位符,用来确定某一个文件的具体位置,
IP 地址与域名不是一一对应的关系:可以把多个提供相同服务的服务器 IP 设置为同一个域名,但在同一时刻一个域名只能解析出一个IP地址;同时,一个IP 地址可以绑定多个域名,数量不限;
DNS查询的两种方式:递归查询和迭代查询。
3:浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。
拿到域名对应的IP地址之后,浏览器会以一个随机端口向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求。最终建立了TCP/IP的连接。浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。
TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,
(1)第一次握手:建立连接时,客户端A发送SYN包(SYN=j)到服务器B,并进入SYN_SEND状态,等待服务器B确认。
(2)第二次握手:服务器B收到SYN包,必须确认客户A的SYN(ACK=j+1),同时自己也发送一个SYN包(SYN=k),即SYN+ACK包,此时服务器B进入SYN_RECV状态。
(3)第三次握手:客户端A收到服务器B的SYN+ACK包,向服务器B发送确认包ACK(ACK=k+1),此包发送完毕,客户端A和服务器B进入ESTABLISHED状态,完成三次握手。
完成三次握手,客户端与服务器开始传送数据。
三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”
4:浏览器向 web 服务器发送一个 HTTP 请求
客户端发送一个HTTP请求到服务器的请求消息包括以下格式:请求行(request line)、请求头部(header)、空行和请求数据
5:服务器处理请求并返回HTTP报文。
服务器响应消息
HTTP响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。
![](http://upload-images.jianshu.io/upload_images/5346460-7f5d51d0138e0efc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6:浏览器收到请求开始解析渲染页面。
浏览器请求到HTML代码后,在生成DOM的最开始阶段,并行发起css、图片、js的请求,无论他们是否在HEAD里。
•DOM
俗称节点树,它是浏览器根据HTML结构经过各种处理(特别是容错处理)生成的树,它代表了整个网页的结构。
•CSSOM
样式规则树,它是浏览器分析网页对应的CSS文件生成的树,它跟网页的HTML结构没有任何关系,仅仅是CSS文件的树型结构。要特别注意的是浏览器发现需要下载一个CSS文件时,它会马上停止渲染页面,并且在新的样式规则树未被建立前都不会再进行渲染或者更新页面,也就是CSS会阻塞页面的渲染。因此,必须尽可能精简CSS文件内容以及将CSS文件的link标签放到页面头部。
•Render tree
渲染树,浏览器在DOM树和CSSOM树生成之后融合成为真正用于渲染的树,它的结构跟DOM树一致,但是同时又根据CSSOM树添加了相关的样式信息,浏览器会根据渲染树在页面区域画图,最终形成网页界面。
解析过程中,浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。
当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。因为JS有可能会修改DOM,最为经典的document.write,这意味着,在JS执行完成前,后续所有资源的下载可能是没有必要的。js的下载和执行会阻塞Dom树的构建
7:连接结束。
HTTP三点注意事项:
- HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
- HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
- HTTP是无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。