http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_HTML5 浏览器存储技术_cookie_sessionStorage_localStorage

TCP/IP 协议族 是按层次去划分的

应用层    决定了向用户提供应用服务时通信的活动。

FTP 协议（文件传输协议）
DNS（域名协议）
HTTP（超文本传输协议）

传输层    提供处于网络连接中两台计算机之间的数据传输

TCP（传输控制协议）
UDP（用户数据报协议）

网络层    用来处理在网络上流动的数据包

IP 协议

数据链路层    用来处理连接网络的硬件设备

Http 协议

HTTP/0.9
HTTP/1.0
HTTP/1.1（主流）
HTTP/2.0

用于 客户端 和 服务端 之间的通信

HTTP 协议是在 TCP/IP 协议族 的基础上运作起来的

其属于 TCP/IP 协议族内的 应用层

HTTP 协议是无状态、无连接的协议

---

 一次完整的请求，我们需要注意什么？

• DNS 是否可以通过缓存来减少查询 IP 地址的时间？

DNS 的查找是有开销的，通常浏览器查找一个给定的主机名的 IP 地址需要花费 20 到 120 毫秒

在 DNS 查找完成之前，浏览器不能从主机那下载任何东西

DNS 是可以被缓存起来提高性能的

由于 服务器的 IP 地址是可变的，缓存也会消耗内存，因此不管是哪个级别的缓存都应该周期性的清除一下。

• 网络的请求过程是否走的是最近的网络？

CDN 内容分发网络（Content  Delivery Networks）

分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容

• 最简单的 CDN 网络  = 一个DNS服务器 + 几台缓存服务器

1. 当用户点击网站页面上的内容 URL，经过本地 DNS 系统解析，

DNS 系统会最终将域名的解析权交给 CNAME 指向的 CDN 专用 DNS 服务器。

2. CDN 的 DNS 服务器将 CDN 的全局负载均衡设备 IP 地址返回用户。

3. 用户向 CDN 的全局负载均衡设备发起内容 URL 访问请求。

4. CDN 全局负载均衡设备根据用户 IP 地址，以及用户请求的内容 URL，

选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。

5. 区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务，

选择的依据包括：根据用户 IP 地址，判断哪一台服务器距用户最近；
根据用户所请求的 URL 中携带的内容名称，判断哪一台服务器上有用户所需内容；
查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力。
基于以上这些条件的综合分析之后，
区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的 IP 地址。

6. 全局负载均衡设备把服务器的 IP 地址返回给用户。

7. 用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容传送到用户终端。

如果这台缓存服务器上并没有用户想要的内容，而区域均衡设备依然将它分配给了用户，
那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉到本地。

CDN 不仅做内容分发加速，还做安全防护问题。

不会一台服务器的当机，整个请求的瘫痪。

缓存机制

客户端 与 服务器 协商的缓存策略

• 是否可以少发几次请求？

资源合并

• 请求体是否可以尽量的小？

资源压缩

• 减少 DNS 查询？

一个多资源的站点最好使用 2 到 4 个不一样的主机来存放服务端资源（在减少DNS查询和允许高度并行下载之间作出的最好权衡）

使用 Keep-alive 进行持久连接

---

DNS 域名解析服务 

DNS 协议 提供通过域名查找IP，或逆向从 IP 地址反查域名的服务

DNS服务是 和 HTTP协议一样，位于应用层的协议，它提供域名到 IP 地址之间的解析服务。

chrome://dns/ 或 chrome://net-internals/#dns       查看浏览器上的DNS缓存

ipconfig/displaydns        查看操作系统中的DNS缓存

在哪里？

查找浏览器缓存

查找 PC 本机系统缓存

查找 路由器 缓存

查找ISP DNS 缓存。(网络运营商，如 电信/联通 服务器 )

递归搜索 DNS 根服务器（全球只有 13 台）

---

HTML5 浏览器本地存储技术 Application (有这三种技术：cookie, sessionStorage, localStorage____都是字符串类型的键值对)

(另外还有一种存储模式叫：session;    这种级别的存储属于服务端会话级别的存储)

面试题： 如何实现页签之间的通信？

• cookie ----> http 无状态解决方案

会话 cookie

人为 cookie

cookie 是纯文本格式，静态资源是不会携带 cookie 的

不包含任何可执行的代码信息，伴随着用户请求在 Web 服务器和浏览器之间传递

本质上属于 http 的范畴，因为 http 协议本身是无状态的，服务端是没有办法区分请求来自于哪个客户端

即便是来自于同一个客户端的多次请求 我们的服务端也是没有能力来区分的，所以才需要 cookie 去维持客户端的状态

cookie 一般都是后台用的，很少让前端来直接写

cookie 分 :  持久级别、session 级别(cookie 一般用于和 session 通信)

缺点：

安全性低，易被截获：由于 cookie 在HTTP中是明文传递的，其中包含的数据都可以被他人访问，可能会被篡改、盗用

大小限制： cookie 的大小限制在4KB左右，一个网页最好至多 20 个左右的 cookie。

增加流量，无形中占用带宽： cookie 每次请求都会被自动添加到 Request Header 中，无形中增加了流量

cookie 信息越大，对服务器请求的时间也越长。因此要慎用cookie，不要在cookie中存储重要和敏感的数据

• 客户端生成:

在 JavaScript 中通过 document.cookie 属性，你可以创建、维护和删除 cookie

设置 document.cookie 属性的值并不会删除存储在页面中的所有 cookie____它只简单的创建或修改字符串中指定的 cookie

要使用 JavaScript 提取 cookie 的值，只需要从 document.cookie 中读取即可

• 服务端生成:

Web 服务器通过发送一个称为 Set-Cookie 的 HTTP 消息头来创建一个 cookie

HttpOnly

为避免跨域脚本 (XSS) 攻击，通过 JavaScript的 Document.cookie API 无法访问有 HttpOnly 标记的Cookie

WebStorage ----> 浏览器本地存储，且存储的必须是 字符串（一般是 JSON.stringify(xxx)）____一般允许 5M 甚至更大

浏览器端通过 window.sessionStorage 和 window.localStorage 属性来实现本地存储机制

例如：KEY='person'; person={"name":"WuKong"};

• sessionStorage 会话存储(浏览器打开 到 关闭)

当浏览器退出时，会自动删除 sessionStorage 中的数据

保存数据 sessionStorage.setItem(KEY, JSON.stringify(person));

读取数据 sessionStorage.getItem(KEY);

删除数据 sessionStorage.removeItem(KEY);

• localStorage 永久存储(永久，除非人为删除) 

----> 对应 'storage' 事件 e.newValue 进行页签间的数据通信/同步 e.oldValue____HTML5 提供的新功能

e.key        修改或删除的 key 值，如果调用 clear(),为 null

e.newValue        新设置的值，如果调用 clear(),为 null

e.oldValue        调用改变前的 value 值,如果调用 clear(),为 null

e.url        触发该脚本变化的文档的 url

e.storageArea        当前的 storage 对象

保存数据 localStorage.setItem(KEY, JSON.stringify(person));

读取数据 localStorage.getItem(KEY);

删除数据 localStorage.removeItem(KEY);

清空数据 localStorage.clear();