计算机网络系列（1）：基础知识

打开网站发生的事情

URL解析

对于一个完整的网址（URL），通常包括传输协议、域名、端口、路径、参数、哈希值等六个部分

DNS查询

1. 查询浏览器是否有缓存
2. 查询操作系统是否有缓存
3. 查询路由器是否有缓存

TCP连接

1. 应用层：发送HTTP请求
2. 传输层：传输报文，http 是基于 tcp 协议,需要进行三次握手
3. 网络层：将数据打包，寻找传输路线
4. 链路层：发送数据

建立连接之后，浏览器开始向服务器发送 request 请求，请求数据包，请求信息包含一个头部和一个请求体

服务器处理

1. 建立连接后，就可以互相传送数据了，客户端按照http协议的格式将数据组装好向服务器发起请求，服务器接收到请求并将处理结果响应给浏览器
2. 服务端的http服务器软件一般有Apache和Nginx，Apache或Nginx又将请求交由具体的编程语言（Java、Python、PHP 等）去处理
3. 服务器又将程序处理的结果按照http协议格式原路返回给客户端。这就是服务器响应，响应分为两个部分：响应头和响应主体，其中网页的代码包含在响应主体中

在完成了数据通信之后，就要考虑断开连接了，毕竟任务完成了就要空出系统资源来。tcp 的断开相对于连接来说，其实是有四次握手的，通常被称作四次挥手，就是挥手拜拜了

浏览器接收

浏览器根据状态码做不同的事情，解压缩，存缓存，解析

页面渲染

1. 根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树
2. 构建渲染树（Render Tree）
3. 页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排
4. 浏览器收到 Response 后，首先对其进行加载，并根据其中的代码继续向服务器请求资源(css、javascript、img 等)，加载完成后对页面进行解析
5. 解析的过程，其实就是生成解析树，即DOM树。DOM树是由DOM元素及属性节点组成，加上css解析的样式对象和js解析后的动作实现
6. 接下来对Dom树进行可视化表示，也就是渲染，生成一颗渲染树
7. 最后一步就是绘制网页，浏览器根据渲染树将元素绘制到屏幕上，同时执行js，完成整个页面的展示

HTTP原理

1. 客户端连接到Web服务器
   一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接
2. 发送HTTP请求
   通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成
3. 服务器接受请求并返回HTTP响应
   Web服务器解析请求，定位请求资源，服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成
4. 释放连接TCP连接
   若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求
5. 客户端浏览器解析HTML内容
   客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码，然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示