在浏览器输入URL到页面呈现发生了什么

DNS查询

DNS查询顺序如下，若其中任何一步成功则直接跳到建立链接部分：

1. 浏览器自身DNS
2. 操作系统DNS
3. 本地hosts文件
4. 向域名服务器发送请求

建立链接

TCP三次握手(three-way handshaking)

• 发送方:SYN(synchronize)
• 接收方:SYN/ACK(acknowledgement),确认信息传达
• 发送方:ACK - 确认接收方在线可收消息，握手结束
• Accept

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

发送HTTP请求

• 报文首部(GET /index.html HTTP/1.1)

• 空行(CR+LF)
• 报文主体

注意:

1. HTTP是无连接、无状态的，即HTTP在传输完成后就会断开，并且下一次登录时不会记录上次的登录状态。

从HTTP/1.1开始才支持持久连接，即通信一次以后连接不中断。

请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3 若采用持久连接请求管线化方式： 请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3

使用管线化的条件：

• 服务端需要支持管线化
• 只有GET和HEAD可以进行管线化，POST请求有所限制
• 管线化不会影响响应到来的顺序

2. 关于CR(Carriage Return,回车)和LF(Line Feed,换行)

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

服务器发送响应

• 报文首部(HTTP/1.1 200 OK)

响应状态码 状态码信息

• 空行(CR+LF)
• 报文主体

客户端收到页面，浏览器渲染页面

执行以下过程：

解析HTML

• 根据DOCTYPE来确定文档类型(注意HTML4中有严格和宽松模式)
• 构建DOM树(根据HTML构建类似于二叉树的结构树)
• 下载资源

js - 等下下载并执行后解析

构建渲染树

根据DOM和CSSOM树渲染，不可见元素不被会渲染

浏览器布局渲染

• 布局 - 根据渲染树布局(layout)
• 绘制 - 通过GUI在屏幕上绘制每个点

扩展:

• repaint:

虽然在业务中我们无法避免repaint，但是我们也应尽量减少repaint：利用fragment来插入多个节点。

• reflow:

这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

reflow常见情况：

• 增删改DOM节点
• 移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
• 修改width、display等CSS样式
• resize窗口或是滚动的时候
• 修改网页默认字体(不建议)

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