DNS查询
DNS查询顺序如下，若其中任何一步成功则直接跳到建立链接部分：
- 浏览器自身DNS
- 操作系统DNS
- 本地hosts文件
- 向域名服务器发送请求
建立链接
TCP三次握手(three-way handshaking)
- 发送方:SYN(synchronize)
- 接收方:SYN/ACK(acknowledgement),确认信息传达
- 发送方:ACK - 确认接收方在线可收消息，握手结束
- Accept
TCP三次握手的的好处在于：发送方可以确认接收方仍然在线，不会因为白发送而浪费资源。
发送HTTP请求
- 报文首部(GET /index.html HTTP/1.1)
方法 URL HTTP版本
- 空行(CR+LF)
- 报文主体
注意:
- HTTP是无连接、无状态的，即HTTP在传输完成后就会断开，并且下一次登录时不会记录上次的登录状态。 从HTTP/1.1开始才支持持久连接，即通信一次以后连接不中断。
正常为请求一次响应一次: 请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3 若采用持久连接请求管线化方式： 请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
使用管线化的条件：
- 服务端需要支持管线化
- 只有GET和HEAD可以进行管线化，POST请求有所限制
- 管线化不会影响响应到来的顺序
- 关于CR(Carriage Return,回车)和LF(Line Feed,换行)
Dos和Windows采用CR/LF表示下一行 UNIX/Linux采用LF表示下一行 MAC OS系统则采用CR表示下一行
服务器发送响应
- 报文首部(HTTP/1.1 200 OK)
HTTP版本 响应状态码 状态码信息
- 空行(CR+LF)
- 报文主体
客户端收到页面，浏览器渲染页面
执行以下过程：
解析HTML
- 根据DOCTYPE来确定文档类型(注意HTML4中有严格和宽松模式)
- 构建DOM树(根据HTML构建类似于二叉树的结构树)
- 下载资源
CSS - 构建CSSOM树 js - 等下下载并执行后解析
构建渲染树
根据DOM和CSSOM树渲染，不可见元素不被会渲染
浏览器布局渲染
- 布局 - 根据渲染树布局(layout)
- 绘制 - 通过GUI在屏幕上绘制每个点
扩展:
- repaint:
repaint发生更改时，元素外观被改变，且在没有改变布局的情况下发生，如改变outline，visibility，background color，不会影响到dom结构 虽然在业务中我们无法避免repaint，但是我们也应尽量减少repaint：利用fragment来插入多个节点。
- reflow:
与repaint区别就是他会影响dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素 这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
reflow常见情况：
- 增删改DOM节点
- 移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
- 修改width、display等CSS样式
- resize窗口或是滚动的时候
- 修改网页默认字体(不建议) 如：display:none会触发reflow和repaint，而visibility:hidden只会产生repaint
