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

时间:2022-08-26 08:23:03

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

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

FTP 协议(文件传输协议)
DNS(域名协议)
HTTP(超文本传输协议)

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

TCP(传输控制协议)
UDP(用户数据报协议)

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

IP 协议

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

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

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();