说一下浏览器输入URL发生了什么

说一下浏览器输入URL发生了什么？全流程分析

先上结果：每一项都是自己目前的理解

**

1：DNS解析

**
将输入的URL域名进行解析成ip地址，因为要建立连接就必须要知道服务器的ip地址
**

2：发送请求阶段

**
2.1：tcp三次握手

通过tcp三次握手与服务器建立连接，然后请求资源，判断是否是HTTP缓存，如果是强制缓存且在有效期内，不再向服务器发请求，如果是HTTP协商缓存向后端发送请求且和后端服务器对比，在有效期内，服务器返回304，直接从浏览器获取数据，如果不在有效期内服务器返回200，返回新数据
2.2 http1.0和http1.1区别
1.http是短链接,返回数据之后这次连接就断开了，而1.1是长连接，通过connetion请求头设置值为keep-alive，持久连接的两种方式：非流水线方式，一个请求结束了才支持下一个请求，流水线方式：客户端在收到相应之前就可以继续请求，但是响应必须要按照请求的先后顺序返回
2.缓存的设置方式不一样
强缓存
1.0中强缓存使用exprise设置缓存过期时间，内容是一个过期时间
1.1是用响应头中cache-control设置max-age=300,值是一个毫秒数
协商缓存
服务器响应的会在响应头中添加：
1.0 last-modified：文件修改时间，只要文件不修改，时间就不会变
1.1 etag:内容是hash值，内容不变hash不变
浏览器再次发送相同的http请求会在请求头中加入：
1.0 是用if-modifined-since
1.1是用if-none-match
然后服务器会去判断值是否相等，如果相等就命中缓存，返回304，未命中就返回最新的
3.request请求的一些比变化
1.1新增的put delete，options等请求方式
4.新增了一些错误响应码
410 永久删除
2.3http和https区别
http不安全 数据容易被监听窃取 默认端口80 可以直接请求https https安全 默认端口443 直接请求http会跨域
**

3.响应数据

---

3.1强制缓存和协商缓存
强缓存
服务器响应会在响应头中设置exprise和cache-control：
1.0中强缓存使用exprise设置缓存过期时间，内容是一个过期时间
1.1是用响应头中cache-control设置max-age=300,值是一个毫秒数
浏览器 再次请求的话不会通过服务器，而是直接从浏览器本地缓存中获取
协商缓存
服务器响应的会在响应头中添加：
1.0 last-modified：文件修改时间，只要文件不修改，时间就不会变
1.1 etag:内容是hash值，内容不变hash不变
浏览器再次发送相同的http请求会在请求头中加入：
1.0 是用if-modifined-since
1.1是用if-none-match
然后服务器会去判断值是否相等，如果相等就命中缓存，返回304，未命中就返回最新的
3.2 一些常见的响应码

100：请求参数有问题或者就是代码内部错误
101:切换协议，http切换成websocket
200：请求成功
201：请求资源已经创建
204：服务器已处理请求，未返回内容
301：永久重定向
302：临时重定向
304：缓存
400：请求错误，服务器无法理解
401：未认证
403：权限问题
404：资源路径不存在
410：永久删除
500：服务器问题
502：网关问题
503：服务器过载或者维护，等会就行
**

4.浏览器解析

**
4.1解析html
拿到服务器返回的代码之后，浏览器会开辟一块内存给代码提供环境，同时分配一个主线程去解析和执行代码：
1.解析html遇到link,script，img这些请求会开辟显得线程去执行加载资源文件，涉及到scrpit标签的异步加载async和defer，涉及到事件循环和微任务 宏任务
2.然后继续解析html，生成dom树，解析css生成css规则树
3.将dom树和css规则树结合生成渲染树（render tree）
4.回流：根据渲染树计算计算每个元素在视口内的大小和位置，这个过程就是回流
5.重绘：根据渲染树以及回流得到的几何信息得到节点的绝对像素
6.display：将像素发送给gpu，展示页面
4.2事件循环
由于js是单线程的，但需要一种机制来处理多个快的执行，每个块执行都需要调用Js引擎，这种机制就叫事件循环，具体如下：
在解析html时，会将同步任务放到调用栈中执行，遇到异步任务，将任务挂起，等异步任务有返回之后再将异步任务推送到任务队列中去，等到调用栈中所有的同步任务执行完成之后，才会去执行任务队列中的异步任务，异步任务又分为微任务和宏任务，在执行宏任务之前，必须先去执行微任务，最后执行宏任务，重复执行这一系列行为的操作就叫事件循环
4.3 宏任务和微任务
宏任务：执行script标签内部代码、setTimeout/setInterval、ajax，I/O操作
微任务：Promise，Object.observe、process.nextTick
4.4 回流和重绘
回流：计算元素大小和位置
重绘：修改元素背景和颜色
回流一定重绘，重绘不一定回流
4.5 js引擎
js是解释性语言，边编译边执行 v8引擎
**

5.tcp断开连接,四次挥手

**