数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载SharedWorker RxStorage 是 RxDB 的 Premium 插件 之一它基于浏览器的 SharedWorker API 运行在一个独立的 JavaScript 进程中。与普通 WebWorker RxStorage 不同SharedWorker 在打开多个浏览器标签页时也只会创建一次从而可以在存储层之上做大量性能优化——因为存储本身不再需要处理多个并发的数据库连接。阅读本文后你将掌握 SharedWorker RxStorage 的完整接入方式、参数含义、预构建 worker 的使用方法以及如何在 worker 内部高效运行复制replication。为什么选择 SharedWorker与 WebWorker 的核心差异在浏览器中RxDB 的数据存储层RxStorage默认运行在主线程上复杂的读写与查询会与 UI 渲染争抢 CPU。Worker 系列插件的思路是把存储放进独立进程把 CPU 负载从主线程移走。二者的差异在于WebWorker每个标签页各自创建一个 worker 进程每个标签页各自持有一个 IndexedDB 连接数据变更需要通过事件在标签页间传播SharedWorker同一 origin 下的所有标签页共享唯一一个worker 实例数据库只维持一份存储实例。从 RxStorage 总览 的定位看SharedWorker RxStorage 是一个包装器wrapper它本身不存数据而是把任何实现了 RxStorage 接口的底层存储如 IndexedDB包进 worker 进程。因为所有标签页共享同一进程数据库实例可以被去重多个标签页之间也不再需要为每个连接复制一份完整的存储状态。这一设计在源码层面有直接印证exposeRxStorageRemote在远端维护了一个instanceByFullName映射以databaseName|collectionName|schemaVersion为键多个端口Port连接同一存储实例时会复用同一个RxStorageInstance并把各自的connectionId记录在connectionIds集合中见 src/plugins/storage-remote/remote.ts。注释中明确写道这在很多环境下都有意义比如 Electron 的主进程为多个渲染进程保存存储SharedWorker 也是如此。 只有最后一个端口关闭时connectionIds.size 1底层实例才会真正被 closeremote.ts。快速上手两端配置SharedWorker RxStorage 的使用分两部分worker 进程端暴露存储和主进程端消费存储。在 SharedWorker 进程中暴露存储worker 进程的 JavaScript 文件里用exposeWorkerRxStorage()把任意 RxStorage 实现包装起来// shared-worker.ts import { exposeWorkerRxStorage } from rxdb-premium/plugins/storage-worker; import { getRxStorageIndexedDB } from rxdb-premium/plugins/storage-indexeddb; exposeWorkerRxStorage({ /** * 你可以把任何 RxStorage 接口的实现包装进 worker。 * 这里我们使用 IndexedDB RxStorage。 */ storage: getRxStorageIndexedDB() });exposeWorkerRxStorage会检测自己运行在普通 Worker 还是 SharedWorker 环境中并自动暴露正确的消息端点messaging endpoints——这也是为什么任何合法的worker.js文件既能用于普通 Worker也能用于 SharedWorker。在主进程中创建数据库主线程侧通过getRxStorageSharedWorker()创建数据库它接收一个包含workerInput与可选workerOptions的对象import { createRxDatabase } from rxdb; import { getRxStorageSharedWorker } from rxdb-premium/plugins/storage-worker; import { getRxStorageIndexedDB } from rxdb/plugins/storage-indexeddb; const database await createRxDatabase({ name: mydatabase, storage: getRxStorageSharedWorker( { /** * 任何可以作为 SharedWorker 构造器thread.js参数的值。 * 大多数情况下这里放 shared-worker.js 文件的路径。 */ workerInput: path/to/shared-worker.js, /** * 可选worker 的选项。 */ workerOptions: { type: module, credentials: omit, extendedLifetime: true } } ) });注意主进程侧的getRxStorageSharedWorker来自rxdb-premium/plugins/storage-worker与普通 Worker 插件同一模块而示例中getRxStorageIndexedDB的导入路径来自rxdb/plugins/storage-indexeddb请以你实际安装的包与版本为准。workerInput 与 workerOptions 参数说明workerInput必填。任何能传给 SharedWorker 构造器的值thread.js 兼容。最常见的就是shared-worker.js的 URL 路径也可以传入一个返回SharedWorker实例的函数见下文传入 SharedWorker 实例。workerOptions可选透传给 worker 的选项对象typemodule表示以 ES Module 方式加载 worker 文件也可以设为classiccredentials加载 worker 模块时的凭据模式omit表示不发送凭据也可设为same-origin或includeextendedLifetimeSharedWorker 专属选项。开启后 worker 不会因为所有标签页关闭而立即销毁从而在下一次访问时避免重新初始化的开销。该选项的支持在 17.0.0 发布说明 中作为新增能力被记录ADD使用 SharedWorker 时支持extendedLifetime。使用预构建的 workershared-worker.js必须是一个自包含的 JavaScript 文件——所有依赖都要打进同一个 bundle 里。为了省去打包的麻烦RxDB 直接提供了开箱即用的预构建 worker 文件安装 RxDB Premium 插件在node_modules/rxdb-premium/dist/workers目录下找到预构建文件把它们复制到 Web 服务器可以静态托管的路径下在创建RxDatabase时传入该路径import { createRxDatabase } from rxdb; import { getRxStorageSharedWorker } from rxdb-premium/plugins/storage-worker; const database await createRxDatabase({ name: mydatabase, storage: getRxStorageSharedWorker( { /** * 从 node_modules/rxdb-premium/dist/workers 复制出的文件 * 在 Web 服务器上可被访问到的路径。 */ workerInput: /indexeddb.shared-worker.js } ) });任何合法的worker.js文件都可以同时用于普通 Worker 和 SharedWorker因为exposeWorkerRxStorage会自动适配运行环境。因此在预构建产物中同一个文件既可作为workerInput传给getRxStorageWorker也可传给getRxStorageSharedWorker。构建自定义 worker如果要构建自己的worker.js推荐使用 webpack 打包配置可参考 Worker RxStorage 文档 中Building a custom worker一节给出的、与官方预构建 worker 相同的 webpack 配置。核心要点如下完整配置见 docs-src/docs/rx-storage-worker.mdtarget: webworker确保产物面向 worker 环境entry 指向你的 worker 入口文件如my-custom-worker.ts内部调用exposeWorkerRxStorage({ storage: getRxStorageIndexedDB() })通过 babel-loader 处理 TypeScript/TSXresolve.extensions覆盖.tsx/.ts/.js/.mjs/.mtsmode: production并用 TerserPlugin 压缩、去除注释生成自包含的 bundle。传入 SharedWorker 实例除了直接给 URLworkerInput也可以是一个返回新SharedWorker实例的函数。这在你有自定义 worker 文件、并希望通过构建工具动态导入时最常用用法与 Worker Storage 的 workerInput 完全一致const storage getRxStorageSharedWorker({ workerInput: () new SharedWorker( new URL(./my-custom.shared-worker, import.meta.url) ) });例如在 Angular 等由打包器处理 worker 构建的环境中可以单独维护一个my-custom.worker.ts内含exposeWorkerRxStorage再用new URL(..., import.meta.url)动态导入打包器会自动产出对应的 worker 产物。设置 multiInstance: false当你能确定 RxDatabase只在 SharedWorker 内部创建时可以考虑设置multiInstance: false从而避免跨 JavaScript realm主线程与 worker 之间发送变更事件进一步提升性能。注意如果你在另一个 realm 也创建了同一个存储例如同一个 RxDatabase 既在 SharedWorker 内、又在主线程上各创建了一份就不要设置multiInstance: false。在 SharedWorker 中运行复制Replication使用 SharedWorker RxStorage 时官方推荐把复制replication放在 worker 内部运行这是性能最优的做法。具体方式是在 worker 里再打开一个 RxDatabase 并启动复制// shared-worker.ts import { exposeWorkerRxStorage } from rxdb-premium/plugins/storage-worker; import { getRxStorageIndexedDB } from rxdb-premium/plugins/storage-indexeddb; import { createRxDatabase, addRxPlugin } from rxdb; import { RxDBReplicationGraphQLPlugin } from rxdb/plugins/replication-graphql; addRxPlugin(RxDBReplicationGraphQLPlugin); const baseStorage getRxStorageIndexedDB(); // 先把 RxStorage 暴露给外部主线程 exposeWorkerRxStorage({ storage: baseStorage }); /** * 然后在 worker 内部创建常规的 RxDatabase 和 RxCollections * 并在此启动复制。 */ const database await createRxDatabase({ name: mydatabase, storage: baseStorage }); await database.addCollections({ humans: {/* ... */} }); const replicationState database.humans.syncGraphQL({/* ... */});这样网络 I/O、协议解析等复制负担都发生在 worker 进程主线程只接收复制结果产生的变更事件UI 完全不被阻塞。如果你不关心性能也可以在主线程启动复制但绝不能在主线程和 worker 里同时运行复制否则会产生重复的双向同步与冲突。限制SharedWorker API 在部分移动浏览器中不可用可参考 caniuse 的 sharedworkers 兼容性数据。在决定使用该插件前请先确认目标浏览器环境对 SharedWorker 的支持情况。常见问题可以把 SharedWorker RxStorage 用在 Service Worker 上吗不能。Service Worker 与 Shared Worker 不是一回事你可以在 ServiceWorker 内部使用 RxDB但不能把 ServiceWorker 当作一个被外部 RxDatabase 实例访问的 RxStorage。SharedWorker 是如何帮助多个标签页同步状态的SharedWorkerAPI 会为同一 origin 下的所有标签页生成恰好一个共享的隔离后台线程。当 RxDB 挂载到这个 Shared Worker 上后就不再需要每个标签页各自维护冗余的 IndexedDB 连接和昂贵的 JSON 序列化——只有后台 worker 执行资源密集的 CRUD 操作再把极轻量的结果差分differentials同时广播给所有被动监听的 UI 标签页。这正是 SharedWorker 相比普通 WebWorker 在多标签页场景下性能更好的根本原因也解释了为什么浏览器端官方推荐优先使用 SharedWorker 而非 WebWorker见 Worker RxStorage 文档 开头的说明。赞分享数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载相关推荐RxDB 领导者选举Leader Election实战指南让浏览器多标签页只保留一个数据连接RxDB 领导者选举Leader Election实战指南让浏览器多标签页只保留一个数据连接 本文围绕 RxDB 的 leader election 插件数据库NoSQL嵌入式数据库实时数据库go-json实战从零构建高性能JSON API的完整教程go json实战从零构建高性能JSON API的完整教程 在Go语言开发中JSON处理性能往往是API服务的关键瓶颈。 go json 作为一款兼容 enAI工程师的认知地图从基础模型到生产级应用的完整路径AI工程师的认知地图从基础模型到生产级应用的完整路径 在AI技术快速迭代的今天将基础模型转化为可靠的生产级应用已成为每个AI工程师必须掌握的核心能力。《AI人工智能大模型文档上一篇3分钟上手JWT认证tymon/jwt-auth从安装到实战全攻略下一篇tsParticles Interactivity 交互配置详解detectsOn、events 与 modes 的完整用法与源码原理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考