从输入URL到展示页面到底发生了什么？

感觉今年技术文章写得很少，知识积累不够深厚。下半年虽然有很多时间，但是并没有得到有效利用。以后要恢复产量。
计算机网络这门课程可能在实际工作中用处不大，但对于理解网络来说是不可获取的。这门课程的细节是非常繁杂的，针对这种特点，不妨用一个核心问题把知识点贯通、串联起来。
一个常见的核心问题是：从输入URL到展示页面到底发生了什么？

从URL输入到页面展现

这个问题是很大的，不仅包含了计算机网络知识，也包含了前端和后端的基础知识。

一 解析URL

我们在网络中，最经常接触的字符串就是URL了，俗称网址。我第一次见到这种字符串，是很茫然的，搞不清楚它具体表示什么。后来才知道，很多网络的基础元素都组织在这个线性数据结构中了，为了方便阅读，必须要做格式化，所以会一些特殊符号，比如 : // / . , / 是斜杠，也是除号。
URL的语法规则如下：

scheme://host.domain:port/path/filename

二 域名解析

URL中的host方便阅读，但是计算机却不认识，计算机认识的只有IP地址。
所以需要DNS系统，把域名解析为IP地址。
域名和IP的映射关系，存储在DNS服务器的映射表里的一条记录，看起来很像数据库的表结构。
域名是分层次的，从右到左分别是顶级域名，二级域名，三级域名……
查询IP地址是分层次的，从顶级域名开始，递归查询。

三 建立连接：三次握手

找到服务器的IP地址后，需要建立连接。连接的两端分别是客户端和服务器的socket，建立连接的过程是三次握手。

在TCP的报文首部包含：源端口，目的端口，序号，确认号，数据偏移，确认比特ACK，同步比特SYN
TCP报文每个字节都有序号，由于报文较长，所以分为多个报文段来传输。每个报文段分为首部和数据两个部分。
序列号SEQ：发送报文段的数据部分的首字节的序号。
确认号：响应报文段期待下次收到的字节。
数据偏移：报文段首部的长度。
确认比特ACK：ACK=1时，确认号有效；如果ACK=0，则无效。
同步比特 SYN：建立连接时，用来同步序号。SYN=1，且ACK=0的时候，表示这是一个连接请求报文段。对方若同意连接，则在响应报文段中设置SYN=1，且ACK=1。SYN=1表示这是一个连接请求或连接接收报文段。
窗口：用来控制对方发送来的数据量，单位是字节。计算机网络通常是用接收端的接收能力来控制发送端的数据发送量。

三次握手准确说是三次联络或三次交互。
第一次联络，由客户端发起：SYN=1，SEQ=X。
第二次联络，由服务端发起：SYN=1, ACK, ACK=X+1, SEQ=Y
第三次联络，由客户端发起： SYN, ACK, ACK=Y+1，SEQ=X+1

总结：三次握手就是同步双方的序列号、确认号以及窗口。
为什么要采取三次握手？为了防止已经失效的连接请求报文突然发送到服务端，因而产生错误。

四 后端处理

1. Web服务器：比如nginx，apache，Lighttpd 这类的服务器，一般只能解析静态资源（css，js，图片）。Web服务器也叫前端服务器，反向代理。
2. 应用服务器：比如tomcat、jetty等，既可以解析动态资源，也可以解析静态资源，但是解析静态资源的性能没有Web服务器好。
   一般只有Web服务器才能被外网访问到，应用服务器只能被内网访问。

在应用服务器中，常用到MVC设计模式。

image.png

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

六 浏览器解析渲染页面

1. 根据 HTML 解析出 DOM 树
2. 根据 CSS 解析生成 CSS 规则树
3. 结合 DOM 树和 CSS 规则树，生成渲染树
4. 根据渲染树计算每一个节点的信息
5. 根据计算好的信息绘制页面

七 断开连接

四次挥手

八 总结

请求方式

1. 浏览器发送请求
2. 直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）
3. html页面负责调用服务端接口（restful api）产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）
4. 填充html，展现动态效果，在页面上进行解析并操作DOM

鸣谢：从URL输入到页面展现到底发生了什么，前后端分离