从输入URL后反生什么

一、DNS解析: 将域名通过DNS解析出服务器地址

1. 浏览器缓存
2. 系统缓存
3. 路由器缓存

二、TCP连接

1. 3次握手，建立连接（https时会经过ssl加密，多一次握手）
2. 数据传输
3. 4次挥手 断开连接

三、发送请求

1. 请求方式 

   get        查询操作

   post      提交操作

   put        修改资源操作，俩次请求一样，后面的会覆盖前面的

   delete   资产删除操作

   head    类似get，只是没有响应内容，主要用户获取报文头

   trace    回显服务器收到的请求，用于测试诊断

   options 获取当前uri所支持的请求方式，标记在Allow中

2. 报文头
3. 报文体

四：服务器响应

1. 响应码 

   1**   服务器收到请求，需要请求者继续操作

   2**   响应成功

   3**   重定向

   4**   客户端错误，一般是参数不对

   5**   服务端错误，代码或者服务器配置异常

2. 响应头
3. 响应体

五、渲染界面

1. html解析

   解析html构建DOM树结构。

2. CSS解析

   解析CSS构建CSSOM树结构。

3. 生成渲染树

   合并DOM、CSSOM树，生成渲染树，这一步会遍历DOM树可见节点并和CSSOM相互匹配。（display:none、script标签等）会被忽略。最后输出的就是包含节点和样式的渲染树。

4. 布局（回流）

   遍历渲染树，计算每个节点在设备窗口的位置、大小等，并输出一个个盒模型，

5. 绘制渲染树（重绘）

   将各个节点（包含颜色等尺寸位置等）绘制成一个个图层。最后通过Composite（渲染层合并）将这些图层通过合理的顺序合并成一个图层，显示在浏览器上。

在浏览器PerFormance中可以看到这个过程

• 1）回流

     改变元素的尺寸（border、margin、padding）、dom结构增删、窗口的变化等都会触发回流，重新进行布局计算，重新绘制界面。

• 2）重绘

     修改样式（颜色、背景色、visibility）不影响布局时，浏览器会进行重绘更新元素，重新进行像素绘制。

  ---

  js的加载会阻塞DOM树的构建，因为dom解析器在js请求回来后，会将控制器交个js引擎，等执行完再进行dom构建，隐藏script标签最好放在body底部，避免阻塞。

  同理为了避免DOM树构建完成后等待CSSOM树的构建，css文件优先放到head位置加载。

  CSS的解析方式是由右到左的（减少便利次数），因此写样式时，尽量避免多重选择器。

  回流必然会导致重绘，重绘不一定回流，因此应避免回流操作。

补充：

1. 性能优化 

2. js作用域

3. Event Loop