客户端和服务器端的交互(打开一个页面时，发生了什么？)

最近想要对ajax进行一些多的了解,找到了一个视频来学习。这篇文章算是一个观看视频的学习笔记~

客户端和服务器端交互模型

引题：HTTP的交互
打开一个浏览器，在地址栏输入一个网址，按下回车键到看到整个页面，中间都经历了哪些事情？

一、了解客户端

所有可以向服务器发送请求的一端都是客户端

二、了解服务器端

所有可以接收客户端的请求，并且给其响应一些内容的都是服务器。(性能较高的电脑)
给服务器连接网络后，服务器会有一个自己的外网IP。
开发者们可以基于FTP把开发的源文件上传到服务器指定的磁盘目录中。

三、DNS域名解析服务器

记录域名解析记录。记录下url与外网IP的关系。

四、WEB发布工具

不同的端口号管理不同的项目目录，服务器上的不同项目是基于端口号来区分和管理的。
基于WEB发布工具会在服务器上创建很多服务，当有客户端访问的时候，服务器会匹配出具体是请求哪个服务

五、打开网页时经历的三大阶段

[HTTP请求阶段：向服务器发送请求]
1.浏览器向DNS域名解析服务器发送请求。
2.DNS反解析：根据浏览器请求地址中的域名，到DNS服务中找到对应的服务器外网IP地址。
3.通过找到的IP地址向对应的服务器发送请求。(通过WEB站点管理工具匹配出请求哪个服务)
4.通过url地址中的端口号找到服务器上对应的服务，以及服务所管理的项目源文件。
[HTTP响应阶段：服务器把客户端需要的内容准备好，并且返回给客户端]
5.服务器端根据请求地址中的路径名称、问号传参或者哈希值，把客户端需要的内容进行准备和处理。
6.把准备的内容响应给客户端(如果请求的是HTML或者是CSS等这样的资源文件，服务器返回的是资源文件中的源代码[不是文件本身])
[浏览器渲染阶段]
7.客户端浏览器接收到服务器返回的源代码，基于自己内部的渲染引擎(内核)开始进行页面的绘制和渲染。
(1)首先计算DOM结构，生成DOM Tree
(2)自上而下运行代码，加载CSS等资源内容
(3)根据获取的CSS生成带样式的Render Tree
(4)开始渲染和绘制页面

我们把一次完整的 请求+响应 称之为“HTTP事务”。事务就是完整的一次操作，请求和响应缺一不可。

六、浏览器的network

浏览器的network中展示了以上的几个流程。我们以打开百度的network如例。

选中 www.baidu.com

可以看到服务器给客户端返回了一堆源代码。客户端便开始解析这些源代码。当解析的过程中遇到link时。

将会继续向服务器请求，直到将页面源代码解析完成。所以一个页面完全加载完成，需要向服务器发起很多次HTTP事务操作。
一般来说，加载HTML的时候，遇到link/script/img/src/iframe/video/audio[没有设置preload=‘none’]时都会重新和服务器端建立HTTP事务交互。

七、特殊情况

如果我们做了资源缓存处理(304)， 而且即将加载的资源在之前已经加载过了，这样的操作和传统的HTTP事务有所不同。他们是从服务器和浏览器的缓存中读取数据，比传统的读取快很多。

八、HTTP报文

在客户端向服务器发送请求，以及服务器把内容响应给客户端的时候，中间会相互传递很多内容。我们将这些传递的内容统称为“HTTP报文”。

在前端编程中，我们应当尽量减少HTTP请求的次数和请求内容的大小，对性能进行优化。