JavaScript模块化

Web前端JS知识梳理

本文系统梳理HTML知识点，常见面试题




# 1. src与href的区别


| src | href  |
| --- | --- |
|src用于替换当前元素  | href用于在当前文档和引用资源之间确立联系 |
|src是source的缩写  | href是Hypertext Reference 的缩写 |
|在 `<img>`、`<script>`、`<iframe>`中， 表示引入  | 用在 `<link>`、`<a>` |
|会暂停其他资源的下载和处理  | 并行下载资源 |


# 2. 对HTML语义化的理解
**语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）**。

语义化的优点
1. 有利于SEO，支持读屏软件（如根据文章生成目录）
2. 对开发者友好，增强代码的可读性，便于团队开发和维护

常见的语义化标签：
- `<header>` `<nav>` `<main>` `<article>` `<aside>` `<footer>`
- ![image.png](https://blog.warmplace.cn/static/img/4bd9a9f39a15f56a0c9c5eb7db6656f6.image.webp)

# 3. DOCTYPE的作用
DOCTYPE(⽂档类型)是HTML5中一种标准通用标记语言的文档类型声明，它的目的是**告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档**，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式
> 可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat

- CSS1Compat：**标准模式**（Strick mode），**默认模式，浏览器使用W3C的标准解析渲染页面**。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：**怪异模式**(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。**混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作**.

# 4. script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

![image.png](https://blog.warmplace.cn/static/img/2e25107c12ffb9a3d1b09fb35750e543.image.webp)

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

**defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析**，其区别如下：

- **执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行**；
- 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，**DOMContentLoaded事件触发执行之前**。

# 5. 常⽤的meta标签有哪些
`<meta>` 标签由 `name` 和 `content` 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：
-  设置编码 `<meta charset="UTF-8" >`
-  设置关键字 SEO `<meta name="keywords" content="关键词" />`
-  页面描述 SEO `<meta name="description" content="页面描述内容" />`
-  页面重定向和刷新 `<meta http-equiv="refresh" content="0;url=" />`
-  禁止缓存 `<meta http-equiv="Pragma" content="no-cache">`
-  不使用强缓存 `<meta http-equiv="Cache-Control" content="no-cache">`
-  viewport适配移动端 `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`  禁用双指缩放
    -  viewport还有一个作用，处理ios刘海，不写该属性则设置iphone刘海无效
-  搜索引擎索引方式：`<meta name="robots" content="index,follow" />`
-  隐藏safari界面
    -  `<meta name="apple-mobile-web-app-capable" content="yes">`
    -   ios专门定义来实现全屏显示，通过window.navigator.standalone来侦测的
-  改变状态栏 `<meta name="apple-mobile-web-app-status-bar-style" content="black">`
-  WebApp全屏模式：伪装app，离线应用。 `<meta name="apple-mobile-web-app-capable" content="yes" />`
-  添加到主屏后的标题 `<meta name="apple-mobile-web-app-title" content="标题">`
-  忽略数字自动识别为电话号码 `<meta content="telephone=no" name="format-detection" />`
-  忽略识别邮箱 　`<meta content="email=no" name="format-detection" />`
-  添加智能 App 广告条 下载app

总结，meta标签用途很广，设置编码、http相关（设置缓存与重定向）、SEO、CSP、离线App、safari相关、



搜索引擎索引方式 content属性值
| 类型 | 含义 |
| --- | --- |
| `all` | 文件被索引，且页面上的链接可以被查询 |
| `none` | 文件不被索引，且页面上的链接不可以被查询 |
| `index` | 文件将被检索 |
| `follow` | 页面上的链接可以被查询 |
| `noindex` | 文件将不被检索 |
| `nofollow` | 页面上的链接不可以被查询 |


# 6. HTML5有哪些更新
1. 语义化标签
1. 标签 `<audio>` `<video>`
1. 废弃元素
    - 表现类 用css替代
    - 属性类 用css替代
        - 如body标签上的link、vlink、alink、text属性
        - 如height和width
    - 框架类 frame frameset 
    - 其他
        - object取代了applet
    - [《html5废弃了哪些元素》](https://www.gxlsystem.com/qianduan-19304.html)
1. 表单
1. 进度条、度量器
1. DOM查询操作
    - querySelector  querySelectorAll
1. Web存储 `localStorage` `sessionStorage`
1. SVG、Canvas
1. 拖拽

# 7. html表单元素
## 表单类型
| type | 作用 |
| --- | --- |
| email | 能够验证当前输入的邮箱地址是否合法 |
| url | 验证URL |
| number | 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值 |
| search | 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化 |
| range | 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值 |
| color | 提供了一个颜色拾取器 |
| time | 时分秒 |
| data | 日期选择年月日 |
| datatime | 时间和日期(目前只有Safari支持) |
| datatime-local | 日期时间控件 |
| week | 周控件 |
| month | 月控件 |

如日期相关控制，支持性不是很好， 一般项目中使用开源UI组件。

## 表单属性
| 属性 | 作用 |
| --- | --- |
| placeholder | 提示信息 |
| autofocus | 自动获取焦点 |
| autocomplete | 有两个值`on` `off` <br>使用前提:表单必须提交过,必须有name属性 |
| required | 要求输入框不能为空，必须有值才能够提交 |
| pattern | 正则表达式校验 |
| multiple | 可以选择多个文件或者多个邮箱 |
| form | form表单的ID |

## 表单事件：
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。


# 8. 标签分类
- 自闭和标签与非自闭标签
    - [可省略关闭的标签](https://html.spec.whatwg.org/multipage/syntax.html#void-elements)
- 行内标签与块标签

> - html标签 及属性 不区分大小写，属性值区分大小写
> - 某些 HTML 元素对于放在其中的元素类型有限制例如 `<ul>`，`<ol>`，`<table>` 和 `<select>`，相应的，某些元素仅在放置于特定元素中时才会显示，例如 `<li>`，`<tr>` 和 `<option>`。

自闭合的标签
- 表单元素 input
- img 
- br hr
- meta link base

非自闭合标签，如果强行自闭合会出问题，但使用了框架如vue可以兼容这种情况

行内元素有：`a` `b` `span` `img` `input` `select` `strong`

块级元素有：`div` `ul` `ol` `li` `dl` `dt` `dd` `h1~6` `p`

# 9.img的srcset属性的作⽤？
响应式页面中经常用到根据屏幕密度设置不同的图片。

srcset 属性通常与 sizes 属性一起使用，后者指定了不同视口条件下图像的大小。两者共同使得浏览器能够选择最合适的图像进行显示，从而优化用户体验，减少带宽使用和加载时间。
```html
<img src="fallback-image.jpg"
     srcset="image1.jpg 1024w,
             image2.jpg 800w,
             image3.jpg 480w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1024px) 800px,
            1024px">
```

# 10. iframe 有那些优点和缺点？
优点：
- 用来加载速度较慢的内容（如广告）
- 可以使脚本可以并行下载
- 可以实现跨子域通信

缺点：
- iframe 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎索识别
- 会产生很多页面，不容易管理


# 11. label 的作用是什么？如何使用？
label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

```html

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>


<label>Date:<input type="text"/></label>
```

# 12. head 标签有什么作用，其中什么标签必不可少？

- 用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
- 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。除去`<title>`包含的数据都不会真正作为内容显示给读者。


# 13. html元素之间的嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素 p
- “行内元素一般不能包含块级元素”  特例 a标签包含div
[具体规则在这个网站查询](https://html.spec.whatwg.org/multipage/grouping-content.html) 

# 14. SVG

定义：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

特点：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用

# 15. Canvas
Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

特点：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

svg 与 canvas 区别


| - | Canvas | Svg |
| --- | --- | --- |
| 历史  | 较新、由Apple私有技术发展而来 | 历史悠久，2003年成为W3C标准 |
| 功能 | 功能简单，2D绘图API | 功能丰富，各种图像、滤镜、动画等 |
| 特点 | 像素，只能脚本驱动 | 矢量，XML,CSS,元素操作 |
| 兼容性 | 主流浏览器，IE9+ | 主流浏览器，IE9+，其它SVG阅读器 |
| 操作对象 | 基于像素（动态点阵图） | 基于图形元素 |
| 元素 | 单个HTML元素 | 多种图形元素 |
| 驱动 | 只能脚本驱动 | 支持脚本和CSS |
| 事件交互 | 用户交互到像素点(x,y) | 用户交互到图形元素(rect, path) |
| 性能 | 适合小面积，大数量应用场景 | 适合大面积，小数量应用场景 |



# 16. 浏览器乱码是什么原因？如何解决？
编码和解码使用的字符集不同就会导致乱码

一般浏览器乱码的原因， 开发者使用window电脑创建的html文件默认是gbk编码，网页中也没有编码声明 `<meta charset="utf-8">`，浏览器使用默认方式`utf-8`解码，这就导致了乱码

解决方案
1. 使用软件编辑HTML修改编码
2. 或修改http响应头`content-type: text/html; charset=utf-8`
3. 配置meta标签 `<meta charset="utf-8">`

补充知识点：**浏览器有一套自己的编码解析机制**
1. 文件开头的 Byte Order mark 字符
2. http响应头字段content-type
3. html <meta @charset='XX'>
4. 默认utf-8

# 17 渐进增强和优雅降级之间的区别
- **渐进增强：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。**
- **优雅降级： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。**

# 18. 说一下HTML5 drag API
原生的JavaScript拖拽有两种方式
- html5 draggable API
- 鼠标事件

## draggable属性
- 图片默认是可以拖拽的，但并不是所有元素默认都是可以拖拽的，如`<div>`
- 在元素本身加上draggable属性，这个属性是H5新增的，定义这个属性就可以注册事件了
- 拖动时  `dragstart` `drag` `dragend`  发生在拖拽元素身上
- 进入区域 进入时`dragenter` 进入后`dragover` 离开`dragleave` 放置`drop`  发生在目标元素身上

我写一个drag的Demo
![image](https://static.warmplace.cn/blog-resources/browser/dragable/drag.gif)

[示例&源码点这里](https://static.warmplace.cn/blog-resources/browser/dragable/index.html)


## 鼠标事件-滑动验证码
- `mousedown` 鼠标按下
- `mousemove` 鼠标移动
- `mouseup`  鼠标松开

我也写了一个滑块验证的demo
![yzm.gif](https://blog.warmplace.cn/static/img/228293cc02147134fd2dea2864a616f7.yzm.gif)

[示例&源码点这里](https://static.warmplace.cn/blog-resources/browser/mouse/index.html)


推荐资料
- [《网道 HTML教程》](https://wangdoc.com/html/)

HTML梳理

1. 本文异或算法聊起，循序渐进推导了对称加密算法的设计
2. 为了解决密钥的传输问题必须介绍了非对称加密技术
3. 为了实现密钥的安全传输，引入了DH密钥交换协议和PKI证书体系
4. 最后介绍了ECDH协议，它RSA非对称加密，安全性更高。



# XOR与填充
**加解密技术的核心是异或运算**
 - 比如明文为  `1011` 密钥为 `0101` 进行异或运算得到 密码`1110`
 - 拿到密码之后与密钥再进行异或运算 得到`1011` 即明文！

异或运算的好处是  执行速度非常快，执行一遍即可

填充
- 前面执行异或运算的前提是 明文和密钥长度是一样的，但通常密钥不可能那么长
- 那么就需要对明文分成多组，每组与密钥长度一致， 当最后一个明文块长度不够时需要填充

# 分组工作模式
我们来讨论下实现加密技术如何对明文进行分组。

## ECB模式
最简单的分组模式时ECB模式，直接将明文分解为多个块，对每个块独立加密

![image.png](https://blog.warmplace.cn/static/img/05a7bddddb22a26976ccfc92cf4b30cd.image.webp)

这种模式的缺点是**无法隐藏数据特征**

![image.png](https://blog.warmplace.cn/static/img/4a629ad79240b269530c0de4e278c784.image.webp)

我们实际期望的是全躁点


![image.png](https://blog.warmplace.cn/static/img/5e3af61afafdc419ad90907ae2f22605.image.webp)


## CBC模式
我们改进一下方案， **每个明文块先与前一个密文块进行异或后，再进行加密**，这样就消除了躁点

![image.png](https://blog.warmplace.cn/static/img/f416505b9464b8647fc28f7525fbaa25.image.webp)

这种方式的缺点是： 加密过程串行化， 无法利用多核CPU的优势

## CTR模式
如果 **通过递增一个加密计数器以产生连续的密钥流** 进行加密如何呢？ 可以对内容进行分片，从而利用多核CPU进行加密

![image.png](https://blog.warmplace.cn/static/img/378a1411cb2f77c327874286ed436921.image.webp)

这种方式的确解决了利用多核CPU优势的问题，仔细分析还有个问题是，无法验证消息的完整性（网络上数据传输可能丢失，而我们不知道）

## hash函数验证消息的完整性

![image.png](https://blog.warmplace.cn/static/img/ec15f7549b7b42476b2d4bc92df468f3.image.webp)

- hash函数的特征， 无论输入多长的内容， 经过hash函数后，可以得到一个定长的较短的hash编码
- hash编码可以理解为子文
- 通常一个好的hash函数，会使得不同的输入很难得到相同的值（也就是碰撞概率很低）

MAC(Message Authentication Code)算法是 hash函数的一种

![image.png](https://blog.warmplace.cn/static/img/6c2f7b97c0b71b2e5af4b30950a20283.image.webp)

- 我们将消息（MESSAGE）经过MAC算法处理 得到 摘要1（MAC）
- 我们再将摘要和密文一起发送给接收者
- 接收者接受的密文， 使用密钥解密出原文， 再将原文进行MAC算法处理 得到的摘要2和原来的摘要1进行对比，就可以验证消息是否完整

有了MAC函数就有了GCM

## GCM工作模式
GCM = CTR + GMAC

![image.png](https://blog.warmplace.cn/static/img/ffba5c04aa59d3a2b0a8ef4ead99a262.image.webp)

对于密文进行MAC算法得到hash

# AES对称加密算法
AES（Advanced Encryption Standard）
- 为比利时密码学家Joan Daemen和Vincent Rijmen所设计，又称Rijindael加密算法
- 常用填充算法: PKCS7
- 常用分组工作模式: GCM


- AES的三种密钥长度
- AES分组长度是128位（16字节）

![image.png](https://blog.warmplace.cn/static/img/1f3ba0a73664aa75afc1b57700e6895e.image.webp)

AES加密步骤

1. 把明文按照128bit (16字节)拆分成若干个明文块，每个明文块是4*4矩阵
2. 按照选择的填充方式来填充最后一个明文块
3. 每一个明文块利用AES加密器和密钥，加密成密文块
4. 拼接所有的密文块，成为最终的密文结果


不管AES如何安全，那么它如何将密钥传送给对方呢？非对称加密就可以解决这个问题。

# 非对称加密
- 每个参与方都有一对密钥 即 公钥和私钥
- 公钥向对方公开， 私钥仅自己使用
- 你给对方发消息 使用自己的私钥加密，另外还要将自己的公钥发给对方， 对方得到密文使用你的公钥解密
- 对方给你发消息 使用你的公钥加密， 你收到密文后使用自己的私钥解密


常用的非对称加密算法： RSA

非对称加密的应用： PKI证书体系、DH密钥交换协议

# RSA非对称加密算法

**1. 我们先看一下公钥和私钥如何产生**

![image.png](https://blog.warmplace.cn/static/img/393fa506ee0e0623c772e6214dd76228.image.webp)

我们选取了p=11 q=29 k=3，按照上述流程得到
- **公钥(3,319)**
- **私钥(187,319)**

**2. 有了公钥和私钥，我们再看一下加解密过程**

![image.png](https://blog.warmplace.cn/static/img/e2db482abbe9fb3f5eb8ed1da60b272a.image.webp)

按照上述流程我们来验证一下

![image.png](https://blog.warmplace.cn/static/img/706a93f22e99264ad7f5912c16521a02.image.webp)


我们在选一个数 26吧，进行私钥加密公钥解密

![image.png](https://blog.warmplace.cn/static/img/1396ac347a8c3dc76f85e2bfc52b6e8b.image.webp)


因为涉及大量乘法，所以非对称加密很耗费性能

注意: **明文 要小于 p和q的乘积n**, 如我们 选取明文320（320>319） 加密后就无法进行解密

:::tip{title=思考：为什么公私钥加密是安全的呢？}
参考第一张图
- 假设我们拿到了 公钥(k,n) 能不能推导出私钥（d,n）呢
- n已经有了，只要找到d
- 由于k是随机选的，只要找到v，就能找到d
- v=(p-1)(q-1)，由于n是一个很大的数字,对n进行质数因式分解是很困难的
- **所以AES算法的安全性在于对一个大数字进行因式分解是很困难的**
:::

# 使用openssl生成公私钥证书
- 生成私钥(公私钥格式参见RFC3447)  `openssl genrsa -out private.pem`
- 从私钥中提取出公钥 `openssl rsa -in private.pem -pubout -out public.pem`
- 查看ASN.1格式的私钥 `openssl asn1parse -l -in private.pem `

![image.png](https://blog.warmplace.cn/static/img/68ef55b39ff13d3f312771b6ef472b67.image.webp)

![image.png](https://blog.warmplace.cn/static/img/817b08c0188578cb1fe4c0dc3c726b56.image.webp)

![image.png](https://blog.warmplace.cn/static/img/e75cee1af6c8718bb5acd1ff007329ff.image.webp)

![image.png](https://blog.warmplace.cn/static/img/7024cf2a531211c46c4cda6626673962.image.webp)

# PKI证书体系
PKI证书体系是非对称加密的应用

为什么需要PKI证书体系
- Web世界是开放互联的，很多时候我们是第一次访问该网站， 如何获取网站的公钥呢？
- 通过通过握手的方式， DNS被劫持，服务端发送的消息就被破解了
- 与现实生活中问题买房子，证明这个房子是我的，需要房产证一样，网络中的这些机构组成了PKI证书体系

公钥的管理: Public Key Infrastructure (PKI) 公钥基础设施
- 由Certificate Authority (CA) 数字证书认证机构将用户个人身份与公开密钥关联在一起
- 公钥数字证书组成 `CA信息`、`公钥用户信息`、`公钥`、`权威机构的签字`、`有效期`
- PKI用户
    - 向CA注册公钥的用户
    - 希望使用已注册公钥的用户

签发证书流程

![image.png](https://blog.warmplace.cn/static/img/bd82a0dd4c61236ef22009177ec770be.image.webp)


签名与验签流程

![image.png](https://blog.warmplace.cn/static/img/e985b9f6aa998be8594dc0a03fd1e3af.image.webp)

证书信任链

![image.png](https://blog.warmplace.cn/static/img/fa790003dea205f14d69dd11bb782e48.image.webp)

证书分类
- DV证书
- OV证书
- EV证书 

# DH 密钥交换协议
在TLS/SSL握手中，DH协议是一种常用的算法，用来沟通协商出后面对称加密所使用的密钥

## DH协议的背景（RSA密钥交换的问题）

事实上 我们使用RSA算法所生成的公私钥，基于这些公私钥生成对称加密所使用的密钥也是可行的

具体流程如下：<br>
<img src="https://blog.warmplace.cn/static/img/674e2852ae3de90f70ea1ca8dce81fb9.image.webp" style="width: 300px"> <br>

1. 客户端发送 hello 到服务端
2. 服务端将公钥发给客户端
3. 客户端生成一个密码（只有它自己知道）使用前一步的公钥加密 发给服务端
4. 服务端使用私钥解码得到密码， 只有都使用这个密码进行对称加密传输数据

有人会说这个模型有个问题是服务端的消息会被机密，这个我们可以通过`PKI`证书体系传递公钥解决服务端消息的保密性。这里我们讨论另一个问题，**消息的前向保密性**

什么叫前向保密性呢？ 假设有个中间人，我现在没有破解server的私钥， 我先通过网络设备，把中间的报文都保存下来，当某一天我破解了 server的私钥，我们就可计算出密码传输的密钥， 就可以对所有的消息解密了。

DH密钥交换协议，就是解决这个问题的

## DH协议内容
- 它可以让双方在完全没有任何预先信息的条件下通过不安全信道创建起一个密钥
- 由于它的每一次会话密钥都是实时生成的， 所以具有前向保密性

具体流程如下图；
<img src="https://blog.warmplace.cn/static/img/4d2a27826620b9b1db46fffab4c23fa0.image.webp" style="width: 300px"> <br>

1. 客户端发送 hello 到服务端
2. 服务端生成公私钥（`publickey1` `privatekey1`）把自己的公钥 `publickey1` 发给客户端
3. 客户端生成公私钥（`publickey2` `privatekey2`）并将`publickey2`发给服务端
4. 通过一种算法，使得客户端使用`privatekey2`和`publickey1` 生成的密钥 与 服务端使用 `privatekey1`和`publickey2`生成的密钥一致

这样即使 privatekey1被破解， 由于 privatekey2 不会知道， 所以还是无法破解之前保存的报文， 从而具有前向保密性

具体示例如下图

![image.png](https://blog.warmplace.cn/static/img/1fe1897efe7a2b6a74b22c2c210a0ca5.image.webp)
- A、a分别是Alice的公钥和私钥
- B、b分别是Bob的公钥和私钥
- K就是协商出的密钥
- g和p两个随机数是公开的，另外再把两个公钥A、B公开

$K = A^b\;mod\;p = (g^a\;mod\;p)^{b}\;mod\;p = g^{ab}\;mod\;p = (g^b\;mod\;p)^a\;mod\;p = B^a\;mod\;p$

我们来验证一下
```js
var p = 23n, g = 5n; // 公开数
var a = 6n, b = 15n; // 双方私钥
var A = g**a % p;
var B = g**b % p;
var K1 = A**b % p;
var K2 = B**a % p;
console.log(K1 === K2, A, B, K1, K2); // true 8n 19n 2n 2n
// p g a b可以随便调整， K1与K2值不变
```

DH密钥交换协议存在一个问题 中间人攻击
- 中间人拦截 A与B的通信
- 先假装自己是B，与A通信，破解A的消息
- 再假装自己是A，与B通信，破解B的消息

> Q: 什么情况下会出现中间人攻击呢？<br>
> A: 代理工具、DNS劫持等。

解决方案就是引入第三方 解决身份验证问题， 即KPI证书体系


# ECDH协议

由于DH密钥交换协议有两个问题
1. 涉及大量乘法运算，所以很耗性能
2. 它的安全基于大因数分解比较困难，所以通常需要很长的位数

现在互联网中主要使用的是ECDH密钥交换协议，它其实是DH密钥交换的升级，它基于ECC椭圆曲线的特性来实现

## ECC椭圆曲线的特性

![image.png](/static/img/72ef635d2e8e8280c893e82210e59e98.image.webp)

上图 $y^2=x^3+a*x+b$ 就是维尔斯特拉斯椭圆函数

椭圆曲线始终沿X轴对称。

从上面四张图来看，它跟椭圆无关，之所以叫做椭圆曲线，是因为它在计算某些属性的时候与计算椭圆弧长相关的属性具有相似之处。


ECC曲线的特性： `+运算`

![image.png](/static/img/c9d86fdc9cc83e934699165b3e2e34b4.image.webp)

这里的`+运算`并非数学中的`+`运算，只是一种假设运算，利用数学中`+`运算的特性（结合律、交换律）

![image.png](https://blog.warmplace.cn/static/img/03c4c7d2b176847545faf0b65e0c3761.image.webp)

`P`和`Q`是曲线上的两点，`P`和`Q`连线交与曲线`R1`点，`R`是`R1`关于X轴的对称点，也在曲线上.

假设 $P + Q  + R1 = 0$ ，那么 $P + Q = - R1$ ，即 $P + Q = R$ 
如果 `P`和`Q`是同一点，则$2P = R$


## 例子
- 设曲线 $y^2=x^3-7x+10$
- $P=(1,2)$, $Q=(3,4)$在曲线上 求 $R$ 点坐标
    - P在曲线上 $2^2=4=1^3-7*1+10$
    - Q在曲线上 $4^2=16=3^3-7*3+10=27-21-10$

我在[这个网站](https://www.shuxuele.com/data/grapher-equation.html)绘制了一张图

![image.png](/static/img/bb4ed72d3e479c0dbe1da0c0ac91e923.image.webp)

求解 $R$ 有个公式

<img src='/static/img/1d070a295aebfaf812e24d556764310c.image.webp' width=200>

- $m$ 是斜率  
- $x_R$ 是R点X轴坐标
- $y_R$ 是R点Y轴坐标

$m=(y_P-y_Q)/(x_P-x_Q)=(2-4)/(1-3)=1$<br>
$x_R=m^2-x_P-x_Q=1^2-1-3=-3$<br>
$y_R=y_P+m(x_R-x_P)=2+1*(-3-1)=-2$
$y_R=y_Q+m(x_R-x_Q)=4+1*(-3-3)=-2$

以上就是椭圆曲线`+运算`的几何意义和代数意义。那么它与加解密有什么关系呢？

ECC的关键原理

$Q=K.P$ &emsp; <img src='/static/img/03b0f81013e53a6bbd27370d2c382ecb.image.webp' width='150'>
- 已知K与P，求解Q容易，即加密过程正向运算快， 
- 已知Q与P，计算K困难，即破解密钥逆向运算非常困难

为什么正向运算快？ 这里有个可以借助指数运算
1. 对$P$点做切线 按前面的公式求出 $2P$
2. 对$2P$点做切线 按前面的公式求出 $4P$

逆向运算，已知Q与P，求出多少个K，这是没有规律的，只能暴力求解。


<img src="https://blog.warmplace.cn/static/img/3785de615074bcaa864f932bf18025f1.image.webp" style="width: 200px"> <br>


这个公式里 $P$ 是已值的， $Q$ 是公钥，$K$ 就是私钥。


## ECDH协议
ECDH协议就是DH协议使用椭圆曲线ECC后的变种，优点是比DH计算速度快，同等安全条件下密钥更短

![image.png](https://blog.warmplace.cn/static/img/5b31942bdbf73c5c251fe43f59df91bf.image.webp)


# 非对称加密总结
前面讲了非称加密有两种方案
1. 第一种是基于大因数分解困难的RSA非对称加密算法
2. 对于中间人攻击、DNS劫持等引起的服务端消息的保密性引入PKI证书体系
3. 公钥是用来暴露给别人，让别人给你发消息用的，私钥用来解密接受的消息，你回复消息需要私钥加密，别人通过你的公钥解密。
4. 为了解决消息的前向保密性引入DH密钥协议，具体算法为
    - 已知 g和p 两个公开数，双方各自生成私钥a和b
    - 使用公式 `g**私钥 % p` 生成各自的公钥A和B进行交换
    - 通过 `对方公钥**自己私钥 % p`, 双方得到同一个密钥K
    - 通过这个密钥K，双方就可以使用对城加密传输数据了。
5. 第二种是ECDH协议，更加安全。借助椭圆曲线公式上和定义一种`+运算`实现求解困难验证容易。

加密技术

前一篇文章《应用层协议》阐述了HTTP协议的发展演化过程，这一篇文章将深入讲解HTTP协议常见的状态码、请求头、响应头、缓存策略、分块传输等内容。



# HTTP协议定义与特点
定义：HTTP协议是用于从万维网**服务器传输超文本到本地浏览器**的传送协议。
- **基于TCP/IP通信协议来传输数据**
- 是一个属于**应用层的面相对象**的协议。
- 工作于**客户端-服务器**架构之上。

主要特点
1. **简单快速**
2. **灵活** 可以传输任意类型的数据  `Content-Type`标记
3. **无连接** 每次连接只处理一个请求，HTTP/1.1引入长连接
4. **无状态** 对事务处理没有记忆能力， HTTP/1.1引入Cookie
5. **支持B/S和C/S模式**

# URL
示例 `http://127.0.0.1:5500/browser/a.html?a=1&b=2#asd`
`${location.protocol}//${location.hostname}:${location.port}${location.pathname}${location.search}${location.hash}`
- 协议 `protocol`  `http:` `https:`
- 域名  `hostname`  `127.0.0.1`
- 端口 `port` `5500`
- 虚拟目录 `pathname`  `/browser/a.html`
- 参数 `search` `?a=1&b=2`
- 锚点 `hash` `#asd`

在协议与域名之间还有一些可选内容 `user:pass@`  HTTP认证

URL/URI/URN
- URI包含URL和URN
- URL 统一资源定位器
- URN 统一资源命名 `mailto:java-net@java.sun.com`
- URI 统一资源标识符
    - `ftp://user:pass@mysite.net:8502/shared/movie/aa.mkv`
    - ![aa.jpg](https://blog.warmplace.cn/static/img/09a6eb5a9f8ba7a97c9802ce82b25d8e.aa.webp)
 
URL编码

如果URL参数中出现特殊字符要进行编码
- 不在ASCI码范围内的字符
- ASCI码中不可显示的字符
- URL规定的保留字符
- 不安全字符 如空格、引号、尖括号等

URL百分号编码
- 对于URL合法字符，编码与不编码是等价的
- 非ASI码字符，建议先UTF8编码在US-ASCI编码


# 请求与响应

- 请求 = 请求行+请求头+请求内容
- 请求行组成: 以一个方法符号开头，后面跟着请求的URI和协议的版本。

![image.png](https://blog.warmplace.cn/static/img/b01e4f32d60fb39d8f1461ac48f1dc4f.image.webp)

- 响应 = 状态行+响应头+响应内容
- 状态行组成: 服务器HTTP协议的版本，服务器发回的响应状态代码和状 态代码的文本描述。

![image.png](https://blog.warmplace.cn/static/img/10a0536a33c3ef3478f2b3a2f19f2c8a.image.webp)

## 状态码
状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值: 

| 分类 | 描述 |
| --- | --- |
| 1xx | 指示信息--表示请求已接收，继续处理 |
| 2xx | 成功--表示请求已被成功接收、理解、接受 |
| 3xx | 重定向--要完成请求必须进行更进一步的操作 |
| 4xx | 客户端错误--请求有语法错误或请求无法实现 |
| 5xx | 服务器端错误--服务器未能实现合法的请求 |

如果客服端收到了一个它不认识的响应码怎么办？
- 555  ---> 500
- 277 ---> 200

常见状态码

| 状态码 | 描述  |
| --- | --- |
| 101 | 协议升级 如websocket |
| 200 OK | 成功返回响应 |
| 201 Created | 有新的资源在服务器端成功创建 |
| 202 Accepted | 服务器接受并开始处理请求名单请求未处理完成 <br> 为处理异步、需长时间处理的任务而设计 |
| 204 No Content | 成功执行了请求且不携带响应包体，并暗示客户端无需更新当前的页面视图 |
| 205 Reset Content | 与204的区别是 暗示客户端更新视图 |
| 301 Moved Permanently | 永久重定向，使用GET请求 |
| 302 | 临时重定向，使用GET请求 |
| 304 | 协商缓存 |
| 307 | 临时重定向，保持原有的请求方法 |
| 308 | 永久重定向，保持原有的请求方法 |
| 400 Bad Request | 服务器认为客户端出现了错误，但不能明确判断是哪种错误。例如HTTP请求格式错误 |
| 401 Unauthorized | 用户信息缺失或不正确，导致服务器无法处理请求 |
| 403 Forbidden | 没有权限 |
| 404 Not Found | 服务器没有找到对应的资源 |
| 405 Method Not Acceptable | 服务器不支持请求行中的method方法 |
| 408 Request Timeout | 服务器接受请求超时 |
| 409 Confict | 资源冲突，如上传文件 |
| 410 Gone | 服务器没有找到对应的资源,且明确知道该位置永久性找不到该资源 |
| 415 Unsupported Media Type | 上传的文件类型不被服务器支持 |
| 416 Range Not Satisfiable | 无法提供Range请求中制定的那段包体 |
| 426 Upgrade Required | 告知客户端必须升级协议才能继续处理 |
| 500 Internal Server Error | 服务器内部错误 |
| 501 Not Implemented | 服务器不支持请求所需要的功能 |
| 502 Bad Gateway | 代理服务器无法获得合法响应 |
| 503 Service Unavailable | 服务器资源尚未准备好处理当前请求 |
| 504 Gateway Timeout | 代理服务器无法及时的从上游获得响应 |


## 请求方法
- HTTP/1.0定义了三种请求方法： GET, POST 和 HEAD方法。
- HTTP/1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。


| GET | 请求指定的页面信息，并返回实体主体 |
| --- | --- |
| HEAD | 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 |
| POST | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。<br> 数据被包含在请求体中。<br> POST请求可能会导致新的资源的建立和/或已有资源的修改。 |
| PUT | 从客户端向服务器传送的数据取代指定的文档的内容。 |
| DELETE | 请求服务器删除指定的页面。 |
| CONNECT | HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 |
| OPTIONS | 允许客户端查看服务器的性能。 |
| TRACE | 回显服务器收到的请求，主要用于测试或诊断。 |

HEAD 请求的用途
- 检查资源是否存在
- 获取资源的元数据
- 检查资源是否被修改
- 测试服务器的可用性

OPTIONS请求的用途
- 获取服务器支持的HTTP方法
    - 服务器会在响应中返回一个Allow头，其中包含服务器支持的HTTP方法列表。
- CORS预检请求
- 获取资源的通信选项
- 测试服务器的可用性和功能

POST方法 请求包体的编码方式 enctype
- `content-type: application/x-www-form-urlencoded`
    - 数据被编码成以'&'分割的键-值对，同时以“=”分割键和值，字符以URL编码方式编码
-  `content-type: multipart/form-data`
    - boundary 分隔符
    - 每部分表述皆有HTTP头部描述子包体，例如Content-Type
    - last-boundary结尾


![image.png](https://blog.warmplace.cn/static/img/e0869f079dd24dda0d27d4fcf7bf3e5a.image.webp)
![image.png](https://blog.warmplace.cn/static/img/3882b4be898a03b7f2872b9cb7fee678.image.webp)
![image.png](https://blog.warmplace.cn/static/img/7ee0e1075db0ce1122f8dc4210bf017d.image.webp)



## GET与POST的区别

| - | GET | POST |
| --- | --- | --- |
| 参数 | 参数放在URL后面 | 参数放在请求体里面 |
| 限制 | URL长度有限制 | 没有限制 |
| 安全 | 不安全 | 相对安全 |
| 跨域 | - | - |

表单请求
- `application/x-www-form-urlencoded`：数据会URL编码
- `multipart/form-data`：常用，不需要编码，每个表单元素独立

# 常用的请求头与响应头

## 配对使用的请求头与响应头
| 请求头 | 响应头 |作用 |
| --- | --- |--- |
| `Authorization` | `WWW-Authenticate` | HTTP Basic Authentication 如果认证失败返回状态吗401继续认证 |
| `User-Agent`  | `Server` |`User-Agent` 允许客户端将它的操作系统、浏览器和其它属性告诉服务器。也可做内容协商，如重定向到移动端还是pc端<br>作用： <br>1）兼容性处理 根据浏览器版本号或操作系统版本号 <br>2）内容协商 重定向<hr> `Server` 包含了服务器用来处理请求的软件信息。|
| `Accept` | `Content-Type` | 客户端协商、服务器选择资源的类型 |
| `Accept-Charset` | `charset` | 资源的文件编码 |
| `Accept-Language` | `content-language` | 使用什么语言版本的页面 |
| `Connection` | - | 协商是否使用长连接 默认 `keep-alive` 长连接 |
| `Accept-Encoding` | `content-encoding` |指定可接受的压缩内容编码。 |
| `Cookie` | `Set-Cookie` | - |

## 单独使用的请求头
| 请求头 | 作用 |
| --- |--- |
| `Host` |  主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的，发送请求时，该报头域是必需的。 |
| `Referer` | 告诉服务器我是从哪个页面链接过来的<br> 作用：**作用图片防盗链、图片第三方广告、防csrf攻击**|

## 单独使用的响应头
| 响应头 | 作用 |
| --- |--- |
| `Location` | 响应报头域用于重定向接受者到一个新的位置<br> Location响应3XX报头域常用在更换URL的时候。 |
| `Refresh` | 表示浏览器应该在多少时间之后刷新文档，以秒计。<br> 还可以重定向 |

文件下载的原理,响应头如下
```http
Content-Disposition: attachment
filename='aa.jpg'
```


## 缓存相关
| 请求头 | 响应头 | 作用 |
| --- |--- |--- |
| `If-Modified-Since` | `Last-Modified` |HTTP/1.0 协商缓存, 绝对时间<br> 只能精确到秒， 如果1s内多次修改，会导致缓存失效|
| `Pragma`| - | `Pragma`只有一个值`no-cache`|
| - | `Expires` | `HTTP/1.0` 强缓存, 绝对时间 |
| `ETag` | `If-None-Match` | `HTTP/1.1` 协商缓存 |
| `Cache-Control` | `Cache-Control` | `HTTP/1.1` 缓存总方案，相对时间  |

Q：有了 Last-Modified 为什了新增ETag字段呢？

A：因为有些时候文件修改日期变了，但是内容没有变更，这样就导致资源的重复请求浪费带宽。
协商缓存 etag 与 Last-Modified字段， 另外Last-Modified是绝对时间一秒为单位， 如果一秒内发生了变更缓存会是失效

协商缓存优先级流程图<br>
<img src="https://blog.warmplace.cn/static/img/20f58c1f60b203f1725b777d48226c6d.image.webp" style="width:300px">

Q: 强缓存过期了会怎样

A: 强缓存过期，如果协商缓存存在会走协商缓存

`cache-control`用法

404 206也可以被缓存


## 复杂的Cache-Control
`Cache-Control`的用法很复杂，
- 可以在请求中用也可以在响应中用
- 有些属性值后面要跟`=数字`，有些属性值只能单独使用，还有一些支持两种用法


如下图
- 红色表示后面要跟`=数字` 黑色的属性值只能单独使用， 蓝色的表示既可以单独使用也可以跟`=数字`

![image.png](https://blog.warmplace.cn/static/img/34cfd5de2e716372ae7bb976716d09c4.image.webp)

**在请求中的用法**
- <span style="color: red;font-weight:bold">max-age</span> 告诉服务器，客户端不会接受Age超出max-age秒的缓存
- <span style="color: red;font-weight:bold">max-stale</span> 告诉服务器，即使缓存不在新鲜，但陈旧秒数没有超出`max-stale`时,客户端仍然打算使用， 若`max-stale`后没有值，则表示无论过期多久客户端都可以使用
- <span style="color: red;font-weight:bold">min-fresh</span> 告诉服务器，Age至少经过 `min-fresh` 秒后才可以使用
- `no-cache` 不使用强缓存
- `no-store` 告诉各代理服务器不要对该请求的响应缓存
- `no-transform` 告诉代理服务器不要对该请求的响应缓存
- `only-if-cached` 告诉服务器只能返回缓存的响应，否则若没有缓存则返回504错误码

**在响应中的用法**
- `must-revalidate` 告诉客户端一旦缓存过期，必须向服务器验证后才使用
- `proxy-revalidate` 与must-revalidate类似，但它仅对代理服务器的共享缓存有效
- <span style="color: blue;font-weight:bold">no-cache</span> 告诉客户端使用协商缓存, 如果no-cache后指定头部，则若客户端的后续请求几响应不含有这些头则直接使用缓存
- <span style="color: red;font-weight:bold">max-age</span> 告诉客户端Age查处max-age秒后则缓存过期
- <span style="color: blue;font-weight:bold">s-maxage</span> 与max-age相似，但仅针对共享缓存，且优先级高于max-age和Expires
- `public` 表示无论私有缓存还是共享缓存皆可以响应缓存
- <span style="color: blue;font-weight:bold">private</span> 表示该响应不能被代理服务器作为共享缓存使用，若private后制定头部，则告诉代理服务器不能缓存制定的头部，但可以缓存其他部分
- `no-store` 告诉所有下游节点不能对响应进行缓存
- `no-transform` 告诉代理服务器不能修改消息报题的内容

其他：
- http/1.1的缓存优先级 高于http/1.0
- Vary缓存， 可以根据压缩版本匹配决定缓存。

## 浏览器缓存优先级
- ServiceWorker
- MemoryCache
- DiskCache
- Push Cache

- [浏览器的缓存机制](https://juejin.cn/post/6969208073944727589)

# 包体的传输方式
- 包体即请求内容或响应内容
- 包体的传输方式有两种 1） 定长包体 2）不定长包体

## 定长包体
- 请求或响应中都可以可以携带包体
- 以下消息不能含有包体
    - HEAD方法对应的响应
    - 1xx/204/304 对应的响应
    - CONNECT方法对应的2xx响应
   
## 不定长包体
发送HTTP消息时不能确定包体的全部长度<br>
使用 `Transfer-Encoding`头部指名使用Chunk传输方式<br>
含 `Transfer-Encoding`头部后`Content-Length`头部会被忽略

优点
1. 基于长连接持续推送动态内容
2. 压缩体积较大的包体时，不必完全压缩完（计算出头部）在发送，可以边发送边压缩
3. 传递必须在包体传输完成才能计算出 Trailer 头部

用途：
断点续传、多线程下载、随机点播

1. 客户端明确任务：从哪里开始下载
    - 本地是否已有部分文件
    - 文件已下载的部分在服务器是否发生改变
    - 使用几个线程并发下载
2. 下载文件的指定部分内容
3. 下载完毕后拼装成统一的文件

## 随机点播原理
> 前提条件： 需要服务器支持 HTTP Range规范，服务器通过响应头`Accept-Ranges`告知，`bytes` 支持 `none` 不支持

![image.png](https://blog.warmplace.cn/static/img/d7124879dc67f8ada1fce8f52e345009.image.webp)

也可以取多段

![image.png](https://blog.warmplace.cn/static/img/f86b484ab01f654631f146cd4a6bf0a2.image.webp)

下载服务器资源发生改变怎么办？

这时候要使用条件请求，有两种方式
1. 请求头`if-Unmodified-Since` 或 `if-Match`
2. 请求头`if-Range`=`ETag`或`Last-Modified`

![image.png](https://blog.warmplace.cn/static/img/af2e978a8beb6fa33f769fcdb1af1bc3.image.webp)

如果资源发生改变会返回 状态吗412 这时候要重新下载

随机点播服务器的响应
- 会返回状态码206
- 返回响应头`Content-Range:bytes start-end`

如果请求头`Range`范围不对， 服务器会返回416

断点续传与随机点播的原理相同， 只是内容片段是放在请求主体里面。