面试点（网络层面）

网络层面

缓存
- HTTP缓存
- - 无缓存测试、有缓存测试
  - 缓存类型
  - 缓存读取过程
  - memory cache 与 disk cache 的区别（缓存存在哪儿！浏览器/硬盘）
  - 前端常用的缓存方案？
  - 缓存总结
- 浏览器缓存
- - localStorage、sessionStorage、cookie区别
网络协议
- http和https区别
- udp协议和tcp协议区别
- tcp协议
- - tcp三次握手
  - tcp四次挥手
- websocket协议
浏览器url输入后执行的过程

缓存

HTTP缓存

无缓存测试、有缓存测试

如何测试？

1、打开浏览器自带network

2、禁用缓存
如何查看？

1、打开浏览器自带LightHouse

2、勾选导航和桌面

3、分析页面
区别？

无缓存 FCP(白屏时间)：「1s」、TTI(交互响应时间)：「2.8s」、LCP(最大内容时间) 「2.9s」

有缓存 FCP(白屏时间)：「0.7s」、TTI(交互响应时间)：「1.4s」、LCP(最大内容时间) 「1.4s」
结论？

白屏时间：缩短「0.3s」

交互响应时间: 缩短「1.4s」

最大内容时间：缩短「1.5s」

缓存类型

三种：强缓存，协商缓存，不缓存

缓存读取过程

下面展示 缓存读取过程。

复制代码

请求资源
   ↓
强缓存是否过期？
   ↓
否  →  直接读 memory/disk（不请求服务器）⭐⭐⭐
   ↓
是
   ↓
发起协商缓存请求
   ↓
304？ → 继续读 memory/disk
200？ → 下载新文件 → 存 memory/disk

memory cache 与 disk cache 的区别（缓存存在哪儿！浏览器/硬盘）

1）

memory cache 表示缓存来自内存RAM，disk cache 表示缓存来自硬盘

2）memory cache 要比 disk cache 快的多！从磁盘访问可能需要5-20毫秒，而内存基本不要时间纳秒级别

memery cache	disk cache
优点: 巨快，≈0。缺点:缺失性(刷新页面，关闭标签页，关闭浏览器，内存满了，都会被清理)	缺点:相比下稍微慢点而已。优点: 浏览器关闭，电脑重启都还在
适用于：小文件/当前页面资源	适用于：大文件/长期缓存资源

前端常用的缓存方案？

参考文章

1、webpack 配置（主要是文件名上有个hash值，版本发布之后，使之前文件的协商缓存失效）

也可配置协商缓存（就是文件名不变，会比较内容是否变化）

java 复制代码

module.exports = {
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

2、nginx配置（主要是配置html文件不缓存，别的文件使用强缓存+协商缓存(强缓存过期后，自动转为协商缓存)）

java 复制代码

1、配置文件入口
location / {
    root   www; # 访问根目录
    index  index.html index.htm; # 入口文件
}
2、重点：静态资源配置强缓存+协商缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    # 启用强缓存的静态资源， 强缓存过期之后使用协商缓存
    expires 7d; # 设置缓存时间为7天
     if_modified_since before;
    add_header Cache-Control "max-age=604800, public"; # 设置强缓存
}

3、入口文件html不缓存
location ~* \.html$ {
    # 不启用强缓存的 HTML 文件
    expires off;
}

缓存总结

强/协商缓存 = 决定"要不要请求服务器"

memory/disk = 决定"缓存存哪里"

浏览器缓存

localStorage、sessionStorage、cookie区别

	localStorage	sessionStorage	cookie
存储大小	5M	5M	小只有4kb
有效期	无限，手动清除	当前页面关闭清除	可以设置，默认浏览器关闭清楚
通信	不参与	不参与	参与与服务端的通信，携带信息在http请求头

网络协议

http和https区别

	http	https
安全性	明文传输数据，不安全	多一个SSL加密层，数据安全
连接方式	tcp 80端口	tcp 443 端口（默认）
部署成本	直接部署，方便	需要SSL证书，稍微麻烦点

udp协议和tcp协议区别

	udp	tcp
连接方式	无连接，直接发指令	需要tcp三次握手建立连接
数据传输可靠性	没有重传机制，不保证接收顺序	有重传机制，丢包可重传。可设置序号确保传输顺序

tcp协议

tcp三次握手

目的：为了确认双方发送和接收数据是否都正常

第一次握手：客户端->服务器。服务器：可以确认：对方发送正常，自己接收正常。不能确认：自己发送正常，对方接收正常。故而需要确认一下。

第二次握手：服务器->客户端。客户端：可以确认：自己发送正常，对方接收正常。对方发送正常，自己接收正常。但是服务器不知道，故而需要通知一下。

第三次握手：客户端->服务器。通知服务器双方都发送接收正常。建立连接。

tcp四次挥手

第一次挥手：客户端->服务端。给服务端说可以关闭连接了。客户端进入wait1等待阶段。

第二次挥手：服务端->客户端。给客户端返回收到。客户端进入wait2等待阶段。

第三次挥手：服务端->客户端。给客户端返回完成。客户端等待两秒关闭。

第四次挥手：客户端->服务端。给服务端返回我已经关闭了。服务端关闭。

tcp三次挥手、四次握手详解

websocket协议

1、websocket是基于tcp的全双工协议，双向发送和接受数据

2、也需要握手建立连接，断开连接

3、多用于聊天

浏览器url输入后执行的过程

dns解析找到ip地址

tcp三次握手建立连接

http请求

拿到响应，渲染页面