通常的简单的url像 http://www.baidu.com/ 包含了 通信协议 也就是(http,https),服务器地址(www.baidu.com),端口号(http默认是80,https默认是443端口,https也就是加密的http,一般默认的访问index.html
-
当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址
-
浏览器查找域名的 IP 地址
请求一旦发起,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS(因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析))请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问
- 浏览器向 web 服务器发送一个 HTTP 请求
在通过DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接:
第一次握手: 建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认
第二次握手: 服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态
第三次握手: 客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手
-
浏览器向服务器发送HTTP请求
-
服务器返回一个 HTTP 响应,浏览器接收响应
服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码,响应头,响应报文三个部分
状态码主要包括以下部分:
- 指示信息–表示请求已接收,继续处理
- 成功–表示请求已被成功接收、理解、接受
- 重定向–要完成请求必须进行更进一步的操作
- 客户端错误–请求有语法错误或请求无法实现
- 服务器端错误–服务器未能实现合法的请求 响应头主要由Cache-Control、 Connection、Date、Pragma等组成 响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成
- 页面渲染
如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树
在浏览器还没接收到完整的 HTML 文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念:Reflow和Repaint。
- Reflow,也称作Layout,中文叫回流,一般意味着元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树,这个过程称为Reflow。
- Repaint,中文重绘,意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如,背景色,边框颜色,文字颜色等),此时只需要应用新样式绘制这个元素就OK了,这个过程称为Repaint。
所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法,一个结点的reflow很有可能导致子结点,甚至父点以及同级结点的reflow
下面这些动作有很大可能会是成本比较高的:
- 增加、删除、修改DOM结点时,会导致Reflow或Repaint
- 移动DOM的位置,或是搞个动画的时候
- 内容发生变化
- 修改CSS样式的时候
- Resize窗口的时候(移动端没有这个问题),或是滚动的时候
- 修改网页的默认字体时
- 基本上来说,reflow有如下的几个原因:
Initial,网页初始化的时候
Incremental,一些js在操作DOM树时
Resize,其些元件的尺寸变了
StyleChange,如果CSS的属性发生变化了
Dirty,几个Incremental的reflow发生在同一个frame的子树上
- 关闭TCP连接或继续保持连接
通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)
第一次挥手:是浏览器发完数据后,发送FIN请求断开连接
第二次挥手:是服务器发送ACK表示同意,如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥,但考虑到服务器可能还有数据要发送
第三次挥手:服务器发送到FIN
第四次挥手:浏览器需要返回ACK表示同意