文章目录
浏览器输入URL全过程
1 DNS域名解析
当我们在浏览器输入如同www.baidu.com的时候，其实这些网站的名字都是为了简化人们的记忆来命名的，计算机其实并不认识个东西，浏览器只认识IP地址，所以当输入域名地址时，浏览器首先去本地host文件，检查该文件中是否存在相应的域名、IP对应关系，如果有则向这个IP发送请求，如果没有再去DNS服务器中找IP。
2 建立TCP链接
通过DNS域名解析后终于拿到了服务器的IP地址，下一步就是连接服务器。对于客户端与服务器的连接，当然指的是TCP的三次握手了。
基础介绍
- SYN（SYNchronization）：同步序号，用来建立连接。
SYN标志位和ACK标志位搭配使用，当SYN=1，ACK=0，表示连接请求；当SYN=1，ACK=1，表示连接被响应的时候；这个标志的数据包经常被用来进行端口扫描。 - ACK（ACKnowledgment）：确认号，用于确认连接是否有效。
仅当ACK=1时确认号字段有效，当ACK=0时是无效的。TCP规定在连接建立后所有传送的报文段都必须把ACK置为1。 - ACKNum(Acknowledgment Number)：所期望收到的下一个序列号。
32位确认序列号包含发送确认的一端所期望收到的下一个序号，因此，确认序号应当是上次已成功收到数据字节序号加1。不过，只有当标志位中的ACK标志（下面介绍）为1时该确认序列号的字段才有效。主要用来解决不丢包的问题； - seq（Sequence Number）：序列号。
- FIN（finish）：表示终结连接。
当 FIN = 1 时，表明此报文段的发送方的数据已经发送完毕，并要求释放连接。
三次握手过程：
- 第一次握手（SYN=1，ACK=0，seq=x）
客户端发送一个TCP的数据包（SYN=1，ACK=0）指明客户端打算连接服务器的端口，以及初始序号 X,保存在包头的序列号(Sequence Number)字段里。 - 第二次握手（SYN=1, ACK=1, seq=y, ACKnum=x+1）
服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 seq序列号，放到 Seq 域里，同时将确认序号(ACKNum)设置为客户的 seq加1，即X+1。 发送完毕后，服务器端进入SYN_RCVD状态。 - 第三次握手（ACK=1，ACKnum=y+1）
客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写seq的+1发送完毕后，客户端进入ESTABLISHED状态，当服务器端接收到这个包时，也进入ESTABLISHED状态，TCP 握手结束。
三次握手模拟现实场景：
客户端：“你好，在家不，有你的快递？”
服务端：“在的，送上来吧”
客户端：“好，这就给你送上来”
3 发送HTTP请求
与服务器建立了连接后，就可以向服务器发起请求了。
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
4 服务器处理请求
服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。
5 返回响应结果
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:
- 1xx：指示信息–表示请求已接收，继续处理。
- 2xx：成功–表示请求已被成功接收、理解、接受。
- 3xx：重定向–要完成请求必须进行更进一步的操作。
- 4xx：客户端错误–请求有语法错误或请求无法实现。
- 5xx：服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。
6 关闭TCP连接
为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次挥手。
模拟现实场景
客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”
服务端：“收到，我看看我这边有木有数据了。”
服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”
客户端：“好嘞。”
7 浏览器解析渲染页面
浏览器在收到HTML,CSS,JS文件后，就需要进行渲染。
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
JS的解析是由浏览器中的JS解析引擎完成的。
浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等。浏览器将重复1-6过程下载该资源。请求过程是异步的，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。