当我们在浏览器中输入一个URL后，发生了什么？

(1)浏览器解析

(2)查询缓存

(3)DNS查询

顺序如下，若其中一步成功则直接进去建立链接部分：
- 浏览器自身DNS
- 操作系统DNS
- 本地hosts文件
- 像域名服务器发送请求

(4)建立链接
* TCP三次握手(three-way handshaking)
* 发送方:SYN(synchronize)
* 接收方:SYN/ACK(acknowledgement),确认信息传达
* 发送方:ACK - 确认接收方在线可收消息，握手结束
* Accept

* TCP三次握手的的好处在于，发送方可以确认接收方仍然在线，不会因为白发送而浪费资源。

(5)发送HTTP请求
- 报文首部(GET /index.html HTTP/1.1)
- 方法
- URL
- HTTP版本
- 空行(CR+LF)
- 报文主体

注意:
1.HTTP是无连接、无状态的，即HTTP在传输完成后就会断开，并且下一次登录时不会记录上次的登录状态。
2.关于CR(Carriage Return,回车)和LF(Line Feed,换行)

Dos和Windows采用CR/LF表示下一行
UNIX/Linux采用LF表示下一行
MAC OS系统则采用CR表示下一行

(6)服务器发送响应
* 报文首部(HTTP/1.1 200 OK)
- HTTP版本
- 响应状态码
- 状态码信息
* 空行(CR+LF)
* 报文主体

(7)客户端收到页面

(8)解析HTML
* 构建DOM树
* 下载资源
* CSS - 构建CSSOM树
* js - 等下下载并执行后解析

(9)构建渲染树
根据DOM和CSSOM树渲染，不可见元素不被会渲染

(10)浏览器布局渲染
* 布局 - 根据渲染树布局
* 绘制 - 在屏幕上绘制每个点

扩展:
repaint:
* repaint发生更改时，元素外观被改变，且在没有改变布局的情况下发生，如改变outline，visibility，background color，不会影响到dom结构

reflow:
* 与repaint区别就是他会影响dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素
* 这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

reflow常见情况：
* 增删改DOM节点
* 移动DOM的位置或是动画显示
* 修改width、display等CSS样式
* resize窗口或是滚动的时候
* 修改网页默认字体

如：display:none会触发reflow和repaint，而visibility:hidden只会产生repaint