HTML基本原理

简单了解一下，从输入一个网址到浏览器显示网页的过程

DNS 解析

网址的组成结构：

http://www.baidu.com/index.html
http(超文本传输协议)
www(万维网)
baidu(申请的域名)
com(提供商业服务的网站，表示这个网站的性质)
index.html(服务器设置的可以使用默认文件名，可以省略，但并不是没有)

URL网址代替复杂的IP地址，DNS（域名系统）解析是为了知道域名对应的IP地址，这一过程，也就是域名解析过程。

DNS = 本地域名服务器，解析过程：
（1） 递归查询

（2）迭代查询：1、2、3、4分别代表执行顺序

实际上，DNS查询过程中，客户端和服务器也都会加入缓存的机制，这样可以减少查询的次数，过程为：

TCP 连接（TCP三次握手）

建立一个TCP连接时，需要客户端和服务端一共发送三个包。连接服务器的指定端口，建立TCP连接，并且同步连接双方的序列号和确认号，交换TCP窗口大小信息。

简单了解一下几个符号的概念

• 序列号seq：用来标记数据段的顺序，TCP把连接中发送的所有数据字节都编上一个序号，第一个字节的编号由本地随机产生；给字节编上序号后，就给每一个报文指派一个序号。序列号seq就是这个报文段中的第一个字节的数据编号。
• 确认号ack：期望收到下一个字节的编号，当前报文段最后一个字节的编号+1，就是确认号。
• 确认ACK：只有当ACK=1时，确认号字段才会有效。当ACK=0时，确认号无效。
• 同步SYN：用于同步序号，当SYN=1, ACK=0是表示：这是一个连接请求报文段，若是同意连接，则在响应报文段SYN=1, ACK=1。SYN=1表示这是一个连接请求，或连接接受报文。SYN这个标志只有在TCP建立连接时才会被置为1，握手完成后，会被置为0。
• 终止FIN：用来释放一个连接。FIN=1表示：此报文段的发送方的数据已经发送完毕，并要求释放运输连接。

建立连接的过程

连接状态：

• SYN-SENT：同步位SYN=1；初始序号seq=x
• SYN-RCVD：SYN=1; ACK=1; 确认号 ack=x+1; seq=y
• ESTABLISHED：双方建立TCP连接，ACK=1;ack=y+1; seq=x+1

1. 第一次握手：客户端向服务器发出连接请求报文，这时报文首部中的同部位SYN=1，同时随机生成初始序列号seq=x，此时，客户端进程进入了SYN-SENT状态，等待服务器的确认。
2. 第二次握手：服务器收到请求报文后，如果同意连接，则发出确认报文。确认报文中应该ACK=1, SYN=1，确认号是ack=x+1，同时也要为自己随机初始化一个序列号seq=y，此时，服务器进程进入SYN-RCVD状态，询问客户端是否做好准备。
3. 第三次握手：客户端进程收到确认报文后，还要向服务器给出确认，确认报文的 ACK=1, ack=y+1，此时，连接建立，客户端进入ESTABLISHED状态，服务器也进入ESTABLISHED状态。

面试中遇到的经典问题

问：为什么不用两次握手？

答：为了防止已经失效的连接请求报文突然传到服务器，从而产生错误。如果采用三次握手，就算那一次失效的报文传到服务器，服务器接收到失效的报文并且给客户端回复确认报文，但是客户端不会再次发出确认。这样就不会成功连接。

原因：在TCP中，网络报文的生存时间（TTL）往往会超过TCP请求超时的时间。如果两次握手创建连接，传输数据并释放连接后，一旦第一个超时的连接通过重试机制后，请求才到达服务器的话，服务器会认为是客户端重新创建连接的请求，然后确认同意创建新连接。就会导致客户端丢弃了服务器原来确认的数据，最后只有服务器创建连接完毕。

两次握手会请求超时导致的脏连接，而三次握手可以防止超时，同时保证信息对等。

发送 HTTP 请求

握手成功后，浏览器就可以向服务器发送http请求了，请求数据包。

请求过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口。

HTTP请求报文由三个部分组成：请求行（包含①、②、③）、请求报头（④）、请求正文（⑤）

请求行

请求方法

GET、POST、HEAD、PUT、DELETE、CONNECT、OPTIONS、TRACE

最常见的面试题是：GET和POST的区别？

推荐一篇讲解非常好的文章,GET和POST的区别

服务器处理请求并返回 HTTP 报文

服务器处理请求，MVC后台处理

MVC是一个设计模式，将应用程序分成三个核心部件。。。

说到MVC，总是容易让人想起 经典面试题：MVC和MVVM是什么，区别？

1. MVC：后端的分层开发概念；

MVC表示“模型(M)-视图(V)-控制器©”，View会直接从Model中读取数据，各部分通信是单向的

2. MVVM*：前端视图层的概念；

MVVM表示“模型(M)-视图(V)-视图模型(VM)”，各部分的通信是双向的

将“数据模型数据的双向绑定”作为核心，View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图数据的变化会同时修改数据源，而数据源数据的改变也会反应到View上。

延伸下去，就是 数据双向绑定是怎么实现的？

简单了解数据双向绑定的原理

http响应报文

响应报文是由响应行、响应头部、响应主体三个部分组成。

状态码：

• 1xx: 指示信息–表示请求已接收，继续处理
• 2xx: 成功–表示请求已被成功接收、理解、接受
• 3xx: 重定向–要完成请求必须进行更进一步的操作
• 4xx: 客户端错误–请求有语法错误或请求无法实现
• 5xx: 服务器端错误–服务器未能实现合法的请求

浏览器解析渲染页面

过程有5个步骤：

• 根据HTML解析出DOM树

1. 根据HTML的内容，将标签按照结构解析成为DOM树，DOM树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点；
2. 在读取HTML文档，构建DOM树的过程中，如果遇到 script标签，会暂停DOM树的构建，直到脚本执行完。

因此，一般html的js文件都放在尾部，目的是为了防止页面堵塞，二是为了防止获取DOM元素的脚本报错，可能脚本先执行了，DOM元素还没加载出来

• 根据CSS解析生成CSS规则树

1. 解析CSS规则树时，js执行将暂停，知道CSS规则树解析完成；
2. 浏览器在CSS规则树生成之前不会进行渲染。

• 结合DOM树和CSS规则树，生成渲染树

1. DOM树和CSS规则树全部准备好之后，；浏览器才会开始构建渲染树；
2. 精简CSS并可以加快CSS规则树的构建，从而加快页面相应速度。

精简CSS：简化注释、值为0时可省略单位、删除空白和换行。。。

• 根据渲染树计算每一个节点的信息（布局）

1. 布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸；
2. 回流（重排 reflow）：在布局完成后，发现某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

• 根据计算好的信息绘制页面

1. 绘制阶段，系统会遍历呈现树，并调用呈现器的 paint 方法，将呈现器的内容显示在屏幕上；
2. **重绘repaint：**某个元素的背景颜色、文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘；
3. 回流：某个元素的尺寸发生了变化，则需要重新计算渲染树，重新渲染

这里涉及比较常见的面试题：什么是重绘和回流，它俩的区别是什么？

两者的概念如上所示，回流一定会引起重绘，重绘不一定是回流产生的后续反应。性能影响，回流比重绘的代价更高（这也是优化的方法之一，减少回流）。

断开连接（TCP四次挥手）

建立一个TCP连接需要三次握手，而终止一个连接需要四次挥手，这是由于TCP半关闭造成的。在断开连接之前客户端和服务器都处于ESTABLISHED状态，双方都可以主动断开连接，以客户端主动断开连接为优。

半关闭：指TCP提供了连接的一端在结束他的发送后还能收到来自另一端数据的能力

• 第一次挥手：客户端进程发出连接释放FIN报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为seq=x，此时，客户端进入FIN-WAIT-1(终止等待1)状态。
• 第二次挥手：服务器进程收到连接释放FIN报文，发出确认ACK报文，ACK=1, ack=x+1，并且带上自己的序列号seq=y，此时，服务器就进入了CLOSE-WAIT(关闭等待)状态。服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器如果发送数据，客户端还是可以接收的。

这个状态会持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。客户端收到服务器的确认请求后，此时，客户端就进入FIN-WAIT-2(终止等待2)状态，等待服务器发送连接释放报文，在这之前依旧可以接收服务器发送过来的数据。

• 第三次挥手：服务器将最后的数据发送给客户端完成后，就向客户端发送连接释放的FIN报文，FIN=1, ack=x+1，此时的序列号为seq=z，服务器就进入LAST-ACK(最后确认)状态，等待客户端的确认。
• 第四次挥手：客户端接收到服务器的连接释放FIN报文后，必须发出确定报文，ACK=1, ack=z+1，而自己的序列号是seq=x+1，此时，客户端就进入了TIME-WAIT(时间等待)状态。服务器收到客户端发送过来的确认报文，就立即撤销自己的传输控制块TCB，进入CLOSED状态，注意这是的TCP连接还没有释放，必须经过**2MSL(最长报文段寿命)**的时间后，客户端没有收到服务器发来的任何数据，证明服务器已正常关闭，此时客户端会撤销相应传输控制块TCB后，进入CLOSED状态。

这时TCP的连接才真正断开，服务器结束TCP连接的时间要比客户端稍微早一点

面试中经常遇到的问题

问：为什么断开连接需要四次挥手，三次行不行？

知识补充：全双工模式：客户端想要断开连接，向服务器发送FIN报文，接收到服务器ACK报文，只表示客户端已经没有数据要发送了，但是服务器还是可以向客户端发送数据。如果服务器也要断开连接，也需要向客户端发送FIN报文，并接收客户端的ACK报文。这样客户端和服务器才完成断开这次TCP的连接。

答：TCP连接是全双工模式，断开连接的执行流程需要四次挥手；当服务器接收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉客户端：你发的FIN报文我收到了，只有等到服务器所有数据都发送完，才能发送FIN报文。因此ACK报文和FIN报文不能一起发送，所以断开TCP连接需要四次挥手来完成。