从地址栏输入URL到页面加载完成发生了什么？
总体的大概是有以下几个步骤：
- 浏览器输入地址后按下回车
- 浏览器查看当前页面是否被缓存，并比较缓存是否过期
- DNS解析相应的ip
- 根据IP建立TCP连接（三次握手）
- HTTP发起请求，
- 服务器处理请求，浏览器接受HTTP响应
- 页面渲染，构建DOM树
- 关闭TCP连接（四次挥手）
1、URL
常见的URL是由协议名，域名，端口号这三部分组成，这里的端口号一般是默认的，索引隐藏。常见的协议是HTTP协议，除此之外还有加密的HTTPS，FTP，FILE等。HTTP，默认端口是80，HTTPS默认端口是443，
同源策略：
一个源：如果是两个页面的协议，端口，域名都相同，则这个页面具有相同的源。
同源策略是浏览器的一个安全功能。不同源的客户端在脚本在没有明确授权的情况下，不能读写的对方的资源。
2、缓存
HTTP的缓存有多种类型，根据是否需要重新向服务器发起请求来分类，可以将其分为强制缓存和对比缓存。
强制缓存，判断HTTP首部字段:cache-control Expires
Expires是一个‘绝对时间，即服务器时间。浏览器检查当前如果还没失效，就直接使用缓存文件。这种处理方法存在一个问题就是客户端时间和浏览器时间可能会不一样，所以这种方法很少使用。
cache-control：中的max-age保存一个相对时间，例如max-age=154545s的这样一个值，浏览器接收到文件后，缓存在max-age时间内的就是有效。如果Expires和cache-control同时存在，浏览器是先使用cache-control。
对比缓存通过HTTP的last-modified，Etag字段进行判断。
last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。
Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。
3、DNS域名解析
我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。
首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。
如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。
最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。
递归查询，按上一级DNS服务器->上上级->....逐级向上查询找到IP地址。
4、TCP连接
在通过第一步的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连接成功）状态，完成三次握手。
完成三次握手，客户端与服务器开始传送数据。
5、浏览器向服务器发送HTTP请求
http协议报文
1.请求报文(请求行/请求头/请求数据/空行)
请求行
求方法字段、URL字段和HTTP协议版本
例如：GET /index.html HTTP/1.1
get方法将数据拼接在url后面，传递参数受限
请求方法：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
请求头(key value形式)
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：主机地址
请求数据
post方法中，会把数据以key value形式发送请求
空行
发送回车符和换行符，通知服务器以下不再有请求头
2.响应报文(状态行、消息报头、响应正文)
状态行
消息报头
响应正文
例如请求数据：
1 GET/sample.jspHTTP/1.1 ------------>请求行
2 Accept:image/gif.image/jpeg,*/*
3 Accept-Language:zh-cn
4 Connection:Keep-Alive
5 Host:localhost
6 User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
7 Accept-Encoding:gzip,deflate ---------------2-7为请求行
8
9 username=jinqiao&password=1234
第一行为http请求行，包含方法，URI 和http版本
2-7为请求头，包含浏览器，主机，接受的编码方式和压缩方式
第8行表示一个空行 表示请求头结束 这个空行是必须的
第9行是数据体，比如是需要查询的信息。
http响应体由三部分组成：
http响应由三个部分组成分别是状态行，响应头，响应正文。
状态行是由：HTTP-Version+Status-Code+Reason-Phrase
比如：HTTP/1.1 200 ok
分别表示http版本 + 状态码 + 状态代码的文本描述
6、浏览器接收响应
服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。
状态码主要包括以下部分
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
响应头主要由Cache-Control、 Connection、Date、Pragma等组成。
响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。
7、页面渲染
如果说响应的内容是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的子树上
8、关闭TCP连接或继续保持连接
通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。
第一次挥手是浏览器发完数据后，发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。
这样浏览器需要返回ACK表示同意，也就是第四次挥手。
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
