前端项目性能分析之聊聊DNS和CDN缓存（文末有面试题分析）

负责域名解析的DNS服务

我们大概都不陌生TCP/IP四层协议：应用层、传输层、网络层（网络互联层）、链路层（网络接口层）
DNS（Domain Name System，域名系统），和FTP（FIile Transfer Protocol，文本传输协议），同为TCP/IP四层协议中 应用层 内的两大原则。
用户通常使用主机名或域名访问计算机，因为字母配合数字的表示形式更符合人类的记忆习惯，但计算机并不这样想，它更擅长数字，这时，DNS就应运而生了。它提供通过域名查找IP或逆向通过IP查域名的服务。比如：

我们一般可以在首页设置DNS-Prefetch，这样我们就可以把其他页面用到的比较频繁的域名也放到首页进行解析， 防止解析阻塞页面渲染影响用户体验。具体操作比如：慕课网（首页和两个常用跳转页域名）

关于缓存

缓存的分类：
1、CDN缓存： CDN通过在多个节点部署来减少请求时间，这样不需要每次都回到源站服务器进行请求。 CDN对于常见的HTTP请求都支持，但只对GET请求进行缓存。（对于其它请求不做缓存，仅起到转发作用，相当于proxy）
2、数据库缓存： 将一些经常会被访问到的资源直接放到内存中，当数据发生变化时我们才会操作数据库。
3、浏览器缓存： 根据一套与服务器约定好的规则进行工作，通常只需要一次回话。浏览器会在硬盘上专门开辟一个空间来存储资源副本作为缓存。比如 ajax分页操作点击“前进”或“后退”时很多网站就用了浏览器缓存 ，同样，再次访问系统中的图片时，该图片可以从浏览器缓存中调出并几乎立刻显示出来 。
4、本地缓存： 这个在 这篇 详细说过。
5、Web应用层缓存： 主要是用NoSQL型（非关系型）数据库进行。一种典型的方式是每分钟或一段时间后统一生成某类页面存储在缓存中。

下面，来详细说下 CDN缓存：

关于CDN缓存优化

啥是CDN？
Content Delivery Network，内容分发网络。基本原理是避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容能够传输的更快、更稳定。
比如京东的物流，京东为什么快？因为在全国各地都有物流仓库，当我们下单时，系统会判断哪个物流仓库离我们下单点最近，然后从这里发货，这就大大提高了速度，相应的用户体验也是一流。其实CDN原理也是这样。

CDN缓存原理：

图中序号标注了具体的请求步骤，下面我以慕课网为例一一说明：
1、在没有cdn时，我们输入 https://www.imooc.com/ 之后，首先去浏览器的DNS缓存中看是否有记录。如果有，就直接访问对应IP地址；如 果没有再去本地DNS服务器。同样的，如果有就返回；如果没有就再去上一层的权威DNS服务器获取，一层一层向上遍历，知道获取对应的 IP地址。

2、部署了CDN之后，我们发出请求后，可以把所有的请求都转向CDN节点（配置cdn时设置CNAME，别名），从而达到加速的效果。
如：https://www.imooc.com/ -> https://sycdn.imooc.com ，我们的请求最后都会转到 https://sycdn.imooc.com 。当然 https://sycdn.imooc.com 同样也需要DNS服务器进行解析。这个DNS服务器上还有另一个CNAME记录，它指向cdn全局负载均衡，然后本地DNS服务器再去请求cdn全局负载均衡服务器解析域名。（全局负载均衡服务器会选择最近的服务器为用户提供服务）

上面会发现，我们的业务服务器和cdn服务器的域名是不一样的 why？

雅虎军规 中提到：我们的静态服务器最好启用一个全新域名，避免每次请求都携带Cookie。

CDN缓存应用

1. 使用第三方CDN服务：针对公司没有条件购买自己的CDN服务，如：https://www.bootcdn.cn/
2. CDN进行静态资源缓存：比如JavaScript、css、图片，甚至是将脚本和webpack结合直接放到CDN，按成一键自动部署整个项目。
3. 直播传送：直播本质上是使用了流媒体进行传送，而cdn是支持流媒体传送的。so，直播完全可以用cdn来提高访问速度（回源的方式）

一些小技巧

怎么查看ip地址 ：打开cmd命令行，输入 ping + 将网址中的 服务器地址 ，即可。
（什么是服务器地址？ 参见我的这篇文章：前端项目分析：JavaScript实现百度跨域搜索关键词优化）

两道面试题

当你在域名区按下回车时发生了什么（TCP/IP四层模型职责）：
当你输入一个网址并按下回车键的时候，首先，应用层协议 对该请求包做了格式定义；紧接着 传输层协议 加上了双方的端口号，确认了双方通信的应用程序；然后 网络协议 加上了双方的IP地址，确认了双方的网络位置；最后 链路层协议 加上了双方的MAC地址，确认了双方的物理位置，同时将数据进行分组，形成数据帧，采用广播方式，通过传输介质发送给对方主机。而对于不同网段，该数据包首先会转发给网关路由器，经过多次转发后，最终被发送到目标主机。目标机接收到数据包后，采用对应的协议，对帧数据进行组装，然后再通过一层一层的协议进行解析，最终被应用层的协议解析并交给服务器处理。

上面的问题相比现在很多人都能答上来，那么如果问：收到的 HTML 如果包含几十个图片标签，这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢？
如果图片都是 HTTPS 连接并且在同一个域名下，那么浏览器在 SSL 握手之后会和服务器商量能不能用 HTTP2，如果能的话就使用 Multiplexing 功能在这个连接上进行多路传输。不过也未必会所有挂在这个域名的资源都会使用一个 TCP 连接去获取，但是可以确定的是 Multiplexing 很可能会被用到。
如果发现用不了 HTTP2 呢？或者用不了 HTTPS（现实中的 HTTP2 都是在 HTTPS 上实现的，所以也就是只能使用 HTTP/1.1）。那浏览器就会在一个 HOST 上建立多个 TCP 连接，连接数量的最大限制取决于浏览器设置，这些连接会在空闲的时候被浏览器用来发送新的请求，如果所有的连接都正在发送请求呢？那其他的请求就只能等等了。