前言

大家应该都遇到过需要在浏览器中存储数据的情况吧，我们常用的就是cookie、localStorage、sessionStorage，这些方法一般来说能够满足我们的日常开发使用。但是，不知道大家有没有遇到过需要存储大量的数据的情况，这时候，前面提到的这些方法可能就满足不了我们的要求，这时候IndexedDB或许可以成为一个不错的选择。

什么是IndexedDB？

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。

主要特点：

• 异步API（不会阻塞UI）
• 支持事务
• 支持索引查询
• 同源策略限制
• 存储空间较大（通常50MB以上，取决于浏览器）

适用场景

• 需要离线工作的Web应用
• 需要存储大量结构化数据的应用
• 需要复杂查询的本地数据存储
• 需要高性能本地数据访问的应用

IndexedDB为Web应用提供了强大的本地存储能力，虽然API相对复杂，但能够满足高级的客户端数据存储需求。

场景举例

• Web 游戏
  • 场景： 保存游戏进度、配置、用户数据等。
  • 示例：本地保存 RPG 游戏的存档数据、存储离线资源（角色模型、场景数据）、用户自定义设置存储（分辨率、按键配置）
• 渐进式 Web 应用（PWA）
  • 场景： 提升 Web 应用的离线体验和性能。
  • 示例：离线播放音乐或视频（配合 service worker 缓存媒体文件）、离线阅读应用（小说、电子书等）、PWA 的聊天应用暂存聊天记录

基本使用方法介绍

下面我们介绍一下IndexedDB的一些方法及使用举例。

1. indexedDB.open(name, version)
   用于打开或创建数据库，name是数据库名称，version可选，数据库版本号。升级数据库结构时需要修改版本。

1

const request = indexedDB.open('MyDatabase', 1);

2. request.onupgradeneeded
   当数据库第一次创建或版本升级时触发，用于创建对象仓库（Object Store）和索引等结构。

1
2
3

request.onupgradeneeded = function(event) {
  // xxxxxx
};

3. request.onsuccess / request.onerror
onsuccess：打开数据库成功后的回调，onerror：打开数据库失败的回调。

1
2
3
4
5
6
7
8

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('数据库打开成功');
};

request.onerror = (event) => {
  console.error('数据库打开失败', event.target.error);
};

4. db.createObjectStore(name, options)
   在 onupgradeneeded 中调用，用于创建对象仓库。keyPath：指定主键字段名称（也可使用自动递增：{ autoIncrement: true }）。

1
2
3
4
5

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

5. db.transaction(storeNames, mode)
   创建一个事务对象，用于读取或写入数据。storeNames：对象仓库名称或数组，mode：操作模式，readonly 或 readwrite。

1
2

const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');

6. store.add(value) / store.put(value)
   用于添加或更新数据。add()：如果主键已存在会报错，put()：存在则更新，不存在则新增。

1
2

store.add({ id: 1, name: 'Alice' });
store.put({ id: 1, name: 'Alice Smith' });

7. store.get(key)
   用于根据主键获取数据。

1
2
3

store.get(1).onsuccess = (event) => {
  console.log('获取结果：', event.target.result);
};

8. store.delete(key)
   删除某条数据。

1

store.delete(1);

9. store.clear()
   清空对象仓库中所有记录。

1

store.clear();

10. store.openCursor()
    用于遍历所有数据（类似迭代器）。

1
2
3
4
5
6
7
8
9
10
11

const cursorRequest = store.openCursor();

cursorRequest.onsuccess = (event) => {
  const cursor = event.target.result;
  if (cursor) {
    console.log(cursor.key, cursor.value);
    cursor.continue();  // 移动到下一条
  } else {
    console.log('遍历完成');
  }
};

11. store.createIndex(name, keyPath, options)
    创建索引，便于通过其他字段查询。

1

store.createIndex('nameIndex', 'name', { unique: false });

之后可以通过索引查询：

1
2

const index = store.index('nameIndex');
index.get('Alice').onsuccess = (e) => console.log(e.target.result);

之后可以通过索引查询：

1
2

const index = store.index('nameIndex');
index.get('Alice').onsuccess = (e) => console.log(e.target.result);

12. db.deleteDatabase(name)
    用于删除IndexedDB，name为创建的IndexedDB名称，注意name需要匹配，删除后数据无法恢复，慎用！数据库被打开无法被删除。

1
2
3
4
5
6
7
8
9
10
11
12

const deleteRequest = indexedDB.deleteDatabase('myDatabase');
deleteRequest.onsuccess = function () {
  console.log('数据库删除成功');
};

deleteRequest.onerror = function (event) {
  console.error('数据库删除失败', event.target.error);
};

deleteRequest.onblocked = function () {
  console.warn('删除被阻止，可能数据库正被打开中');
};

注意事项

1. 异步操作：所有IndexedDB操作都是异步的，需要通过事件处理结果
2. 事务：任何数据操作都需要在事务中进行
3. 版本控制：数据库结构变更需要通过版本升级实现
4. 错误处理：务必处理onerror事件，避免静默失败
5. 浏览器兼容性：现代浏览器基本都支持，但旧版IE需要特定版本

常用的库idb

由于IndexedDB的原生API不友好，idb成为了热门的IndexedDB包装库，方便我们我们操作IndexedDB，大家感兴趣的可以自己去了解一下。
idb的github地址

资料：
IndexedDB

CSS（层叠样式表）是用于描述 HTML 或 XML 文档外观的样式表语言。随着 Web 技术的不断发展，CSS 也引入了许多新的特性和方法，使得开发者能够更灵活地控制页面的样式和布局。本文将介绍一些现代 CSS 中常用的方法和属性，帮助开发者更好地理解和应用这些特性。

2. CSS 一些特性介绍

steps()

说明:
steps() 是一个用于 animation-timing-function 属性的函数，它允许你将动画分成多个步骤，而不是平滑过渡。这对于创建逐帧动画非常有用。

使用注意事项:

• steps() 接受两个参数：第一个参数是步骤的数量，第二个参数是可选的，用于指定步骤的变化点（start 或 end）。
• 如果你想要动画在每一步开始时变化，使用 start；如果你想要动画在每一步结束时变化，使用 end。

常见使用方式举例:

1
2
3
4
5
6
7
8

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: move 2s steps(5, end) infinite;
}

CSS 变量

说明:
CSS 变量（也称为自定义属性）允许你在 CSS 中定义可重用的值，并在整个样式表中引用它们。CSS 变量以 -- 开头。

使用注意事项:

• CSS 变量是大小写敏感的。
• 你可以在 :root 伪类中定义全局变量，也可以在特定选择器中定义局部变量。
• 使用 var() 函数来引用变量。

常见使用方式举例:

1
2
3
4
5
6
7

:root {
  --primary-color: #3498db;
}

.element {
  background-color: var(--primary-color);
}

min()、max() 和 clamp()

说明:
min()、max() 和 clamp() 是 CSS 中的数学函数，用于在样式表中进行动态计算。

• min()：返回一组值中的最小值。
• max()：返回一组值中的最大值。
• clamp()：接受三个参数（最小值、首选值、最大值），并返回一个介于最小值和最大值之间的值。

使用注意事项:

• 这些函数可以用于任何接受长度、百分比、角度等值的属性。
• clamp() 特别适用于响应式设计，因为它可以根据视口大小动态调整值。

常见使用方式举例:

1
2
3
4

.element {
  width: min(100%, 500px);
  font-size: clamp(1rem, 2.5vw, 2rem);
}

@supports

说明:
@supports 是一个 CSS 规则，用于检测浏览器是否支持某个 CSS 特性。如果支持，则应用其中的样式。

使用注意事项:

• @supports 可以用于渐进增强，确保在不支持某些特性的浏览器中提供备用样式。
• 你可以使用逻辑运算符（如 and、or、not）来组合多个条件。

常见使用方式举例:

1
2
3
4
5

@supports (display: grid) {
  .container {
    display: grid;
  }
}

accent-color

说明:
accent-color 是一个用于设置表单控件（如复选框、单选按钮、进度条等）的强调色的属性。

使用注意事项:

• accent-color 目前仅支持部分表单控件。
• 该属性可以快速统一表单元素的样式，减少自定义样式的复杂性。

常见使用方式举例:

1
2
3

input[type="checkbox"] {
  accent-color: #3498db;
}

@container

说明:
@container 是一个用于容器查询的 CSS 规则，允许你根据容器的大小而不是视口大小来应用样式。

使用注意事项:

• 容器查询目前仍处于实验阶段，浏览器支持有限。
• 你需要先定义一个容器，然后使用 @container 来查询该容器的大小。

常见使用方式举例:

1
2
3
4
5
6
7
8
9

.container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .element {
    font-size: 1.5rem;
  }
}

color-mix()

说明:
color-mix() 是一个用于混合两种颜色的 CSS 函数。你可以指定混合的比例。

使用注意事项:

• color-mix() 目前仍处于实验阶段，浏览器支持有限。
• 你可以使用 in 关键字来指定颜色空间（如 srgb、lab 等）。

常见使用方式举例:

1
2
3

.element {
  background-color: color-mix(in srgb, #3498db 50%, #e74c3c 50%);
}

:has()

说明:
:has() 是一个 CSS 伪类，允许你选择包含特定子元素的父元素。

使用注意事项:

• :has() 目前仍处于实验阶段，浏览器支持有限。
• 该伪类可以用于复杂的选择器，帮助你更精确地选择元素。

常见使用方式举例:

1
2
3

div:has(> p) {
  border: 1px solid #000;
}

clip-path 裁剪路径

说明:
clip-path 是一个用于裁剪元素的属性，允许你使用各种形状（如圆形、多边形等）来裁剪元素的可视区域。

使用注意事项:

• clip-path 可以使用基本形状（如 circle()、polygon()）或 SVG 路径来定义裁剪区域。
• 该属性可以用于创建复杂的视觉效果，如不规则形状的图片裁剪。

常见使用方式举例:

1
2
3

.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

filter 滤镜效果

说明:
filter 是一个用于应用图形效果（如模糊、亮度调整、对比度调整等）的属性。

使用注意事项:

• filter 可以接受多个滤镜函数，如 blur()、brightness()、contrast() 等。
• 该属性可以用于创建各种视觉效果，如毛玻璃效果、黑白照片效果等。

常见使用方式举例:

1
2
3

.element {
  filter: blur(5px) grayscale(50%);
}

3. 总结

本文介绍了一些现代 CSS 中常用的方法和属性，包括 steps()、CSS 变量、min()、max()、clamp()、@supports、accent-color、@container、color-mix()、:has()、clip-path 和 filter。这些特性和方法为开发者提供了更强大的工具来创建复杂、响应式和视觉效果丰富的网页。随着浏览器对这些特性的支持不断完善，开发者可以更加灵活地应用这些技术，提升用户体验。

相信大家都遇到过拖动某块拼图到对应的位置，拖到大致和缺口重合的位置之后，图片验证通过，可以进行后续的操作，那么这种效果是怎么实现的？下面我们来看一下具体的实现。

相关知识

CSS Sprite

CSS Sprite，我们一般叫他雪碧图或精灵图，它是一种图像拼合技术。该方法是将小图标和背景图像合并到一张图片上，然后利用 css 的背景定位来显示需要显示的图片部分。

精灵图的优点：

• 多张图片合成一张，减少图片的字节
• 减少网页的http请求，从而大大的提高页面的性能。
  background-position
  background-position有两个值，第一个值是水平位置，第二个值是垂直位置。即需要将背景图向右调的时候用正值，向左则为负值 同理将背景图上下调动的时候上是用负值，下是正值。
  offsetLeft：该元素左外边框至窗口左边界的距离。
  clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标。
  offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。
  
  

图片验证的原理

图片验证核心其实就是按钮的拖动，也就是位置的计算：

• 设置两层图片，在下层图片中设置一个缺口，用于匹配验证
• 将上层的图片通过background-position以及其他一些css样式设置，保证只露出和下层缺口一样大小和对应区域的显示
• 通过js控制上层图片的移动，并对比上层图片和下层缺口的位置数据，当两者位置相同或在允许的误差范围内时，即判定验证成功。
  

图片验证的实现

• html代码
  • 
• css代码
  • 
• js代码
  • 
  • 

用户还可以根据自身需要进行进一步的扩展，比如设置多张验证图片，每次随机显示不同的图片等等。

• 定义：跨站脚本攻击（Cross Site Scripting），一种经常出现在web应用中的计算机安全漏洞，允许恶意web用户将代码植入到给其他用户使用的页面中
• 危害：
  • 盗取各类用户账号，如网银、网站管理员账号
  • 读取、串改、添加、删除企业敏感数据
  • 非法转账
  • 控制受害者机器向其他网站发起攻击
• 攻击方式：
  • 存储型攻击：XSS代码被插入到类似个人信息、网站留言、评论、脚本等存储在服务器上的信息中
  • 反射型攻击：脚本隐藏在URL中，欺骗用户自己去点击链接，从而触发隐藏的XSS代码，一般出现在搜索页面、用户登陆口，用以窃取cookie或进行钓鱼欺骗
  • DOM型攻击：客户端脚本通过DOM的冬天检查修改页面内容，不依赖服务器端数据，仅在客户端执行
• 防范手段
  • 陌生的链接尽量不要点，使用正规网站
  • 对内容进行转义或过滤，使恶意脚本失效
  • 设置HttpOnly属性，限制恶意脚本的访问

CSRF攻击

• 定义：跨站请求伪造（Cross-site request forgery）,黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户登录状态发起跨站请求
• 危害：
  • 获取用户的隐私数据
  • 盗用用户身份，发送恶意请求，如转账、发消息、发邮件等
  • 配合其他漏洞发起攻击
• 攻击方式
  • 登录网站后，在未登出的情况下，打开危险网站，导致信息被窃取，危险网站依据获取的信息发起请求
• 防范手段
  • 检查请求头中origin属性和referer属性，明确请求是否从本站发出
  • 加强Token验证

点击劫持

• 定义：一种视觉上的欺骗手段。攻击者使用透明、不可见的iframe覆盖在网页上，诱导用户进行操作
• 危害
  • 泄露信息
  • 在不知情的情况下，进行了一些未知操作
• 攻击方式
  • Flash点击劫持，网页上的一些需要用户点击的小游戏
  • 覆盖攻击，比如将页面中的图片、信息覆盖为攻击者展示的信息
  • 拖拽劫持，用户使用拖拽功能时，将敏感信息拖拽到攻击者想要的地方
  • 手机触屏劫持
• 防范手段
  • 网页禁止iframe嵌套
  • 请求头设置X-FRAME-OPTIONS，防御利用iframe嵌套的攻击
    • DENY:拒绝任何域加载
    • SAMEORIGIN允许同源域加载
    • ALLOW-FROM：定义允许frame加载的页面地址

SQL注入

• 定义：在数据交互中，后台服务器接收前端传入的数据时，未做严格判断，导致数据在拼接到SQL语句中后，被当做语句的一部分执行，导致数据库受损
• 危害
  • 数据库被恶意操作、远程控制、安装后门、信息泄露
  • 篡改网页，传播恶意信息、软件
  • 破坏硬盘数据，瘫痪系统
• 攻击方式
  • 变量类型：数字型、字符型
  • HTTP提交方式：GET请求query string、POST请求body、cookie
  • 报错注入：
    • 报错注入：制造错误条件，使得查询结果出现在错误信息中
    • 盲注：前端无法看到，需要利用一些辅助方法进行判断，比如返回booean值的布尔盲注，返回延时sleep()的时间盲注
    • 堆叠注入：多条SQL语句一起执行
• 防范手段
  • 使用预编译语句集（内置了处理SQL注入的能力）
  • 使用正则表达式过滤传入的参数
  • 字符串过滤

OS命令注入攻击

• 定义：通过web应用，执行非法的操作系统命令，以达到攻击目的
• 危害
  • 执行未授权的代码或命令，读取或修改攻击者无权访问的数据
• 攻击方式
  • 应用程序通过用户输入的参数构造OS命令
• 防范手段
  • 以最小权限运行程序
  • 考虑使用把名单过滤OS命令
  • 尽可能使用库或框架构建程序

HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法

幂等：如果使用同一种请求方法的多个等效请求对服务器的预期影响，与一个等效请求对服务器的预期影响一样，那么这种请求方法被认为是幂等的。

GET（幂等）

• 一般用于获取/查询资源信息，比如搜索排序、筛选，只能提交字符型数据
• 提交的数据会在地址栏显示出来
• 由于浏览器对地址栏长度的限制而导致传输的数据有限制（所谓的请求长度限制是由浏览器和 web 服务器决定和设置的，各种浏览器和 web 服务器的设定均不⼀样，这依赖于各个浏览器⼚家的规定或者可以根据 web 服务器的处理能⼒来设定）
  • IE：2083个字符
  • Firefox：65536个字符
  • Safari：80000个字符
  • Opera：190000个字符
  • google：8182个字符
• 请求之后，结果会被浏览器缓存收纳，后续请求相同内容，从缓存中获取

POST（非幂等）

• 一般用于更新资源信息，可以提交任何类型的数据，如文件、视频、音频等
• 请求数据放在http包的包体中不会在地址栏显示出来
• 无传输数据限制
• 每次都需要从服务器获取相关资源

PUT（幂等）

• 从客户端向服务器数据取代指定的文档内容
• 通常指定了资源的存放位置
• 修改数据内容，但是不增加数据种类，无论进行多少次PUT操作，资源不会增加
• 浏览器在发PUT请求前会先发OPTIONS请求进行预检，看服务端是否可以接受PUT请求，若可以就在响应头添加字段告诉浏览器可以继续发送PUT请求：response[“Access-Control-Allow-Methods”] = “PUT”
• POST主要作用在一个集合资源上，而PUT主要作用在一个具体资源上

DELETE（幂等）

• 删除服务器中URL标识的资源，DELETE是幂等的
• 多次操作不会产生多余的副作用
• （返回什么状态码由什么决定？？）

OPTIONS（幂等）

• 主要用途有两个：允许客户端查看服务器性能；获取服务器支持的HTTP请求方法（黑客经常使用的方法）
• 跨域之前发送嗅探请求，判断是否有对指定资源的访问权限

HEAD（幂等）

• 类似于get请求，不过返回的响应中没有具体内容，用于获取报头，HEAD请求响应可以被缓存
• 可以用来获取请求中隐含的元信息，而无需传输实体本身
• 检查资源、超链接的有效性；检查网页是否被串改；用于自动搜索机器人获取网页的标志信息、RSS种子信息，或者传递安全认证信息

TRACE

• 回显服务器收到的请求，主要用于测试或诊断

CONNECT

• HTTP/1.1协议中预留给可以将链接改成管道方式的代理服务器
• 通常用于SSL加密服务器的链接与非加密的HTTP代理服务器的通信

PATCH/MOVE/COPY/LINK/UNLINK

• 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个ajax异步请求
• 服务器向客户端发送验证请求代码401
• 符合http1.0或1.1规范的客户端收到401返回值时，将自动弹出一个登录窗口，要求用户输入信息，一般为用户名和密码（注意：此时第一步的请求状态为peding）
• 用户输入信息后，将信息以BASE64加密方式加密，并将密文放入前一条请求信息中，新增：Authorization: Basic XXXXX（浏览器默认加密）
• 服务器收到上述请求信息后，将Authorization字段后的用户信息取出、解密，将解密后的信息与数据库信息进行比较验证，如果正确，根据请求，返回对应的请求资源
• 弊端：加密方式简单，加密可逆，请求头中附带加密信息，安全性较差，一般用于内网

session-cookie

• 服务器在接受客户端首次访问时在服务器端创建seesion，然后保存seesion，为session生成一个唯一的标识字符串,然后在响应头中种下这个唯一标识字符串
• 签名。这一步只是对sid进行加密处理，服务端会根据这个密钥进行解密
• 浏览器中收到请求响应的时候会解析响应头，然后将sid保存在本地cookie中，浏览器在下次http请求的请求头中会带上该域名下的cookie信息
• 弊端：服务器在接受客户端请求时会去解析请求头cookie中的sid，然后根据这个sid去找服务器端保存的该客户端的session，然后判断该请求是否合法；不同客户端需要创建不同的seesion，session保存在服务器内存中，服务器内存消耗大；且基于cookie识别用户，易受到CSRF(跨站伪造攻击：攻击者通过伪造用户的浏览器的请求，向访问一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等)攻击；不同服务器之间存在session共享问题

Token

• 令牌，用户首次登陆后，服务器生成一个token返给客户端，客户端在之后的请求中带上token请求数据即可
• 流程：
  • 客户端使用用户名密码登录
  • 服务器收到请求，验证用户名与密码
  • 验证成功，服务器签发一个token给客户端
  • 客户端收到token后，存储起来，一般放在cookie或localstorage里
  • 客户端之后的请求需要携带签发的token
  • 服务器收到请求，验证token，验证成功，返回对应的请求数据，验证失败，返回401鉴权失败
• JWT（JSON Web Tokens）：
  • 服务器认证以后，生成一个 JSON 对象，发回给用户.之后用户与服务器通信的时候.服务器完全只靠这个对象认定用户身份
  • 为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名。
  • jwt最大的特点就是: 服务器不保存任何 session 数据，从而比较容易实现扩展
  • 数据结构：一个很长的字符串，中间用点（.）分隔成三个部分，即Header（头部）.Payload（负载）.Signature（签名）
    • Header: 一个 JSON 对象，描述 JWT 的元数据，例如:{ “alg”: “HS256”,”typ”: “JWT”}.alg属性表示签名的算法.默认是 HMAC SHA256（写成 HS256）；typ属性表示这个令牌（token）的类型（type），JWT 令牌统一写为JWT。
    • 头部的 JSON 对象使用 Base64URL 算法转成字符串
    • Payload: 部分也是一个 JSON 对象，用来存放实际需要传递的数据。这个 JSON 对象也要使用 Base64URL 算法转成字符串。（注意: JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。）
  • Signature: 部分是对前两部分的签名，防止数据篡改。 需要指定一个只有服务器知道的密钥（secret），再使用 Header 里面指定的签名算法（默认是 HMAC SHA256）进行处理
  • JWT一旦签发了,不再受服务端控制，在服务端没有记录，是无状态的，是它最大的优点也是最大的缺点
• 单点登录SSO：
  • 用户只需要登录一次就可以访问所有相互信任的应用系统
  • SSO一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源
• 不需要建立session会话，解决了session扩展性问题
• 弊端：token比session的sid大，消耗更多流量，相对需要挤占更多带宽；相对而言，token验证需要花费更多时间和性能，Token相比于session-cookie来说就是一个”时间换空间”的方案

OAuth（开放授权）

• 一种授权机制，开放标准：数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。
• 流程：
  • 第三方项用户请求授权
  • 返回用户凭证
  • 请求授权服务器授权
  • 授权服务器同意授权后，返回一个资源访问的凭证
  • 三方应用通过第四步的凭证向资源服务器请求相关资源
  • 资源服务器验证凭证通过后，将第三方应用请求的资源返回
• 1.0与2.0的区别
  • 授权方式不同，互不兼容
    • 1.0：
      • 客户端到授权服务器请求一个授权令牌
      • 引导用户到授权服务器请求授权
      • 用访问令牌到授权服务器换取访问令牌
      • 用访问令牌去访问得到授权的资源
    • 2.0
      • 用户到授权服务器，请求授权，然后返回授权码
      • 客户端由授权码到授权服务器换取访问令牌
      • 用访问令牌去访问得到授权的资源
  • 1.0协议每个token都有一个加密，2.0则不需要，但2.0要求使用https协议
  • 2.0充分考虑了客户端的各种子态，因而提供了多种途径获取访问令牌
    • 授权码：微信OAuth2.0
    • 简化模式：QQ第三方登录
    • 密码模式
    • 客户端模式

console.log

• 最基本最常用，可以用在javascript代码的任何地方，在浏览器的控制台查看打印信息
• console.log支持占位符形式的语法，在复杂输出时，保证模板和数据分离
  • | 字符串 | %s |
    | 整数 | %d或%i |
    | 浮点数 | %f |
    | 对象 | %o或%O |
    | CSS样式 | %c |
  • 打印样式可以用于显示图片，通过background-image方式引入
  • console.log还可以用于打印字符画,eg：https://www.zhihu.com/signin?next=%2F，可以使用字符画在线生成工具，将生成的字符粘贴到console.log()即可。在线工具：mg2txt （http://www.degraeve.com/img2txt.php）
  • console.log打印对象时，若为普通object对象，%o与%O无区别。如果为DOM节点，使用 %o 打印的是DOM节点的内容，包含其子节点。而%O打印的是该DOM节点的对象属性
  • 

console.warn

• 用于在控制台输出警告信息。它的用法和console.log是完全一样的，只是显示的样式不太一样，信息最前面加一个黄色三角，表示警告
• 

console.error

• 用于在控制台输出错误信息,它的用法和console.log/console.warn是一样的，只是显示的样式不一样
• 
• console.exception() 是 console.error() 的别名，功能相同。console.exception在大部分浏览器中不支持，目前Firefox支持
• console.error和console.warn还可以用于打印函数调用栈，console对象还提供了专门的方法来打印函数的调用栈（console.trace()）

console.info & console.debug

• console.info用来打印资讯类说明信息，和console.log()的用法一致
• console.debug用于打印调试信息

console.time和console.timeEnd

• 可以用于获取一段代码的执行时间
• 传递一个字符串参数，用于标记唯一的计时器，如果页面只有一个计时器，可不传。
• 没有timeEnd，计时器会一直存在

console.timeLog

• 与console.timeEnd类似，需要使用console.time启动计时器，传递一个字符串参数
• 不同点：console.timeLog打印计时器的当前时间，不清除计时器；console.timeEnd打印计时器当前时间，同时清除计时器

console.group & console.groupEnd

• 打印分组信息，以console.group开始，console.groupEnd结束

console.groupCollapsed

• 类似console.group，同样以console.groupEnd结束
• 默认打印的信息是折叠的

console.count

• 获取当前代码执行的次数
• 传递一个参数标记次数，非必传，默认为default

console.countReset

• 重置计数器，配合console.count使用，传递一个可选参数，参数与count的参数对应，若省略该参数，将重置默认default计数器为0

console.table

• 将数组数据以表格形式进行展示
• 传递两个参数，第一个为打印的对象，第二个为需要打印的表格标题，注意该方法本身第一列会打印序号
• 
• 注意：console.table只能处理最多1000行

console.clear

• 清除控制台信息

console.assert

• 用于语句断言，当断言为 false时，则在控制台输出错误信息
• 传递两个参数：第一个为条件语句，结果为Boolean值，为false时触发错误信息；第二个参数为触发的错误信息，为任意类型

console.trace

• 打印当前执行代码在堆栈中的调用路径

console.dir

• 以类似文件树的形式显示指定JavaScript对象的属性
• 传递一个对象参数，打印该对象的所有属性和属性值，不传时无打印值
• 大多数情况下与console.log的打印结果一样，打印元素结构时差异较大，console.log打印的是元素的DOM结构，console.dir打印元素属性
• 

console.dirxml

• 用于显示一个明确的XML/HTML元素的包括所有后代元素的交互树
• 如果无法作为一个element被显示，那么会以JavaScript对象的形式作为替代
• 对于XML和HTML元素调用console.log()和console.dirxml()是等价的
• 

console.memory

• console对象的一个属性，用来查看当前内存的使用情况
• jsHeapSizeLimit：JS堆栈内存大小限制
• totalJSHeapSize：可使用的内存
• usedJSHeapSize：JS对象（包括V8引擎内部对象）占用的内存，不得大于totalJSHeapSize，若大于，则可能内存泄漏

console.timeStamp&console.profile&console.profileEnd

• 非标准特性，尽量不要在生产环境使用
• console.timeStamp：向浏览器的 Performance 或者 Waterfall 工具添加一个标记。这样可以将代码中的一个点和其他在时间轴上已记录的事件相关联，例如布局事件和绘制事件等
• console.profile&console.profileEnd：开始记录性能描述信息，传递一个参数，用于记录对应的描述信息，并通过profileEnd清除对应信息

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅

• 优点：不存在浏览器兼容性。布局简单
• 缺点：不会随着屏幕大小而变化

流式布局（百分比布局）

随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整
常见的类型：

• 左侧固定+右侧自适应

• 左右固定宽度+中间自适应

• 优点：元素宽高按屏幕分辨率调整，布局不发生变化

• 缺点：屏幕尺度跨度过大的情况下，页面不能正常显示

弹性布局

使用css3新特性flex进行的布局

• 优点：简单、方便、快速
• 缺点：CSS3新特性,存在浏览器兼容性问题
• 

自适应布局

分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。 就是说你看到的页面，里面元素的位置会变化而大小不会变化

• 优点：对网站的复杂程度兼容性更大；对开发工程师来说制作的成本代价更低；代码执行效果更高效；测试时更加容易，运营相对更加精准
• 缺点：同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐

响应式布局

不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的，自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局；利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局

• 优点：适应pc端和移动端，如果有足够的耐心，页面效果会很完美
• 缺点：只能适应主流的宽高；如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大
• 

三列布局

• 左右两边宽度固定，中间宽度自适应；中间列的内容可以完整显示
  • 定位实现
    • 左右两列绝对定位并且固定宽度，中间元素自适应，且左右margin设置为左右元素的宽度
    • 缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)
  • 浮动实现
    • 左右进行浮动展示
    • 缺点：如果有文字出现，布局就会错乱，导致扩展性不好
• 圣杯布局&双飞翼布局
  • 随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变
  • 原理区别：
    • 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
    • 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置

数组是大家常用的数据结果，数组中我们常常需要对数组的元素进行去重和排序，以下是关于数组的去重排序的一些介绍。

去重

简单去重

• 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中。
• 

对象键值对去重

• 新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。
• 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样，例如n[1]、n[“1”]。解决上述问题还是得调用“indexOf”等方法进行判断。
• 

排序相邻去重

• 给传入数组排序，排序后相同值相邻，然后遍历时,新数组只加入不与前一值重复的值。
• 会打乱原来数组的顺序
• 

数组下标去重

• 如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉。否则存入结果数组。
• 

优化便利数组去重

• 获取没重复的最右一值放入新数组，检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断
• 

Set去重

• Set数据结构，它类似于数组，其成员的值都是唯一的。利用Array.from将Set结构转换成数组。
• 

splice操作原数组去重

• 双层循环，外层循环元素，内层循环时比较值，值相同时，则删去这个值。注意点:删除元素之后，需要将数组的长度也减1。
• 

注意：以上方法在比较是否存在相同值的时候，一般使用indexOf，可以实现类似逻辑的判断方法还有includes、hasOwnProperty。

排序

sort方法

• 默认排序顺序是根据字符串UniCode码，这个方法值只能排序第一位数 也可以字符串进行排序，传入比较函数进行比较
• 

reverse倒序方法

冒泡排序

• 每轮依次比较相邻两个数的大小，后面比前面小则交换。
• 

选择排序

• 通过比较首先选出最小的数放在第一个位置上，然后在其余的数中选出次小数放在第二个位置上,依此类推,直到所有的数成为有序序列。
• 

快速排序

• 先从数列中取出一个数作为基准，分区过程，将比这个数大的数全放到它的右边，小于或等于它的数全放到它的左边，再对左右区间重复第二步，直到各区间只有一个数。
• 

归并排序

• 将两个或两个以上的有序表组合成一个新的有序表。假如初始序列含有n个记录，则可看成是n个有序的子序列，每个子序列的长度为1，然后两两归并，得到[n/2]（向上取整）个长度为2或1的有序子序列；再两两归并，……，如此重复，直到得到一个长度为n的有序序列为止
• 速度仅次于快速排序，为稳定排序算法，一般用于总体无序，但是各子项相对有序的数列
• 

插入排序

• 构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。
• 

桶排序

• 假设输入数据服从均匀分布，将数据分到有限数量的桶里，每个桶再分别排序（有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序）
• 

Xpath 是一种用在 XML 文档中定位元素的语言，同样也支持 HTML 元素的解析。这篇文章主要是关于HTML部分的内容，从这个名字可以看出来，Xpath是关于路径的，Xpath是通过路径查找元素。

HTML中的Xpath

HTML是一种树形结构，HTML 是根节点，所有的其他元素节点都是从根节点发出的。其他的元素都是这棵树上的节点Node，每个节点还可能有属性和文本。
而路径就是指某个节点到另一个节点的路线。

我们一般的路径可以分为绝对路径和相对路径。Xpath中的绝对路径从 HTML 根节点开始算，相对路径从任意节点开始。
在浏览器中，我们可以直接复制需要节点的Xpath数据。

chrome浏览器中复制的相对路径会从举例最近的有id的元素开始找。

从上面这个路径我们可以看到，虽然能根据这个路径找到对应的目标元素，但是这里面有div[1]这种结构，即父节点下面的第一个div，这种路径并不是很可靠。所以，需要我们自己根据需要自定义Xpath数据。

绝对路径

绝对路径是从根节点/html开始往下，一层层的表示出来直到需要的节点为止，使用起来较为麻烦。这里就不多做介绍了，我们主要来看一下相对路径。

相对路径

Xpath 中更常用的方式是相对路径定位方法，以“//”开头。相对路径可以从任意节点开始，不过一般会选取一个可以唯一定位到的元素作为起始节点，可以增加查找的准确性。

定位语法

| 表达式 | 说明 | 举例 |
| / | 从根节点开始选取 | /html/div/span |
| // | 从任意节点开始选取 | //input |
| . | 选取当前节点 | |
| .. | 选取当前节点的父节点 | //input/.. 会选取 input 的父节点 |
| @ | 选取属性，或者根据属性选取 | //input[@data] 选取具备 data 属性的 input 元素 //@data 选取所有 data 属性 |
| * | 通配符，表示任意节点或任意属性 | |

常见的定位方法

元素属性定位

属性定位是通过 @ 符号指定需要使用的属性。

根据元素是否具备某个属性查找元素

根据属性是否等于某值查找元素

svg和path标签无法进行查找

注意，属性值必须要加引号，单双引号都可以。

层级属性结合定位

遇到某些元素无法精确定位的时候，可以查找其父级及其祖先节点，找到有确定的祖先节点后通过层级依次向下定位。
使用星号找不特定的元素；使用..找父级节点；使用//找某一类型的节点等等。

使用谓语定位

谓语是 Xpath 中用于描述元素位置。主要有数字下标、最后一个子元素last()、元素下标函数position()，还可以通过position()的比较大小查找某个范围的元素。

使用逻辑运算符

如果元素的某个属性无法精确定位到这个元素，我们还可以用逻辑运算符 and、or、| 进行运算定位。

注意：|是同时查找多个路径的。

使用文本定位

使用文本定位，是 Xpath 中的一大特色。可以通过 text()、string()方法获取元素节点的文本内容。
注意：text()和string()的区别在于text()只能获取当前节点的文本内容，string()可以获取当前节点内部所有元素节点的文本内容。

注意：使用string()查找的时候，在满足文本要求的前提下，查找的元素会把尽可能多的满足要求的节点都列出来，所以，如果需要查找具体的节点，要保证条件限制尽可能严格一点。

使用部分匹配函数

Xpath 中有提供了几个函数，用来进行部分匹配。

| 函数 | 说明 | 举例 |
| contains | 选取属性或者文本包含某些字符 | //div[contains(@id, ‘data’)] 选取 id 属性包含 data 的 div 元素，//div[contains(string(), ‘支付宝’)] 选取内部文本包含“支付宝”的 div 元素 |
| starts-with | 选取属性或者文本以某些字符开头 | //div[starts-with(@id, ‘data’)] 选取 id 属性以 data 开头的 div 元素，//div[starts-with(string(), ‘银联’)] 选取内部文本以“银联”开头的 div 元素 |
| ends-with | 选取属性或者文本以某些字符开头 | //div[ends-with(@id, ‘require’)] 选取 id 属性以 require 结尾的 div 元素，//div[ends-with(string(), ‘支付’)] 选取内部文本以“支付”结尾的 div 元素 |

注意
兼容性和替代方案
需要注意的是，ends-with函数是XPath 2.0的语法，而一些浏览器可能只支持XPath 1.0。如果你在使用XPath 1.0的环境中遇到问题，可以使用以下替代方案：
//input[substring(@id, string-length(@id) - string-length(‘123’) + 1) = ‘123’]

验证 Xpath

验证 xpath 有两种方法：

• 在开发者工具的 Elements 中按Ctrl + F，在搜索框中输入 Xpath
• 在开发者工具的 Console 中使用 $x()
  

Xpath用处

• 在网络爬虫中，XPath是一个非常强大的工具，可以帮助我们精确定位和提取需要的数据。
• 在Web自动化测试中，XPath用于定位页面元素，执行点击、输入等操作，常用于Selenium等自动化测试框架中‌。

前言

大家应该都看过下面这种一个小窗悬浮在页面上的效果，这种效果叫做画中画。画中画（Picture-in-Picture，PiP）是一种现代浏览器支持的功能，允许用户将视频或其他媒体元素从网页中分离出来，以一个小窗口的形式浮动在屏幕的任意位置。比较常见的就是视频网站，一个小窗口悬浮在页面最上层，用户可以在浏览其他内容的同时继续观看视频，极大地提升了多任务处理的便利性。本文将重点介绍视频画中画的实现方法。

画中画原理

画中画的实现原理基于浏览器的 Picture-in-Picture API，主要包括以下几个步骤：

媒体元素分离：

• 浏览器将指定的 <video> 元素从 DOM 中分离出来，渲染到一个独立的浮动窗口中。
• 这个浮动窗口可以放置在屏幕的任意位置，且始终在最上层显示。

独立控制：

• 画中画窗口中的视频可以独立控制（播放、暂停、音量调节等）。
• 即使原网页被最小化或切换到其他标签页，画中画窗口仍然可以继续播放。

事件监听：

• 通过 JavaScript 监听画中画的状态变化（如进入画中画、退出画中画等），以便进行相应的逻辑处理。

画中画有两种方法：

• video使用的requestPictureInPicture
• document的documentPictureInPicture
  本文主要是介绍video使用的requestPictureInPicture。

视频画中画的核心介绍

视频画中画是画中画功能的主要应用场景，其核心依赖于以下 API：

requestPictureInPicture()

• 用于将 <video> 元素切换到画中画模式。
• 示例：

  1 2	const video = document.querySelector('video'); video.requestPictureInPicture();

exitPictureInPicture()

• 用于退出画中画模式。
• 示例：

  1	document.exitPictureInPicture();

pictureInPictureEnabled

• 用于检测当前浏览器是否支持画中画功能。
• 示例：

  1 2 3

  if (document.pictureInPictureEnabled) { console.log('画中画功能支持'); }

pictureInPictureElement

• 用于获取当前处于画中画模式的元素。
• 示例：

  1 2 3 4

  const pipElement = document.pictureInPictureElement; if (pipElement) { console.log('当前画中画元素：', pipElement); }

enterpictureinpicture、leavepictureinpicture

• 用于监听进入和退出画中画模式的事件。
• 示例：

  1 2 3 4 5 6 7

  video.addEventListener('enterpictureinpicture', () => { console.log('进入画中画模式'); }); video.addEventListener('leavepictureinpicture', () => { console.log('退出画中画模式'); });

视频画中画的简单实现

以下是一个简单的视频画中画实现示例：

HTML

1
2

<video controls src="your-video-url.mp4"></video>
<button id="pip-button">开启画中画</button>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const video = document.querySelector('video');
const pipButton = document.getElementById('pip-button');

// 检测浏览器是否支持画中画
if (!document.pictureInPictureEnabled) {
  pipButton.disabled = true;
  console.log('当前浏览器不支持画中画功能');
}

// 点击按钮开启画中画
pipButton.addEventListener('click', async () => {
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error('画中画操作失败：', error);
  }
});

// 监听进入画中画事件
video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = '退出画中画';
});

// 监听退出画中画事件
video.addEventListener('leavepictureinpicture', () => {
  pipButton.textContent = '开启画中画';
});

画中画的适用场景介绍

画中画功能在以下场景中非常实用：

视频播放器

• 用户可以在浏览其他内容的同时继续观看视频。

在线会议

• 将会议视频以小窗口形式浮动，方便用户多任务操作。

教育平台

• 学生可以在观看课程视频的同时做笔记或查阅资料。

直播平台

• 用户可以在观看直播的同时浏览其他网页。

画中画使用的注意事项

浏览器兼容性

• 画中画功能在现代浏览器中支持较好，但在某些浏览器（如 Safari）中可能存在限制。
• 可以通过 document.pictureInPictureEnabled 检测浏览器是否支持。

用户交互

• 画中画功能必须由用户主动触发（如点击按钮），不能通过脚本自动开启。

安全性

• 画中画窗口不会显示原网页的其他内容，确保用户隐私安全。

性能优化

• 如果视频分辨率较高，画中画窗口可能会占用较多系统资源，需注意性能优化。

总结

画中画功能为用户提供了极大的便利，尤其是在多任务处理场景中。通过浏览器的 Picture-in-Picture API，开发者可以轻松实现视频画中画效果。本文详细介绍了视频画中画的原理、核心 API、实现方法、适用场景及注意事项，希望能为开发者提供实用的参考。

此外，DocumentPictureInPicture 是画中画功能的扩展，允许将整个文档或部分 DOM 元素放入画中画窗口，但目前仍处于实验阶段，兼容性和实用性有限，建议在实际项目中谨慎使用。

弹幕，作为一种极具互动性的视觉表达方式，已经成为视频平台（如 Bilibili、爱奇艺、腾讯视频等）的标配。它不仅提升了用户参与感，也在一定程度上丰富了视频内容的表达维度。
下面我们将介绍弹幕的基本实现原理并结合 Bilibili 的弹幕思路，构建一个可用的弹幕系统。

弹幕的本质与核心原理

弹幕的本质，是在播放视频过程中，将用户生成的文本内容（弹幕）实时渲染在视频层上方，进一步包括横向滚动、同步展示、支持样式自定义与交互控制等。

核心要素包括：

1. 轨道控制：防止多条弹幕重叠
2. 动画渲染：实现从右至左（或其他方向）的移动
3. 消息管理：弹幕的接收、发送、缓存和删除
4. 播放同步：弹幕与视频时间对齐
5. 交互功能：弹幕开关、颜色、过滤、密度等设置

下面我们先从一个简单的实现入手

纯前端的基础弹幕实现

基本功能

• 文字从右侧飘入左侧
• 随机轨道显示
• 动画结束后自动销毁

HTML 结构

1
2
3
4

<div class="video-container">
  <video id="video" src="sample.mp4" controls></video>
  <div class="danmu-layer"></div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.video-container {
  position: relative;
  width: 640px;
  height: 360px;
}

.danmu-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  color: white;
  animation: move linear;
}

@keyframes move {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

JavaScript 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function createDanmaku(text) {
  const layer = document.querySelector('.danmaku-layer');
  const el = document.createElement('div');
  el.className = 'danmaku-item';
  el.textContent = text;

  // 轨道计算
  const trackHeight = 30;
  const trackCount = Math.floor(layer.clientHeight / trackHeight);
  const track = Math.floor(Math.random() * trackCount);
  el.style.top = `${track * trackHeight}px`;

  // 动画持续时间
  const duration = 8 + Math.random() * 2;
  el.style.animationDuration = `${duration}s`;

  layer.appendChild(el);

  el.addEventListener('animationend', () => el.remove());
}

// 示例：每秒生成一条弹幕
setInterval(() => {
  createDanmaku('Hello 弹幕~');
}, 1000);

渲染方式选择：DOM vs Canvas vs WebGL

构建一个高级弹幕系统（模拟 Bilibili 实现）

目标增强功能

• 与视频时间同步（非实时发送也能同步）
• 使用 Canvas 提升性能
• 支持发送自定义颜色弹幕
• 弹幕开关
• WebSocket 实时接收弹幕
• 使用本地视频进行绑定展示

HTML 结构（支持输入和控制）

• 视频与弹幕分层渲染，避免 DOM 操作影响性能
• Canvas 尺寸需与视频保持比例协调
• 控制面板集成色彩选择等实用功能

1
2
3
4
5
6
7
8
9
10

<video id="video" src="./video.mp4" width="800" controls></video>
<canvas id="danmaku-canvas" width="800" height="400"></canvas>

<div class="controls">
  <input type="text" id="danmakuText" placeholder="输入弹幕" />
  <input type="color" id="colorPicker" />
  <button onclick="sendUserDanmaku()">发送</button>
  <button onclick="toggleDanmaku()">开/关弹幕</button>
</div>

Canvas 渲染弹幕核心逻辑

• 基于 RAF 的动画循环保证流畅性
• 速度随机化（2-3.5px/帧）实现自然运动差异
• measureText 精确计算文本宽度实现内存回收

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  const canvas = document.getElementById('danmaku-canvas'); const ctx = canvas.getContext('2d'); const video = document.getElementById('video'); let danmakus = []; // 所有弹幕 let showDanmaku = true; // 渲染帧 function render() { if (!showDanmaku) return requestAnimationFrame(render); ctx.clearRect(0, 0, canvas.width, canvas.height); const currentTime = video.currentTime; danmakus.forEach(dm => { if (dm.time <= currentTime) { dm.x -= dm.speed; ctx.font = `${dm.fontSize}px sans-serif`; ctx.fillStyle = dm.color; ctx.fillText(dm.text, dm.x, dm.y); } }); danmakus = danmakus.filter(dm => dm.x > -ctx.measureText(dm.text).width); requestAnimationFrame(render); } requestAnimationFrame(render);

弹幕数据结构和生成方法

• 时间戳绑定实现「时移播放」场景支持
• Y 轴随机分布简化轨道管理逻辑
• 速度随机化提升视觉效果

  1 2 3 4 5 6 7 8 9 10 11

  function createDanmaku(text, color, time) { return { text, color, time, x: canvas.width, y: Math.random() * canvas.height, speed: 2 + Math.random() * 1.5, fontSize: 20, }; }

用户发送弹幕

1
2
3
4
5
6
7
8
9
10
11

function sendUserDanmaku() {
  const text = document.getElementById('danmakuText').value;
  const color = document.getElementById('colorPicker').value;
  const time = video.currentTime;

  const dm = createDanmaku(text, color, time);
  danmakus.push(dm);

  // 同时发送到服务器（WebSocket）
  ws.send(JSON.stringify(dm));
}

WebSocket 实时收发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
  console.log('连接服务器');
  ws.send(JSON.stringify({ type: 'getHistory' }));
};

ws.onmessage = (e) => {
  const data = JSON.parse(e.data);

  if (data.type === 'history') {
    danmakus.push(...data.danmakus); // 加载历史
  } else {
    danmakus.push(createDanmaku(data.text, data.color, data.time));
  }
};

开关弹幕

1
2
3

function toggleDanmaku() {
  showDanmaku = !showDanmaku;
}

服务器建议（Node.js 示例）

使用简单的 WebSocket server 可实现广播：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
const clients = new Set();
const danmakuHistory = []; // 所有弹幕存储
wss.on('connection', (ws) => {
  clients.add(ws);

  ws.on('message', (msg) => {
    const data = JSON.parse(msg);

    if (data.type === 'getHistory') {
      // 将所有历史弹幕发送给客户端
      ws.send(
        JSON.stringify({
          type: 'history',
          danmakus: danmakuHistory,
        })
      );
      return;
    }

    // 正常弹幕处理
    danmakuHistory.push(data);
    for (const client of clients) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(data));
      }
    }
  });

  ws.on('close', () => clients.delete(ws));
});

以上只是简单实现了弹幕的效果，还有一些优化点没有处理，比如：

• 添加防碰撞算法（轨道优先级管理）
• 实现弹幕类型多样化
  • 不同位置的滚动
  • 不同方向的滚动等等
• 增加弹幕密度控制
• 添加历史弹幕加载功能
• 实现字体描边等不同的样式特效或动画特效

结尾

弹幕系统的实现，不仅仅是文字飘动那么简单。它融合了动画、轨道管理、实时通信、数据同步、性能优化等多个技术点，是前端开发中非常有趣的一项综合性挑战。

相信大家应该都很熟悉 Chrome DevTools了，我们平时在开发中经常会用Devtools提供的丰富的功能和工具，帮助我们诊断和调试网页应用程序。本文将分享一些 Chrome DevTools 的调试技巧，在开发中提高效率。

模拟接口响应和网页内容

通过本地覆盖可以模拟接口返回值和响应头，无需 mock 数据工具，无需等待后端支持，快速复现在一些数据下的 BUG 等。在 DevTools 可以直接修改你想要的 Fetch/XHR 接口数据，还可以修改响应头，解决跨域等问题，不仅可以覆盖 Fetch/XHR，JS、CSS 等资源也可以。

下面是在 Network 面板快速模拟远程资源的内容和响应头的步骤：

设置本地覆盖步骤：

• 打开 DevTools，导航至 Network 网络面板，右键单击要覆盖的请求，从下拉菜单中选择 Override content 或 Open in Sources panel。
• 如果是首次使用，未设置过本地覆盖文件目录，DevTools 会在顶部的操作栏中提示您选择一个文件夹来存储覆盖文件，并 “允许” 授予 DevTools 对其的访问权限（在 window 下选择了系统盘的文件夹测试发现用不了，可能是权限问题，建议选个非系统盘的文件夹）。
• 在 Sources 面板中修改数据，完成后按 Ctrl + S 保存，刷新页面，即可看见修改后的数据（被覆盖的资源在图标右下角会有个紫色的圆点）。
• 若要恢复使用服务上的数据，请导航到 Sources > Overrides，可以点击取消 “Enable local overrides” 复选框，或者点击旁边的 Clear 图标，或者如上图演示中的单个删除。

注意：在Source面板中修改的数据一定要保存

它是怎么工作的？
当你在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到您指定的文件夹中。
当你重新加载页面时，DevTools 会提供本地修改后的文件，而不是网络资源。所以在旧版本支持 Override 的版本中，也可以手动创建一个文件来覆盖内容。

快速重发请求

在联调接口或者排查 BUG 的时候，经常需要重新再发一次请求，如果要重新操作一次复杂的交互、重新输入一大堆参数时，这种方式会显得比较麻烦。
这时候就可以通过 Replay XHR 来快速重发请求

操作步骤：

• 导航至 Network 网络面板，右击一个 XHR 请求，可以点击 Fetch/XHR 过滤。
• 点击 Replay XHR。

在 Console 中发请求

针对上面同样的场景，有时候我们需要修改请求头、入参再重新发起请求，那么 Replay XHR 就不支持了。
可以通过 Copy as fetch ，在控制台修改请求参数，发起请求

操作步骤：

• 导航至 Network 网络面板，右击一个 XHR 请求，可以点击 Fetch/XHR 过滤。
• 点击 Copy -> Copy as fetch。
• 导航至 Console 面板，Ctrl + v 粘贴。
• 修改内容，如接口 url、header、body， 然后按回车键即可发起请求。

Console 中的 $符号

$0-$4
当要在 Console 中在调试页面元素时，比如要获取元素的信息，此时就可以使用 4。
$0：当前选择的元素 ，**$1：上一次的引用，$2：**上上次的引用，一直到 $4

操作步骤：

• 点击菜单栏第一个选择图标，或者使用快捷键 Ctrl + Shift + C 选择元素。
• 导航至 Console 面板，现在就可以使用 4，例如选择了两次，第一次选择的元素可以使用 1 访问，第二次选择的元素使用 0 访问。

$ 和 $$

1
2

$(‘xxx’) 相当于 document.querySelector(‘xxx’)  
$$(‘xxx’) 相当于 Array.form(document.querySelectorall(‘xxx’))

$_
调试的过程中，经常需要打印一些变量值，但是如果想查看上一次执行的结果，使用 $_ 是对上次执行结果的引用。

Element 面板

隐藏 DOM Element
有时候我们想截图，但是想要隐藏图中的敏感信息，此时就可以隐藏元素或者直接删除对应的元素
一键展开所有 DOM
在调式 DOM Element 的时候，如果 DOM 层次比较深的情况下，一个个去展开就比较麻烦，我们可以使用快捷键 Alt + Click 一键展开该层下的所有 DOM

拖拽移动 DOM Element
当我们想看页面某一部分元素在不同的位置显示效果的时候，可以直接拖拽 DOM 元素调整位置，也可以使用键盘快捷键 Ctrl + 上下箭头。

截图

如果想要截取多屏很长的整个页面内容，系统自带的截图软件显然不支持，此时可以使用 command 命令截图

操作步骤：

• 按 Ctrl + Shift + P 调出 command 命令
• 输入命令 capture full size screenshot 后回车。

截图 command：

• 截框选区域：capture area screenshot
• 截滚动全屏：capture full size screenshot
• 截选中的节点：capture node screenshot
• 截当前窗口内：capture screenshot
  还有很多其他的命令，如切换主题 Switch to Dark theme，查看所有快捷键 Show shortcuts 等等。

总结

本文介绍了 Chrome DevTools 的调试技巧和最新版本 Chrome 117 中的新功能，包括模拟接口响应和网页内容、快速重发请求、在 Console 中发请求、Console 中的快捷命令、条件断点、Element 面板以及截图命令，这些调试技巧有助于我们在开发中提高效率。