Web Locks API 详解：浏览器多标签页资源协调方案

什么是 Web Locks API

Web Locks API 是现代浏览器提供的一种资源协调机制，它允许运行在不同浏览器标签页或 Web Worker 中的脚本异步获取锁、执行任务然后释放锁。当某个脚本持有锁时，同源下的其他脚本无法获取相同的锁，这使得分布式运行的前端应用能够有效协调资源使用。

核心应用场景

Web Locks API 特别适合解决以下问题：

1. 多标签页数据同步：防止多个标签页同时向服务器请求相同数据
2. IndexedDB 操作协调：避免多个实例同时修改数据库导致冲突
3. 领导选举模式：在多个实例中选择一个主实例执行特定任务
4. 读写锁控制：实现读者-写者模式，允许多个读取或单个写入

基本使用方式

使用 Web Locks API 的基本流程分为三步：

// 1. 请求获取锁
navigator.locks.request('resource_lock', async (lock) => {
  // 2. 获取锁后执行任务
  await performTask();
  
  // 3. 任务完成后自动释放锁
});

这种模式利用了 JavaScript 的异步特性，当异步函数执行完毕后，锁会自动释放。

高级功能详解

1. 锁模式选择

Web Locks API 支持两种锁模式：

• 独占锁(exclusive)：默认模式，同一时间只能有一个持有者
• 共享锁(shared)：允许多个持有者同时获取，适合读多写少场景

// 独占锁示例
navigator.locks.request('exclusive_lock', { mode: 'exclusive' }, async (lock) => {
  // 写入操作
});

// 共享锁示例
navigator.locks.request('shared_lock', { mode: 'shared' }, async (lock) => {
  // 读取操作
});

2. 条件获取选项

API 提供了灵活的锁获取策略：

// 仅当锁立即可用时才获取
navigator.locks.request('lock', { ifAvailable: true }, async (lock) => {
  if (!lock) {
    console.log('锁不可用，不等待');
    return;
  }
  // 执行任务
});

// 强制获取锁(抢占模式)
navigator.locks.request('lock', { steal: true }, async (lock) => {
  // 将释放当前持有者的锁并获取
});

// 带超时的锁请求
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 5秒超时
navigator.locks.request('lock', { signal: controller.signal }, async (lock) => {
  // 执行任务
}).catch(e => {
  if (e.name === 'AbortError') {
    console.log('请求超时');
  }
});

3. 锁状态查询

开发者可以查询当前源的锁状态：

const state = await navigator.locks.query();
console.log('持有的锁:', state.held);
console.log('等待中的锁请求:', state.pending);

这对于调试复杂的锁竞争情况非常有用。

实际开发建议

1. 锁命名规范：使用有意义的资源名称，避免冲突
2. 避免死锁：确保锁的获取顺序一致，或设置超时
3. 最小化锁范围：只在必要时持有锁，尽快释放
4. 错误处理：妥善处理锁获取失败的情况
5. 性能考量：避免在锁内执行耗时操作

浏览器兼容性

Web Locks API 目前已被大多数现代浏览器支持，包括 Chrome、Edge、Firefox 和 Safari。对于不支持的环境，开发者需要考虑使用替代方案如：

• 使用 IndexedDB 的事务机制
• 实现基于服务器的锁协调
• 使用 Web Worker 集中管理资源访问

总结

Web Locks API 为前端开发者提供了一种标准的资源协调机制，特别适合需要处理多标签页协同的复杂应用场景。通过合理使用各种锁模式和获取策略，开发者可以构建出更健壮的分布式前端应用。