Web Lion

Appearance

网络 ​

1. 五层网络模型 ​

  • 应用层：消息格式，HTTPS、FTP、DNS、SMTP
  • 传输层：可靠传递，TCP、UDP
  • 网络层：在互联网找到对方，IP、路由器
  • 数据链路层：在子网中找到对方，MAC、交换机
  • 物理层：信号表示，光纤、双绞线、同轴电缆

2. 数据封装与解封装 ​

  • 封装：应用层—>物理层
  • 解封装：物理层—>应用层

3. 四层、五层、七层 ​

  • 四层：TCP/IP 四层网络模型
    • 应用层
    • 传输层
    • 网络层
    • 数据链路层
  • 五层：TCP/IP 五层网络模型
    • 应用层
    • 传输层
    • 网络层
    • 数据链路层
    • 物理层
  • 七层：OSI 七层网络模型
    • 应用层
    • 表示层
    • 会话层
    • 传输层
    • 网络层
    • 数据链路层
    • 物理层

面试题：网络的五层模型 ​

常见请求方法

  1. 请求方法的本质
  • GET：向服务器获取资源
  • POST：向服务器提交信息
  • PUT：修改服务器数据
  • DELETE：删除服务器数据
  • OPTIONS：客户端向服务器申请跨域提交
  • TRACE：回收服务器收到请求
  • CONNECT：建立管道连接

面试题：GET 与 POST 区别 ​

  • 请求体
  • 传递数据量
  • ASCII 数据限制
  • 数据暴露
  • 刷新时重复提交
  • 保存到书签

面试题：http 常见请求方法 ​

存储在客户端，非敏感信息

  1. cookie 组成，类似浏览器的专属卡包，管理各个网站的身份信息
  • key：键
  • value：值
  • domain：域
  • path：路径
  • secure：是否安全传输
  • expire：过期时间
  • 附带到请求中的 cookie（同时满足）
    • 没过期
    • 域与请求匹配
    • 路径与请求匹配
    • 验证安全传输
  1. 如何设置
  • 服务端设置
  • 客户端设置，document.cookie=""
  • 本地保存数据方式
  • cookie 兼容性，CSRF 攻击，大小限制 4k
  • HTML5 新增 sessionStorage 和 localStorage

session ​

面试题：cookie 与 session 区别 面试题：如何消除 session

加密 ​

  1. 对称加密
  • 常见算法：DES、3DES、TDEA
  • 优点：加解密速度快
  • 缺点：密钥分发容易被窃取
  1. 非对称加密
  • 常见算法：RSA、DSA、ECC
  • 优点：安全，公钥加密
  • 缺点：仅一方进行解密
  1. 摘要/哈希/散列
  • 常见算法：MD4、MD5、SHA1
  • 优点：密文占用空间小（定长短字符串）
  • 缺点：无法解密

面试题：对称加密、非对称加密、摘要的概念 ​

JWT ​

JWT（json web token），在互联网环境中，提供一种统一的、安全的令牌格式。

  1. 令牌的组成
  • header：类型和签名算法
  • payload：主题信息
  • signature：签名，将前两部分通过密钥进行加密
  1. 令牌的验证

面试题：jwt 令牌格式 ​

同源策略 ​

浏览器的安全策略（协议、主机、端口） 同源：页面的源，与页面运行过程中加载的源不一致时，出于安全考虑，浏览器会进行限制。

  • 解决

    • 代理
    • cors
    • jsonp

  • 代理

    • 使用场景：生产环境不跨域，开发环境跨域

  • CORS

    • http1.1 跨域解决方案

    • 三种不同交互模式：简单请求、需要预检的请求、附带身份凭证的请求

    • 简单请求：请求方法、请求头包含安全字段、请求体 Content-Type

      • 简单请求判定：请求头自动添加 Origin，响应头自动添加 Access-Control-Allow-Origin；
      • 需预检的请求判定：发送预检请求（OPTIONS），服务器允许（origin、methods、headers、max-age），发送真实请求，服务器响应
      • 附带身份凭证的请求：credentials

  • JSONP

    • 通过 script 标签去请求服务器获取资源。
    • 只支持 get 请求

文件上传 ​

  1. 文件上传的消息格式
  • post
  • content-type: multipart/form-data
  1. 文件上传实现

文件下载 ​

  1. 响应头（Content-Disposition: attachment; filename="***"）
  • attachment，表示附件，浏览器会触发下载行为
  • filename，默认文件名

面试题：输入 url 地址后 ​

  • 补全协议和端口
  • 自动 url 地址编码（ASCII）
  • 查找本地缓存
  • 解析 DNS 查找服务器 IP
  • 建立 TCP 连接（三次握手）
  • HTTPS 还需进行 SSL 握手，建立加密信道
  • 请求体附带 cookie
  • 设置请求头，协议版本，cookie，发送 get 请求
  • 服务器响应数据
  • 是否保留 TCP 连接（Connection）
  • 按状态码处理请求
  • 按 content-type 解析响应数据
  • 按响应头缓存数据
  • 从上往下解析 html
  • 生成 dom 数，cssdom 数，合成渲染树
  • 解析触发事件

http 缓存协议 ​

  1. 缓存基本原理
  • C/S 结构中分客户端缓存，服务端缓存
  • 缓存流程
  1. 服务端缓存指令：Cache-Conteol，ETag，Date，last-modified
  2. 客户端缓存指令（协商缓存）：缓存是否存在，是否有效（If-Modified-Since）
  • 缓存有效
  • 缓存无效
  1. 细节
  • cache-control：public，private，no-cache，no-store，max-age
  • expires：http1.0，指定过期时间点
  • 记录缓存有效期：max-age？Date：Last-Modified
  • pragma
  • vary
  • 使用版本号或 hash：通过变更实现是否使用旧文件

TCP 协议 ​

  1. tcp 如何收发数据
  • 分段发送
  • 可靠传输：接收方收到数据报后，必须对数据报进行确认。
    • seq：这次数据报的序号
    • ACK：这次数据报是一个确认数据报
    • ack：期望下一次接收数据报的序号
  1. 连接的建立（三次握手）
  • 连接本质是双方开辟一块内存空间，作为数据缓冲区 开始 客户端：我说话能听见吗？ 服务端：能听见，我说话能听见吗？ 客户端：能听见 结束 数据传输
  1. 连接的销毁（四次挥手） 开始 客户端：我说完了，挂了？ 服务端：我明白你说完了，但别忙挂，我还有话说。 服务端：… 服务器：我也说完了，挂了？ 客户端：好的！ 结束
  2. HTTP 和 TCP 的关系
  • HTTP，应用层，内容格式
  • TCP，传输层，实现消息的可靠传输
  • 具体使用 TCP 协议
    • 客户端发消息给服务端叫做请求，服务端发消息给客户端叫做响应
    • 使用 HTTP 协议的服务器不会主动发消息给客户端，只会对请求进行响应
    • 每一个 HTTP 请求-响应，都先建立 TCP 连接（三次握手），完后完成请求-响应后，再销毁（四次挥手）。导致每一次请求-响应都是独立的，无法保持状态。

CSRF 攻击 ​

Cross-site Request forgery，跨站请求伪造，指攻击者利用了用户的身份信息，执行了用户非本意的操作。

  • 防御方式
    • 不使用 cookie，兼容性差，ssr 会遇到问题，可解决
    • cookie 中使用 sameSite，兼容性差，容易挡住自己人
    • 使用 csrf token，获取 token 未进行操作仍会被攻击
    • 使用 referer 防护，过去常用，存在漏洞

面试题：介绍 csrf 攻击 ​

XSS 攻击 ​

Cross Site Scripting，跨站脚本攻击，指攻击者利用站点漏洞，在提交表单时加入恶意脚本。

防御方式 ​

  • 服务器端对用户提交数据进行过滤或编码
  • 过滤：去掉一些危险的标签（例 script），去掉一些危险属性
  • 编码：对危险的标签进行 HTML 实体编码

面试题：介绍 xss 攻击 ​

网络性能优化 ​

  1. 优化打包体积
  • 利用工具压缩，混淆最终打包代码，减小体积
  1. 多目标打包
  • 针对不同浏览器打包出不同兼容性版本，使每个版本兼容代码减少，减小体积
  1. 压缩
  • 只要解压时间小于优化的传输时间，压缩可行
  1. CDN
  • 缩减静态资源的访问时间
  1. 缓存
  • 协商缓存，通过 hash 值置换缓存
  1. http2
  • 利用多路复用，头部压缩等特点
  1. 雪碧图
  • 不使用 http2 场景，多个图片合并成雪碧图，达到减少文件数量
  1. defer/async
  • 让页面尽早加载 js 文件
  1. prefetch/preload
  • 预下载其他页资源，预下载本页资源
  1. 多个静态资源域
  • 不使用 http2 场景，将静态资源分到多个域中保存，使浏览器开启多个 TCP 连接，并行下载

断点续传 ​

下载 ​

  • 响应头：accept-ranges：bytes
  • head 请求，询问文件信息
  • range 请求，bytes=0-5000，按段请求
  • 将碎片信息组装
  • 一般用于桌面应用

上传 ​

  • 文件分片
  • 分片传输（是否还有分片未传输）
  • 合并文件

域名与 DNS ​

域名：帮追人类记忆网站 ​

  • 根域名
  • 顶级域名
  • 二级域名
  • 三级域名
  • 四级域名

DNS：网络传输必须依靠 ip，将域名解析成 ip 地址 ​

  • 本机 hosts
  • 本地域名服务器
  • 根域名服务器
  • 顶级域名服务器
  • 权限域名服务器 节点设置高速缓存，提高解析速度，减少查询次数。

面试题：域名解析过程 ​

SSL、TLS、HTTPS 的关系 ​

  • SSL：安全套接字协议
  • TLS：传输层安全性协议，是 SSL 升级版
  • HTTPS：建立在 SSL 协议上的 HTTP 协议，默认端口 443 - CA：证书颁发机构 - DC：证书 - 证书签名：域名，证书颁发机构，公钥 面试题：介绍 HTTP 中间人攻击 面试题： HTTPS 握手过程 面试题：HTTPS 握手过程，客户端如何验证证书的合法性
  • CRL，OCSP 面试题：阐述 HTTPS 验证身份，即 TSL/SSL 身份验证过程 面试题：为什么需要 CA 对证书签名 面试题：如何劫持 HTTPS 的请求，提供呢思路

http 各版本差异 ​

HTTP 1.0 ​

  • 无法复用连接，每个请求单独开一个 TCP 连接（三次握手，四次挥手）
  • 队头阻塞，下一个请求需要在上一个请求结束后才能开始

HTTP 1.1 ​

  • 长连接，多次请求共用一次 TCP 连接，请求头包含 keep-alive
  • 管道化和队头阻塞，服务器必须按照请求到达的顺序响应（解决：减少文件数量，开辟多个 TCP 连接）

HTTP 2.0 ​

  • 二进制分帧，（帧，最小的传输单元；流，一个请求或响应的完整数据），解决共享 TCP 连接时队头阻塞问题，实现多路传输
  • 头部压缩，静态表和动态表
  • 服务堆栈，客户端没有主动请求的情况下，服务器预先将资源推送到客户端 面试题：为什么 HTTP1.1 不能实现多路复用 面试题：简单讲解一下 HTTP2.0 多路复用 面试题：HTTP 1.1 如何复用 TCP 连接 面试题：介绍一下 HTTP1.0、HTTP1.1、HTTP2.0 协议区别 面试题：HTTP1.0、HTTP2.0、HTTP3.0 区别

websocket（实时场景） ​

HTTP 协议是请求-响应模式，请求必须在前，响应必须在后，这导致服务端无法主动把消息推送到客户端。

旧方案 ​

  • 短轮询（short polling），每隔一段时间请求一次服务器（缺陷，产生大量无意义请求，频繁打开关闭连接，实时性不高）
  • 长轮询（long polling），（缺陷，客户端长时间收不到响应导致超时，服务器挂起请求导致长时间占用求资源）

新方案-WebSocket ​

  • TCP 全双工通信
  • 缺陷，兼容性（HTML5 新增）、维持 TCP 连接需要耗费资源
  • WebSocket 握手，首先进行 HTTP 请求，响应后握手成功，后续不再使用 HTTP 请求。 面试题：WebSocket 的协议是什么 面试题：WebSocket 与传统 HTTP 有什么优势
  • WebSocket API
  • 应用：聊天室（Socket.io）

Released under the MIT License.

Copyright © 2025-present Void Wind