@libshub/gif-tools 1.0.8 → 1.0.9

package/README.md

@@ -1,6 +1,6 @@
 # @libshub/gif-tools
 
-基于 Canvas 的 React GIF 播放组件，使用 [gifuct-js](https://github.com/matt-way/gifuct-js) 解码，支持播放控制、循环次数、资源缓存与加载性能统计。
+基于 Canvas 的 React GIF 播放组件，使用 [gifuct-js](https://github.com/matt-way/gifuct-js) 解码，支持播放控制、循环次数、资源缓存、Worker 解码与加载性能统计。
 
 ## 演示
 
@@ -51,6 +51,8 @@ function App() {
 | `autoPlay` | `boolean` | `true` | 加载完成后自动播放 |
 | `showControls` | `boolean` | `false` | 显示播放/暂停按钮 |
 | `debug` | `boolean` | `false` | 在画面上叠加加载耗时调试信息 |
+| `useWorker` | `boolean` | `false` | 在 Web Worker 中解码，减轻主线程压力 |
+| `workerConcurrency` | `number` | `min(hardwareConcurrency, 4)` | Worker 池并发数，范围 1–16，仅 `useWorker=true` 时生效 |
 | `loopCount` | `number` | — | 循环次数，不传则按 GIF 自身循环或无限循环 |
 | `onLoaded` | `(stats: GifLoadStats) => void` | — | 加载完成 |
 | `onPlay` | `() => void` | — | 开始播放 |
@@ -68,23 +70,41 @@ import { GifPlayer, type GifPlayerRef } from '@libshub/gif-tools'
 
 const ref = useRef<GifPlayerRef>(null)
 
-ref.current?.play()      // 播放
-ref.current?.pause()     // 暂停
-ref.current?.toggle()    // 切换播放/暂停
-ref.current?.reset()     // 回到第一帧并暂停
-ref.current?.reload()    // 重新加载（跳过 pending 复用，强制 fresh）
-ref.current?.isPlaying() // 是否正在播放
+ref.current?.play()       // 播放
+ref.current?.pause()      // 暂停
+ref.current?.toggle()     // 切换播放/暂停
+ref.current?.reset()      // 回到第一帧并暂停
+ref.current?.reload()     // 重新加载（跳过 pending 复用，强制 fresh）
+ref.current?.isPlaying()  // 是否正在播放
+```
+
+### Worker 解码
+
+多 GIF 并发加载时，可将 decode 放到 Worker 池，避免阻塞主线程：
+
+```tsx
+<GifPlayer
+  src="https://example.com/demo.gif"
+  useWorker
+  workerConcurrency={8}
+  debug
+/>
+```
+
+也可在应用层全局设置 Worker 池大小：
+
+```ts
+import { setWorkerPoolSize } from '@libshub/gif-tools'
+
+setWorkerPoolSize(8)   // 1–16
+setWorkerPoolSize()    // 恢复默认 min(hardwareConcurrency, 4)
 ```
 
 ### 完整示例
 
 ```tsx
 import { useRef } from 'react'
-import {
-  GifPlayer,
-  formatGifLoadStats,
-  type GifPlayerRef,
-} from '@libshub/gif-tools'
+import { GifPlayer, type GifPlayerRef } from '@libshub/gif-tools'
 import '@libshub/gif-tools/style.css'
 
 export default function Demo() {
@@ -103,9 +123,11 @@ export default function Demo() {
         style={{ borderRadius: 8 }}
         autoPlay
         showControls
+        useWorker
+        workerConcurrency={4}
         loopCount={2}
         debug
-        onLoaded={(stats) => console.log(formatGifLoadStats(stats))}
+        onLoaded={(stats) => console.log(`loaded in ${stats.totalMs.toFixed(1)}ms`)}
         onPlay={() => console.log('play')}
         onPause={() => console.log('pause')}
         onEnd={() => console.log('end')}
@@ -118,36 +140,56 @@ export default function Demo() {
 
 ## 资源缓存
 
-相同 `src` 的 GIF 在全局共享解码结果，多个 `GifPlayer` 实例不会重复 fetch / decode。
+相同 `src` 的 GIF 在全局共享解码结果（不论是否使用 Worker），多个 `GifPlayer` 实例不会重复 fetch / decode。
 
 ```tsx
 import { clearGifResourceCache } from '@libshub/gif-tools'
 
-// 清空全部缓存
 clearGifResourceCache()
 ```
 
-`onLoaded` 回调中的 `GifLoadStats` 可区分三种加载模式：
+## 加载统计 `GifLoadStats`
 
-- **fresh**：首次加载，包含 `fetchTimeMs` 与 `decodeTimeMs`
-- **pending**：复用进行中的请求，包含 `pendingWaitFetchMs` 与 `pendingWaitDecodeMs`
-- **cache**：命中缓存，耗时均为 0
+`onLoaded` 回调中的 `GifLoadStats` 可区分三种加载模式，并拆分 network / queue / decode 三阶段：
 
-```tsx
-import { formatGifLoadStats, getGifLoadStatsView } from '@libshub/gif-tools'
+| 字段 | 说明 |
+|------|------|
+| `networkTimeMs` | 网络或浏览器缓存读取耗时（Resource Timing） |
+| `queueWaitMs` | Worker 池排队，或 pending 跟随方等待进行中的加载 |
+| `decodeTimeMs` | 实际 decode 耗时 |
+| `totalMs` | 墙钟总耗时（该实例从开始加载到就绪） |
+| `fromCache` | 命中内存缓存 |
+| `fromPending` | 等待同一 `src` 的进行中加载 |
 
-onLoaded={(stats) => {
-  console.log(formatGifLoadStats(stats))
-  // fresh
-  // fetch 120.5ms
-  // decode 45.2ms
-  // total 165.7ms
+| 模式 | 判断 | 典型字段 |
+|------|------|----------|
+| **fresh** | `!fromCache && !fromPending` | `networkTimeMs`、`queueWaitMs`、`decodeTimeMs` |
+| **pending** | `fromPending` | `queueWaitMs`（其余为 0） |
+| **cache** | `fromCache` | 均为 0 |
 
-  const view = getGifLoadStatsView(stats)
-  console.log(view.mode) // 'fresh' | 'pending' | 'cache'
+```tsx
+import type { GifLoadStats } from '@libshub/gif-tools'
+
+onLoaded={(stats: GifLoadStats) => {
+  if (stats.fromCache) {
+    console.log('cache hit')
+    return
+  }
+  if (stats.fromPending) {
+    console.log(`pending queue ${stats.queueWaitMs.toFixed(1)}ms`)
+    return
+  }
+  console.log(
+    `network ${stats.networkTimeMs.toFixed(1)}ms`,
+    `queue ${stats.queueWaitMs.toFixed(1)}ms`,
+    `decode ${stats.decodeTimeMs.toFixed(1)}ms`,
+  )
+  console.log(`wall ${stats.totalMs.toFixed(1)}ms`)
 }}
 ```
 
+> 并发场景下，各实例 `totalMs` 为各自墙钟时间；整批加载的总耗时应取最慢实例的 `totalMs`，而非简单累加。
+
 ## 底层 API
 
 不依赖 React 时，可直接在 Canvas 上创建控制器：
@@ -157,6 +199,8 @@ import { createGifController } from '@libshub/gif-tools'
 
 const canvas = document.querySelector('canvas')!
 const { controller, stats } = await createGifController(canvas, src, {
+  useWorker: true,
+  workerConcurrency: 4,
   loopCount: 3,
   onPlay: () => {},
   onPause: () => {},
@@ -181,13 +225,9 @@ controller.destroy()
 
 - `GifPlayerProps`、`GifPlayerRef`、`GifPlayerComponent`
 - `GifLoadStats`、`GifController`、`CreateGifOptions`
-- `GifLoadStatsView`、`GifLoadStatsLine`、`GifLoadStatsMode`
 
 **工具函数**
 
 - `createGifController` — 在 Canvas 上创建 GIF 控制器
 - `clearGifResourceCache` — 清空 GIF 资源缓存
-- `formatGifLoadStats` — 格式化加载统计（多行）
-- `formatLoadTimeMs` — 格式化毫秒数
-- `getGifLoadStatsView` — 获取结构化加载统计视图
-- `getTotalLoadTimeMs` — 获取总加载耗时
+- `setWorkerPoolSize` — 设置全局 Worker 池并发数（1–16），不传参则恢复默认 `min(hardwareConcurrency, 4)`

package/dist/components/GifPlayer.d.ts

@@ -18,6 +18,8 @@ export interface GifPlayerProps {
     autoPlay?: boolean;
     showControls?: boolean;
     debug?: boolean;
+    useWorker?: boolean;
+    workerConcurrency?: number;
     loopCount?: number;
     onPlay?: () => void;
     onPause?: () => void;

package/dist/gif-tools.css

@@ -1,2 +1,2 @@
-.gif-player{line-height:0;display:inline-block;position:relative;overflow:visible}.gif-player__media{max-width:100%;height:auto;display:block}.gif-player__controls{opacity:0;gap:6px;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}.gif-player:hover .gif-player__controls,.gif-player--show-controls .gif-player__controls{opacity:1}.gif-player__btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.gif-player__btn:hover{background:#000000bf}.gif-player__btn svg{fill:currentColor;width:16px;height:16px}.gif-player__debug{z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;color:#e8eaed;background:#0c0e12d1;font-family:ui-monospace,Cascadia Code,SF Mono,monospace;position:absolute;top:0;left:0;box-shadow:0 2px 8px #0003}.gif-player__debug--compact{white-space:nowrap;border-radius:0 0 4px;padding:2px 5px;font-size:8px;line-height:1.2}.gif-player__debug--medium{border-radius:0 0 5px;padding:3px 6px;font-size:9px;line-height:1.2}.gif-player__debug--collapsible{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}.gif-player__debug--collapsible:hover{background:#12161ceb}.gif-player__debug--collapsible:focus-visible{outline-offset:1px;outline:1px solid #7ec8ffbf}.gif-player__debug--full{border-radius:0 0 6px;min-width:96px;padding:5px 7px;font-size:10px;line-height:1.35}.gif-player__debug--expanded{z-index:2;min-width:108px;max-width:none!important}.gif-player__debug-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.gif-player__debug-badge{letter-spacing:.04em;color:#fff;background:#ffffff24;border-radius:3px;padding:1px 4px;font-size:8px;font-weight:600;display:inline-block}.gif-player__debug--full .gif-player__debug-badge{margin-bottom:4px;padding:1px 5px;font-size:9px}.gif-player__debug[data-mode=fresh] .gif-player__debug-badge{background:#4a90e28c}.gif-player__debug[data-mode=pending] .gif-player__debug-badge{background:#e6a23c8c}.gif-player__debug[data-mode=cache] .gif-player__debug-badge{background:#52c4808c}.gif-player__debug-body{flex-direction:column;gap:2px;display:flex}.gif-player__debug-row,.gif-player__debug-total{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.gif-player__debug-label{color:#e8eaedb8;white-space:nowrap}.gif-player__debug-value{color:#fff;white-space:nowrap}.gif-player__debug-value--total{color:#7ec8ff;font-weight:600}.gif-player__debug[data-mode=cache] .gif-player__debug-value--total{color:#82e0aa}.gif-player__debug-total{border-top:1px solid #ffffff1f;margin-top:4px;padding-top:4px}.gif-player__debug-total .gif-player__debug-label{color:#e8eaede6;font-weight:600}.gif-player__debug-total .gif-player__debug-value{color:#7ec8ff;font-weight:600}.gif-player__debug[data-mode=cache] .gif-player__debug-total .gif-player__debug-value{color:#82e0aa}
+.gif-player{line-height:0;display:inline-block;position:relative;overflow:visible}.gif-player__media{max-width:100%;height:auto;display:block}.gif-player__controls{opacity:0;gap:6px;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}.gif-player:hover .gif-player__controls,.gif-player--show-controls .gif-player__controls{opacity:1}.gif-player__btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.gif-player__btn:hover{background:#000000bf}.gif-player__btn svg{fill:currentColor;width:16px;height:16px}.gif-player__debug{z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;color:#e8eaed;background:#0c0e12d1;font-family:ui-monospace,Cascadia Code,SF Mono,monospace;position:absolute;top:0;left:0;box-shadow:0 2px 8px #0003}.gif-player__debug--compact{white-space:nowrap;border-radius:0 0 4px;padding:2px 5px;font-size:8px;line-height:1.2}.gif-player__debug--medium{border-radius:0 0 5px;padding:3px 6px;font-size:9px;line-height:1.2}.gif-player__debug--collapsible{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}.gif-player__debug--collapsible:hover{background:#12161ceb}.gif-player__debug--collapsible:focus-visible{outline-offset:1px;outline:1px solid #7ec8ffbf}.gif-player__debug--full{border-radius:0 0 6px;min-width:120px;padding:5px 7px;font-size:10px;line-height:1.35}.gif-player__debug--expanded{z-index:2;min-width:108px;max-width:none!important}.gif-player__debug-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.gif-player__debug-badge{letter-spacing:.04em;color:#fff;background:#ffffff24;border-radius:3px;padding:1px 4px;font-size:8px;font-weight:600;display:inline-block}.gif-player__debug--full .gif-player__debug-badge{margin-bottom:4px;padding:1px 5px;font-size:9px}.gif-player__debug[data-mode=fresh] .gif-player__debug-badge{background:#4a90e28c}.gif-player__debug[data-mode=pending] .gif-player__debug-badge{background:#e6a23c8c}.gif-player__debug[data-mode=cache] .gif-player__debug-badge{background:#52c4808c}.gif-player__debug-body{flex-direction:column;gap:2px;display:flex}.gif-player__debug-row,.gif-player__debug-total{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.gif-player__debug-label{color:#e8eaedb8;white-space:nowrap}.gif-player__debug-value{color:#fff;white-space:nowrap}.gif-player__debug-value--total{color:#7ec8ff;font-weight:600}.gif-player__debug[data-mode=cache] .gif-player__debug-value--total{color:#82e0aa}.gif-player__debug-total{border-top:1px solid #ffffff1f;margin-top:4px;padding-top:4px}.gif-player__debug-total .gif-player__debug-label{color:#e8eaede6;font-weight:600}.gif-player__debug-total .gif-player__debug-value{color:#7ec8ff;font-weight:600}.gif-player__debug[data-mode=cache] .gif-player__debug-total .gif-player__debug-value{color:#82e0aa}
 /*$vite$:1*/

package/dist/gif-tools.es.js

@@ -298,123 +298,234 @@ var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			return c(n, e.gct, t);
 		});
 	};
-})))(), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
-function v(e, t, n) {
-	return n === null || e >= n ? {
-		pendingWaitFetchMs: 0,
-		pendingWaitDecodeMs: t - e
-	} : {
-		pendingWaitFetchMs: n - e,
-		pendingWaitDecodeMs: t - n
+})))();
+function h(e, t) {
+	if (typeof performance > "u") return t;
+	let n = performance.getEntriesByName(e.url), r = n[n.length - 1];
+	return r ? r.duration > 0 ? r.duration : r.responseEnd > r.startTime ? r.responseEnd - r.startTime : t : t;
+}
+//#endregion
+//#region src/workers/gifDecode.worker.ts?worker&inline
+var g = "(function(){var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),t=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.loop=e.conditional=e.parse=void 0,e.parse=function e(t,n){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},i=arguments.length>3&&arguments[3]!==void 0?arguments[3]:r;if(Array.isArray(n))n.forEach(function(n){return e(t,n,r,i)});else if(typeof n==`function`)n(t,r,i,e);else{var a=Object.keys(n)[0];Array.isArray(n[a])?(i[a]={},e(t,n[a],r,i[a])):i[a]=n[a](t,r,i,e)}return r},e.conditional=function(e,t){return function(n,r,i,a){t(n,r,i)&&a(n,e,r,i)}},e.loop=function(e,t){return function(n,r,i,a){for(var o=[],s=n.pos;t(n,r,i);){var c={};if(a(n,e,r,c),n.pos===s)break;s=n.pos,o.push(c)}return o}}})),n=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.readBits=e.readArray=e.readUnsigned=e.readString=e.peekBytes=e.readBytes=e.peekByte=e.readByte=e.buildStream=void 0,e.buildStream=function(e){return{data:e,pos:0}};var t=function(){return function(e){return e.data[e.pos++]}};e.readByte=t,e.peekByte=function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:0;return function(t){return t.data[t.pos+e]}};var n=function(e){return function(t){return t.data.subarray(t.pos,t.pos+=e)}};e.readBytes=n,e.peekBytes=function(e){return function(t){return t.data.subarray(t.pos,t.pos+e)}},e.readString=function(e){return function(t){return Array.from(n(e)(t)).map(function(e){return String.fromCharCode(e)}).join(``)}},e.readUnsigned=function(e){return function(t){var r=n(2)(t);return e?(r[1]<<8)+r[0]:(r[0]<<8)+r[1]}},e.readArray=function(e,t){return function(r,i,a){for(var o=typeof t==`function`?t(r,i,a):t,s=n(e),c=Array(o),l=0;l<o;l++)c[l]=s(r);return c}};var r=function(e,t,n){for(var r=0,i=0;i<n;i++)r+=e[t+i]&&2**(n-i-1);return r};e.readBits=function(e){return function(n){for(var i=t()(n),a=Array(8),o=0;o<8;o++)a[7-o]=!!(i&1<<o);return Object.keys(e).reduce(function(t,n){var i=e[n];return i.length?t[n]=r(a,i.index,i.length):t[n]=a[i.index],t},{})}}})),r=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.default=void 0;var r=t(),i=n(),a={blocks:function(e){for(var t=0,n=[],r=e.data.length,a=0,o=(0,i.readByte)()(e);o!==t&&o;o=(0,i.readByte)()(e)){if(e.pos+o>=r){var s=r-e.pos;n.push((0,i.readBytes)(s)(e)),a+=s;break}n.push((0,i.readBytes)(o)(e)),a+=o}for(var c=new Uint8Array(a),l=0,u=0;u<n.length;u++)c.set(n[u],l),l+=n[u].length;return c}},o=(0,r.conditional)({gce:[{codes:(0,i.readBytes)(2)},{byteSize:(0,i.readByte)()},{extras:(0,i.readBits)({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:(0,i.readUnsigned)(!0)},{transparentColorIndex:(0,i.readByte)()},{terminator:(0,i.readByte)()}]},function(e){var t=(0,i.peekBytes)(2)(e);return t[0]===33&&t[1]===249}),s=(0,r.conditional)({image:[{code:(0,i.readByte)()},{descriptor:[{left:(0,i.readUnsigned)(!0)},{top:(0,i.readUnsigned)(!0)},{width:(0,i.readUnsigned)(!0)},{height:(0,i.readUnsigned)(!0)},{lct:(0,i.readBits)({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},(0,r.conditional)({lct:(0,i.readArray)(3,function(e,t,n){return 2**(n.descriptor.lct.size+1)})},function(e,t,n){return n.descriptor.lct.exists}),{data:[{minCodeSize:(0,i.readByte)()},a]}]},function(e){return(0,i.peekByte)()(e)===44}),c=(0,r.conditional)({text:[{codes:(0,i.readBytes)(2)},{blockSize:(0,i.readByte)()},{preData:function(e,t,n){return(0,i.readBytes)(n.text.blockSize)(e)}},a]},function(e){var t=(0,i.peekBytes)(2)(e);return t[0]===33&&t[1]===1}),l=(0,r.conditional)({application:[{codes:(0,i.readBytes)(2)},{blockSize:(0,i.readByte)()},{id:function(e,t,n){return(0,i.readString)(n.blockSize)(e)}},a]},function(e){var t=(0,i.peekBytes)(2)(e);return t[0]===33&&t[1]===255}),u=(0,r.conditional)({comment:[{codes:(0,i.readBytes)(2)},a]},function(e){var t=(0,i.peekBytes)(2)(e);return t[0]===33&&t[1]===254});e.default=[{header:[{signature:(0,i.readString)(3)},{version:(0,i.readString)(3)}]},{lsd:[{width:(0,i.readUnsigned)(!0)},{height:(0,i.readUnsigned)(!0)},{gct:(0,i.readBits)({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:(0,i.readByte)()},{pixelAspectRatio:(0,i.readByte)()}]},(0,r.conditional)({gct:(0,i.readArray)(3,function(e,t){return 2**(t.lsd.gct.size+1)})},function(e,t){return t.lsd.gct.exists}),{frames:(0,r.loop)([o,l,u,s,c],function(e){var t=(0,i.peekByte)()(e);return t===33||t===44})}]})),i=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.deinterlace=void 0,e.deinterlace=function(e,t){for(var n=Array(e.length),r=e.length/t,i=function(r,i){var a=e.slice(i*t,(i+1)*t);n.splice.apply(n,[r*t,t].concat(a))},a=[0,4,2,1],o=[8,8,4,2],s=0,c=0;c<4;c++)for(var l=a[c];l<r;l+=o[c])i(l,s),s++;return n}})),a=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.lzw=void 0,e.lzw=function(e,t,n){var r=4096,i=-1,a=n,o,s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S=Array(n),C=Array(r),w=Array(r),T=Array(r+1);for(_=e,s=1<<_,u=s+1,o=s+2,f=i,l=_+1,c=(1<<l)-1,m=0;m<s;m++)C[m]=0,w[m]=m;var g=p=v=y=x=b=0,p,v,y,x,b;for(h=0;h<a;){if(y===0){if(p<l){g+=t[b]<<p,p+=8,b++;continue}if(m=g&c,g>>=l,p-=l,m>o||m==u)break;if(m==s){l=_+1,c=(1<<l)-1,o=s+2,f=i;continue}if(f==i){T[y++]=w[m],f=m,v=m;continue}for(d=m,m==o&&(T[y++]=v,m=f);m>s;)T[y++]=w[m],m=C[m];v=w[m]&255,T[y++]=v,o<r&&(C[o]=f,w[o]=v,o++,(o&c)===0&&o<r&&(l++,c+=o)),f=d}y--,S[x++]=T[y],h++}for(h=x;h<a;h++)S[h]=0;return S}})),o=e((e=>{Object.defineProperty(e,\"__esModule\",{value:!0}),e.decompressFrames=e.decompressFrame=e.parseGIF=void 0;var o=d(r()),s=t(),c=n(),l=i(),u=a();function d(e){return e&&e.__esModule?e:{default:e}}e.parseGIF=function(e){var t=new Uint8Array(e);return(0,s.parse)((0,c.buildStream)(t),o.default)};var f=function(e){for(var t=e.pixels.length,n=new Uint8ClampedArray(t*4),r=0;r<t;r++){var i=r*4,a=e.pixels[r],o=e.colorTable[a]||[0,0,0];n[i]=o[0],n[i+1]=o[1],n[i+2]=o[2],n[i+3]=a===e.transparentIndex?0:255}return n},p=function(e,t,n){if(!e.image){console.warn(`gif frame does not have associated image.`);return}var r=e.image,i=r.descriptor.width*r.descriptor.height,a=(0,u.lzw)(r.data.minCodeSize,r.data.blocks,i);r.descriptor.lct.interlaced&&(a=(0,l.deinterlace)(a,r.descriptor.width));var o={pixels:a,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height}};return r.descriptor.lct&&r.descriptor.lct.exists?o.colorTable=r.lct:o.colorTable=t,e.gce&&(o.delay=(e.gce.delay||10)*10,o.disposalType=e.gce.extras.disposal,e.gce.extras.transparentColorGiven&&(o.transparentIndex=e.gce.transparentColorIndex)),n&&(o.patch=f(o)),o};e.decompressFrame=p,e.decompressFrames=function(e,t){return e.frames.filter(function(e){return e.image}).map(function(n){return p(n,e.gct,t)})}}))();function s(e){let t=new ArrayBuffer(e.patch.byteLength);return new Uint8ClampedArray(t).set(e.patch),{dims:e.dims,delay:e.delay,disposalType:e.disposalType,patchBuffer:t}}self.onmessage=e=>{let{id:t,type:n,buffer:r}=e.data;if(n===`decode`)try{let e=performance.now(),n=(0,o.parseGIF)(r),i=(0,o.decompressFrames)(n,!0),a=performance.now()-e;if(!i.length){let e={id:t,type:`decode`,ok:!1,error:`GIF has no frames`};self.postMessage(e);return}let c=i.map(s),l=c.map(e=>e.patchBuffer),u={id:t,type:`decode`,ok:!0,width:n.lsd.width,height:n.lsd.height,frames:c,decodeTimeMs:a};self.postMessage(u,{transfer:l})}catch(e){let n={id:t,type:`decode`,ok:!1,error:e instanceof Error?e.message:String(e)};self.postMessage(n)}}})();", _ = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", g], { type: "text/javascript;charset=utf-8" });
+function v(e) {
+	let t;
+	try {
+		if (t = _ && (self.URL || self.webkitURL).createObjectURL(_), !t) throw "";
+		let n = new Worker(t, { name: e?.name });
+		return n.addEventListener("error", () => {
+			(self.URL || self.webkitURL).revokeObjectURL(t);
+		}), n;
+	} catch {
+		return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(g), { name: e?.name });
+	}
+}
+//#endregion
+//#region src/utils/gifWorkerPool.ts
+var y = typeof navigator < "u" ? Math.min(navigator.hardwareConcurrency || 4, 4) : 4, b = 16;
+function x(e) {
+	return e === void 0 ? y : Math.min(Math.max(Math.floor(e), 1), b);
+}
+function S(e) {
+	return {
+		dims: e.dims,
+		delay: e.delay,
+		disposalType: e.disposalType,
+		patch: new Uint8ClampedArray(e.patchBuffer),
+		colorTable: [],
+		pixels: [],
+		transparentIndex: -1
 	};
 }
-function y() {
+var C = new class {
+	workers = [];
+	idleWorkers = [];
+	pendingJobs = /* @__PURE__ */ new Map();
+	workerJobs = /* @__PURE__ */ new Map();
+	waitQueue = [];
+	jobId = 0;
+	initialized = !1;
+	targetSize = y;
+	spawnWorker() {
+		let e = new v();
+		return e.onmessage = (t) => {
+			this.handleMessage(e, t.data);
+		}, e.onerror = (t) => {
+			this.handleWorkerError(e, t.message || "Worker error");
+		}, this.workers.push(e), this.idleWorkers.push(e), e;
+	}
+	terminateWorker(e) {
+		this.idleWorkers = this.idleWorkers.filter((t) => t !== e), this.workerJobs.delete(e);
+		let t = this.workers.indexOf(e);
+		t >= 0 && this.workers.splice(t, 1), e.terminate();
+	}
+	init() {
+		this.initialized || (this.initialized = !0, this.growToTarget());
+	}
+	growToTarget() {
+		for (; this.workers.length < this.targetSize;) this.spawnWorker();
+	}
+	shrinkIdleToTarget() {
+		for (; this.workers.length > this.targetSize && this.idleWorkers.length > 0;) this.terminateWorker(this.idleWorkers.pop());
+	}
+	setSize(e) {
+		this.targetSize = x(e), this.init(), this.growToTarget(), this.shrinkIdleToTarget();
+	}
+	decode(e) {
+		return this.init(), new Promise((t, n) => {
+			let r = {
+				buffer: e,
+				enqueuedAt: performance.now(),
+				queueWaitMs: 0,
+				resolve: t,
+				reject: n
+			}, i = this.idleWorkers.pop();
+			i ? this.runJob(i, r) : this.waitQueue.push(r);
+		});
+	}
+	runJob(e, t) {
+		t.queueWaitMs = performance.now() - t.enqueuedAt;
+		let n = ++this.jobId;
+		this.pendingJobs.set(n, t), this.workerJobs.set(e, n), e.postMessage({
+			id: n,
+			type: "decode",
+			buffer: t.buffer
+		}, [t.buffer]);
+	}
+	handleMessage(e, t) {
+		let n = this.pendingJobs.get(t.id);
+		if (!n) return;
+		this.pendingJobs.delete(t.id), this.workerJobs.delete(e), this.idleWorkers.push(e), this.shrinkIdleToTarget(), t.ok === !1 ? n.reject(Error(t.error)) : n.resolve({
+			gif: {
+				frames: t.frames.map(S),
+				width: t.width,
+				height: t.height
+			},
+			decodeTimeMs: t.decodeTimeMs,
+			queueWaitMs: n.queueWaitMs
+		});
+		let r = this.waitQueue.shift();
+		if (r) {
+			let e = this.idleWorkers.pop();
+			e && this.runJob(e, r);
+		}
+	}
+	handleWorkerError(e, t) {
+		let n = this.workerJobs.get(e), r = n === void 0 ? void 0 : this.pendingJobs.get(n);
+		for (n !== void 0 && this.pendingJobs.delete(n), this.workerJobs.delete(e), this.terminateWorker(e), r && r.reject(Error(t)), this.growToTarget(); this.waitQueue.length > 0 && this.idleWorkers.length > 0;) {
+			let e = this.waitQueue.shift(), t = this.idleWorkers.pop();
+			this.runJob(t, e);
+		}
+	}
+}();
+function w(e) {
+	C.setSize(e);
+}
+function T(e, t) {
+	return t !== void 0 && C.setSize(t), C.decode(e);
+}
+//#endregion
+//#region src/utils/gifResourceManager.ts
+var E = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map();
+function k(e) {
+	return e;
+}
+function A() {
 	return {
-		fetchTimeMs: 0,
+		networkTimeMs: 0,
+		queueWaitMs: 0,
 		decodeTimeMs: 0,
-		pendingWaitFetchMs: 0,
-		pendingWaitDecodeMs: 0,
+		totalMs: 0,
 		fromCache: !0,
 		fromPending: !1
 	};
 }
-function b(e, t) {
+function j(e, t, n, r, i) {
 	return {
-		fetchTimeMs: e,
-		decodeTimeMs: t,
-		pendingWaitFetchMs: 0,
-		pendingWaitDecodeMs: 0,
-		fromCache: !1,
-		fromPending: !1
+		networkTimeMs: e,
+		queueWaitMs: t,
+		decodeTimeMs: n,
+		totalMs: r,
+		fromCache: i.fromCache ?? !1,
+		fromPending: i.fromPending ?? !1
+	};
+}
+async function M(e, t, n) {
+	if (t) return T(e, n);
+	let r = performance.now(), i = (0, m.parseGIF)(e), a = (0, m.decompressFrames)(i, !0), o = performance.now() - r;
+	if (!a.length) throw Error("GIF has no frames");
+	return {
+		gif: {
+			frames: a,
+			width: i.lsd.width,
+			height: i.lsd.height
+		},
+		decodeTimeMs: o,
+		queueWaitMs: 0
 	};
 }
-async function x(e, t) {
+async function N(e, t) {
 	let n = performance.now(), r = await fetch(e, {
 		mode: "cors",
 		credentials: "omit"
 	});
 	if (!r.ok) throw Error(`Failed to load gif: ${r.status}`);
-	let i = await r.arrayBuffer(), a = performance.now() - n;
-	t && (t.fetchDoneAt = performance.now());
-	let o = performance.now(), s = (0, m.parseGIF)(i), c = (0, m.decompressFrames)(s, !0), l = performance.now() - o;
-	if (!c.length) throw Error("GIF has no frames");
+	let i = await r.arrayBuffer(), a = h(r, performance.now() - n), { gif: o, decodeTimeMs: s, queueWaitMs: c } = await M(i, t?.useWorker, t?.workerConcurrency);
 	return {
-		gif: {
-			frames: c,
-			width: s.lsd.width,
-			height: s.lsd.height
-		},
-		fetchTimeMs: a,
-		decodeTimeMs: l
+		gif: o,
+		networkTimeMs: a,
+		queueWaitMs: c,
+		decodeTimeMs: s,
+		wallMs: performance.now() - n
 	};
 }
-async function S(e, t) {
-	let n = h.get(e);
-	if (n) return {
-		gif: n.data,
-		stats: y()
+async function P(e, t) {
+	let n = k(e), r = E.get(n);
+	if (r) return {
+		gif: r.data,
+		stats: A()
 	};
-	if (!t?.skipPending && g.has(e)) {
-		let t = g.get(e), n = performance.now(), { gif: r, fetchTimeMs: i, decodeTimeMs: a } = await t.promise, { pendingWaitFetchMs: o, pendingWaitDecodeMs: s } = v(n, performance.now(), t.fetchDoneAt), c = h.get(e);
-		return c ||= (h.set(e, {
+	if (!t?.skipPending && D.has(n)) {
+		let e = D.get(n), t = performance.now(), { gif: r } = await e.promise, i = performance.now() - t, a = E.get(n);
+		return a ||= (E.set(n, {
 			data: r,
-			refCount: 0,
-			fetchTimeMs: i,
-			decodeTimeMs: a
-		}), h.get(e)), {
-			gif: c.data,
-			stats: {
-				fetchTimeMs: 0,
-				decodeTimeMs: 0,
-				pendingWaitFetchMs: o,
-				pendingWaitDecodeMs: s,
-				fromCache: !1,
-				fromPending: !0
-			}
+			refCount: 0
+		}), E.get(n)), {
+			gif: a.data,
+			stats: j(0, i, 0, i, { fromPending: !0 })
 		};
 	}
-	let r = (_.get(e) ?? 0) + 1;
-	_.set(e, r);
-	let i = {
-		fetchDoneAt: null,
-		promise: void 0
-	};
-	i.promise = x(e, i).then(({ gif: t, fetchTimeMs: n, decodeTimeMs: i }) => _.get(e) === r ? (g.delete(e), h.set(e, {
-		data: t,
-		refCount: 0,
-		fetchTimeMs: n,
-		decodeTimeMs: i
-	}), {
-		gif: t,
-		fetchTimeMs: n,
-		decodeTimeMs: i
-	}) : {
-		gif: t,
-		fetchTimeMs: n,
-		decodeTimeMs: i
-	}).catch((t) => {
-		throw _.get(e) === r && g.delete(e), t;
-	}), g.set(e, i);
-	let { gif: a, fetchTimeMs: o, decodeTimeMs: s } = await i.promise;
+	let i = (O.get(n) ?? 0) + 1;
+	O.set(n, i);
+	let a = { promise: void 0 };
+	a.promise = N(e, {
+		useWorker: t?.useWorker,
+		workerConcurrency: t?.workerConcurrency
+	}).then((e) => O.get(n) === i ? (D.delete(n), E.set(n, {
+		data: e.gif,
+		refCount: 0
+	}), e) : e).catch((e) => {
+		throw O.get(n) === i && D.delete(n), e;
+	}), D.set(n, a);
+	let { gif: o, networkTimeMs: s, queueWaitMs: c, decodeTimeMs: l, wallMs: u } = await a.promise;
 	return {
-		gif: a,
-		stats: b(o, s)
+		gif: o,
+		stats: j(s, c, l, u, {})
 	};
 }
-function C(e) {
-	let t = h.get(e);
-	t && (t.refCount += 1);
+function F(e, t) {
+	let n = E.get(k(e));
+	n && (n.refCount += 1);
 }
-function w(e) {
-	let t = h.get(e);
-	t && (--t.refCount, t.refCount <= 0 && h.delete(e));
+function I(e, t) {
+	let n = k(e), r = E.get(n);
+	r && (--r.refCount, r.refCount <= 0 && E.delete(n));
 }
-function T() {
-	h.clear(), g.clear(), _.clear();
+function L() {
+	E.clear(), D.clear(), O.clear();
 }
 //#endregion
 //#region src/utils/gifController.ts
-function E(e, t, n, r, i = {}) {
+function R(e, t, n, r, i = {}) {
 	let a = e.getContext("2d");
 	if (!a) throw Error("Canvas 2d context unavailable");
 	let o = a;
@@ -470,82 +581,67 @@ function E(e, t, n, r, i = {}) {
 		getCompletedLoops: () => d
 	};
 }
-async function D(e, t, n = {}) {
-	let { skipPending: r, onLoaded: i, ...a } = n, { gif: o, stats: s } = await S(t, { skipPending: r });
-	return i?.(s), {
-		controller: E(e, o.frames, o.width, o.height, a),
-		stats: s
+async function z(e, t, n = {}) {
+	let { skipPending: r, useWorker: i, workerConcurrency: a, onLoaded: o, ...s } = n, { gif: c, stats: l } = await P(t, {
+		skipPending: r,
+		useWorker: i,
+		workerConcurrency: a
+	});
+	return o?.(l), {
+		controller: R(e, c.frames, c.width, c.height, s),
+		stats: l
 	};
 }
 //#endregion
 //#region src/utils/loadStats.ts
-function O(e) {
-	return e.fromCache ? 0 : e.fromPending ? e.pendingWaitFetchMs + e.pendingWaitDecodeMs : e.fetchTimeMs + e.decodeTimeMs;
-}
-function k(e) {
-	return e.fromCache ? {
-		mode: "cache",
-		lines: [{
-			label: "wait fetch",
-			valueMs: 0
-		}, {
-			label: "wait decode",
-			valueMs: 0
-		}],
-		totalMs: 0
-	} : e.fromPending ? {
-		mode: "pending",
-		lines: [{
-			label: "wait fetch",
-			valueMs: e.pendingWaitFetchMs
-		}, {
-			label: "wait decode",
-			valueMs: e.pendingWaitDecodeMs
-		}],
-		totalMs: e.pendingWaitFetchMs + e.pendingWaitDecodeMs
-	} : {
-		mode: "fresh",
-		lines: [{
-			label: "fetch",
-			valueMs: e.fetchTimeMs
-		}, {
-			label: "decode",
-			valueMs: e.decodeTimeMs
-		}],
-		totalMs: e.fetchTimeMs + e.decodeTimeMs
+var B = [
+	{
+		key: "networkTimeMs",
+		label: "network"
+	},
+	{
+		key: "queueWaitMs",
+		label: "queue"
+	},
+	{
+		key: "decodeTimeMs",
+		label: "decode"
+	}
+];
+function V(e) {
+	return {
+		mode: e.fromCache ? "cache" : e.fromPending ? "pending" : "fresh",
+		lines: B.map(({ key: t, label: n }) => ({
+			label: n,
+			valueMs: e[t]
+		})),
+		totalMs: e.totalMs
 	};
 }
-function A(e) {
-	let t = k(e), n = t.lines.map((e) => `${e.label} ${e.valueMs.toFixed(1)}ms`).join("\n");
-	return `${t.mode}\n${n}\ntotal ${t.totalMs.toFixed(1)}ms`;
-}
-function j(e) {
+function H(e) {
 	return `${e.toFixed(1)}ms`;
 }
-function M(e, t) {
+function U(e, t) {
 	let n = Math.min(e, t);
 	return n < 130 ? "compact" : n < 220 ? "medium" : "full";
 }
-var N = {
+var W = {
 	fresh: "F",
 	pending: "P",
 	cache: "C"
 };
-function P(e) {
-	let t = k(e), n = N[t.mode];
-	return t.mode === "cache" ? `${n} · 0` : `${n} · ${j(t.totalMs)}`;
-}
-function F(e, t) {
-	return t === "fresh" ? e.label === "fetch" ? "f" : "d" : e.label === "wait fetch" ? "wf" : "wd";
+function G(e) {
+	let t = V(e), n = W[t.mode];
+	return t.mode === "cache" ? `${n} · 0` : `${n} · ${H(e.totalMs)}`;
 }
 //#endregion
 //#region src/components/GifLoadStatsDebug.tsx
-var I = {
+var K = {
 	fresh: "FRESH",
 	pending: "PND",
 	cache: "CACHE"
 };
-function L(e, t) {
+function q(e, t) {
 	let [r, i] = a({
 		width: 0,
 		height: 0
@@ -564,7 +660,7 @@ function L(e, t) {
 		return a.observe(n), () => a.disconnect();
 	}, [e, t]), r;
 }
-function R({ label: e, valueMs: t }) {
+function J({ label: e, valueMs: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "gif-player__debug-row",
 		children: [/* @__PURE__ */ o("span", {
@@ -572,11 +668,12 @@ function R({ label: e, valueMs: t }) {
 			children: e
 		}), /* @__PURE__ */ o("span", {
 			className: "gif-player__debug-value",
-			children: j(t)
+			children: H(t)
 		})]
 	});
 }
-function z({ view: e, width: t, expanded: n, onToggle: r }) {
+function Y({ view: e, width: t, expanded: n, onToggle: r }) {
+	let i = e.mode.toUpperCase();
 	return /* @__PURE__ */ s("div", {
 		className: [
 			"gif-player__debug",
@@ -585,7 +682,7 @@ function z({ view: e, width: t, expanded: n, onToggle: r }) {
 			r && "gif-player__debug--collapsible"
 		].filter(Boolean).join(" "),
 		"data-mode": e.mode,
-		style: { maxWidth: !n && t > 0 ? Math.min(152, Math.round(t * .52)) : void 0 },
+		style: { maxWidth: r && !n && t > 0 ? Math.min(152, Math.round(t * .52)) : void 0 },
 		role: r ? "button" : void 0,
 		tabIndex: r ? 0 : void 0,
 		title: r ? n ? "点击收起" : "点击展开详情" : void 0,
@@ -596,14 +693,14 @@ function z({ view: e, width: t, expanded: n, onToggle: r }) {
 		children: [
 			/* @__PURE__ */ o("span", {
 				className: "gif-player__debug-badge",
-				children: I[e.mode]
+				children: i
 			}),
 			/* @__PURE__ */ o("div", {
 				className: "gif-player__debug-body",
-				children: e.lines.map((t) => /* @__PURE__ */ o(R, {
-					label: F(t, e.mode),
-					valueMs: t.valueMs
-				}, t.label))
+				children: e.lines.map((e) => /* @__PURE__ */ o(J, {
+					label: e.label,
+					valueMs: e.valueMs
+				}, e.label))
 			}),
 			/* @__PURE__ */ s("div", {
 				className: "gif-player__debug-total",
@@ -612,14 +709,14 @@ function z({ view: e, width: t, expanded: n, onToggle: r }) {
 					children: "Σ"
 				}), /* @__PURE__ */ o("span", {
 					className: "gif-player__debug-value",
-					children: j(e.totalMs)
+					children: H(e.totalMs)
 				})]
 			})
 		]
 	});
 }
-function B({ stats: e, canvasRef: t, visible: r }) {
-	let { width: i, height: c } = L(t, r), l = k(e), u = M(i, c), [d, f] = a(!1), p = u !== "full";
+function X({ stats: e, canvasRef: t, visible: r }) {
+	let { width: i, height: c } = q(t, r), l = V(e), u = U(i, c), [d, f] = a(!1), p = u !== "full";
 	n(() => {
 		f(!1);
 	}, [e]), n(() => {
@@ -628,7 +725,7 @@ function B({ stats: e, canvasRef: t, visible: r }) {
 	let m = () => {
 		p && f((e) => !e);
 	};
-	return p && d ? /* @__PURE__ */ o(z, {
+	return p && d ? /* @__PURE__ */ o(Y, {
 		view: l,
 		width: i,
 		expanded: !0,
@@ -643,7 +740,7 @@ function B({ stats: e, canvasRef: t, visible: r }) {
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
 		},
-		children: P(e)
+		children: G(e)
 	}) : u === "medium" ? /* @__PURE__ */ o("div", {
 		className: "gif-player__debug gif-player__debug--medium gif-player__debug--collapsible",
 		"data-mode": l.mode,
@@ -658,13 +755,13 @@ function B({ stats: e, canvasRef: t, visible: r }) {
 			className: "gif-player__debug-head",
 			children: [/* @__PURE__ */ o("span", {
 				className: "gif-player__debug-badge",
-				children: I[l.mode]
+				children: K[l.mode]
 			}), /* @__PURE__ */ o("span", {
 				className: "gif-player__debug-value gif-player__debug-value--total",
-				children: j(l.totalMs)
+				children: H(l.totalMs)
 			})]
 		})
-	}) : /* @__PURE__ */ o(z, {
+	}) : /* @__PURE__ */ o(Y, {
 		view: l,
 		width: i,
 		expanded: !1
@@ -672,99 +769,103 @@ function B({ stats: e, canvasRef: t, visible: r }) {
 }
 //#endregion
 //#region src/components/GifPlayer.tsx
-var V = e(({ src: e, autoPlay: c = !0, showControls: l = !1, debug: u = !1, loopCount: d, className: f, style: p, width: m, height: h, onPlay: g, onPause: _, onEnd: v, onLoaded: y, onError: b }, x) => {
-	let S = i(null), T = i(null), E = i(g), O = i(_), k = i(v), A = i(y), j = i(b), [M, N] = a(c), [P, F] = a(!1), [I, L] = a(null), [R, z] = a(0), V = i(!1), H = i(0);
-	E.current = g, O.current = _, k.current = v, A.current = y, j.current = b;
-	let U = t(() => {
-		T.current?.play(), N(!0);
-	}, []), W = t(() => {
-		T.current?.pause(), N(!1);
+var Z = e(({ src: e, autoPlay: c = !0, showControls: l = !1, debug: u = !1, useWorker: d = !1, workerConcurrency: f, loopCount: p, className: m, style: h, width: g, height: _, onPlay: v, onPause: y, onEnd: b, onLoaded: x, onError: S }, C) => {
+	let w = i(null), T = i(null), E = i(v), D = i(y), O = i(b), k = i(x), A = i(S), [j, M] = a(c), [N, P] = a(!1), [L, R] = a(null), [B, V] = a(0), H = i(!1), U = i(0);
+	E.current = v, D.current = y, O.current = b, k.current = x, A.current = S;
+	let W = t(() => {
+		T.current?.play(), M(!0);
 	}, []), G = t(() => {
-		T.current?.isPlaying() ? W() : U();
-	}, [W, U]), K = t(() => {
-		T.current?.reset(), N(!1);
-	}, []), q = t(() => {
-		V.current = !0, z((e) => e + 1);
+		T.current?.pause(), M(!1);
+	}, []), K = t(() => {
+		T.current?.isPlaying() ? G() : W();
+	}, [G, W]), q = t(() => {
+		T.current?.reset(), M(!1);
 	}, []), J = t(() => {
+		H.current = !0, V((e) => e + 1);
+	}, []), Y = t(() => {
 		if (!e) return () => {};
-		let t = ++H.current, n = !1, r = S.current;
+		let t = ++U.current, n = !1, r = w.current;
 		if (!r) return () => {};
-		let i = V.current;
-		return V.current = !1, F(!1), N(!1), L(null), T.current?.destroy(), T.current = null, D(r, e, {
+		let i = H.current;
+		return H.current = !1, P(!1), M(!1), R(null), T.current?.destroy(), T.current = null, z(r, e, {
 			skipPending: i,
-			loopCount: d,
+			useWorker: d,
+			workerConcurrency: f,
+			loopCount: p,
 			onPlay: () => {
-				t === H.current && N(!0), E.current?.();
+				t === U.current && M(!0), E.current?.();
 			},
 			onPause: () => {
-				t === H.current && N(!1), O.current?.();
+				t === U.current && M(!1), D.current?.();
 			},
 			onEnd: () => {
-				t === H.current && N(!1), k.current?.();
+				t === U.current && M(!1), O.current?.();
 			}
 		}).then(({ controller: r, stats: i }) => {
-			if (A.current?.(i), n || t !== H.current) {
+			if (k.current?.(i), n || t !== U.current) {
 				r.destroy({ clearCanvas: !1 });
 				return;
 			}
-			C(e), T.current = r;
+			F(e, d), T.current = r;
 			let a = r.destroy.bind(r);
 			r.destroy = (t) => {
-				a(t), w(e);
-			}, F(!0), L(i), c && (r.play(), N(!0));
+				a(t), I(e, d);
+			}, P(!0), R(i), c && (r.play(), M(!0));
 		}).catch((e) => {
-			t === H.current && L(null), j.current?.(e instanceof Error ? e : Error(String(e)));
+			t === U.current && R(null), A.current?.(e instanceof Error ? e : Error(String(e)));
 		}), () => {
-			n = !0, t === H.current && (T.current?.destroy(), T.current = null);
+			n = !0, t === U.current && (T.current?.destroy(), T.current = null);
 		};
 	}, [
 		e,
+		p,
+		c,
 		d,
-		c
+		f
 	]);
-	return r(x, () => ({
-		play: U,
-		pause: W,
-		toggle: G,
-		reset: K,
-		reload: q,
+	return r(C, () => ({
+		play: W,
+		pause: G,
+		toggle: K,
+		reset: q,
+		reload: J,
 		isPlaying: () => T.current?.isPlaying() ?? !1
 	}), [
-		U,
 		W,
 		G,
 		K,
-		q
-	]), n(() => J(), [J, R]), /* @__PURE__ */ s("div", {
+		q,
+		J
+	]), n(() => Y(), [Y, B]), /* @__PURE__ */ s("div", {
 		className: [
 			"gif-player",
 			l && "gif-player--show-controls",
-			f
+			m
 		].filter(Boolean).join(" "),
-		style: p,
+		style: h,
 		children: [
 			/* @__PURE__ */ o("canvas", {
-				ref: S,
+				ref: w,
 				className: "gif-player__media",
 				role: "img",
 				style: {
-					...m === void 0 ? {} : { width: m },
-					...h === void 0 ? {} : { height: h },
-					...P ? {} : { visibility: "hidden" }
+					...g === void 0 ? {} : { width: g },
+					..._ === void 0 ? {} : { height: _ },
+					...N ? {} : { visibility: "hidden" }
 				}
 			}),
-			u && I !== null && P && /* @__PURE__ */ o(B, {
-				stats: I,
-				canvasRef: S,
-				visible: P
+			u && L !== null && N && /* @__PURE__ */ o(X, {
+				stats: L,
+				canvasRef: w,
+				visible: N
 			}),
-			l && P && /* @__PURE__ */ o("div", {
+			l && N && /* @__PURE__ */ o("div", {
 				className: "gif-player__controls",
 				children: /* @__PURE__ */ o("button", {
 					type: "button",
 					className: "gif-player__btn",
-					onClick: G,
-					children: M ? /* @__PURE__ */ s("svg", {
+					onClick: K,
+					children: j ? /* @__PURE__ */ s("svg", {
 						viewBox: "0 0 24 24",
 						"aria-hidden": "true",
 						children: [/* @__PURE__ */ o("rect", {
@@ -790,6 +891,6 @@ var V = e(({ src: e, autoPlay: c = !0, showControls: l = !1, debug: u = !1, loop
 		]
 	});
 });
-V.displayName = "GifPlayer";
+Z.displayName = "GifPlayer";
 //#endregion
-export { V as GifPlayer, T as clearGifResourceCache, D as createGifController, A as formatGifLoadStats, j as formatLoadTimeMs, k as getGifLoadStatsView, O as getTotalLoadTimeMs };
+export { Z as GifPlayer, L as clearGifResourceCache, z as createGifController, w as setWorkerPoolSize };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { GifPlayer } from './components/GifPlayer';
 export type { GifPlayerComponent, GifPlayerProps, GifPlayerRef, } from './components/GifPlayer';
-export { createGifController, clearGifResourceCache, formatGifLoadStats, formatLoadTimeMs, getGifLoadStatsView, getTotalLoadTimeMs } from './utils';
-export type { CreateGifOptions, GifController, GifLoadStats, GifLoadStatsLine, GifLoadStatsMode, GifLoadStatsView } from './utils';
+export { clearGifResourceCache, createGifController, setWorkerPoolSize, } from './utils';
+export type { CreateGifOptions, GifController, GifLoadStats } from './utils';

package/dist/utils/fetchTiming.d.ts

@@ -0,0 +1 @@
+export declare function getResourceFetchMs(response: Response, fallbackMs: number): number;

package/dist/utils/gifResourceManager.d.ts

@@ -1,13 +1,15 @@
 import type { LoadedGif, GifLoadStats } from './types';
 interface LoadGifResourceOptions {
     skipPending?: boolean;
+    useWorker?: boolean;
+    workerConcurrency?: number;
 }
 interface LoadGifResult {
     gif: LoadedGif;
     stats: GifLoadStats;
 }
 export declare function loadGifResource(src: string, options?: LoadGifResourceOptions): Promise<LoadGifResult>;
-export declare function acquireGifResource(src: string): void;
-export declare function releaseGifResource(src: string): void;
+export declare function acquireGifResource(src: string, _useWorker?: boolean): void;
+export declare function releaseGifResource(src: string, _useWorker?: boolean): void;
 export declare function clearGifResourceCache(): void;
 export {};

package/dist/utils/gifWorkerPool.d.ts

@@ -0,0 +1,11 @@
+import type { LoadedGif } from './types';
+interface DecodeResult {
+    gif: LoadedGif;
+    decodeTimeMs: number;
+    queueWaitMs: number;
+}
+export declare const DEFAULT_WORKER_CONCURRENCY: number;
+export declare function clampWorkerConcurrency(size?: number): number;
+export declare function setWorkerPoolSize(size?: number): void;
+export declare function decodeGifInWorker(buffer: ArrayBuffer, concurrency?: number): Promise<DecodeResult>;
+export {};

package/dist/utils/index.d.ts

@@ -1,5 +1,4 @@
 export { createGifController } from './gifController';
-export { acquireGifResource, clearGifResourceCache, releaseGifResource } from './gifResourceManager';
-export { formatGifLoadStats, formatGifLoadStatsCompact, formatLoadTimeMs, getDebugDensity, getGifLoadStatsView, getTotalLoadTimeMs } from './loadStats';
-export type { GifLoadStatsLine, GifLoadStatsMode, GifLoadStatsView } from './loadStats';
+export { clearGifResourceCache } from './gifResourceManager';
+export { setWorkerPoolSize } from './gifWorkerPool';
 export type { CreateGifOptions, GifController, GifLoadStats } from './types';

package/dist/utils/loadStats.d.ts

@@ -1,5 +1,4 @@
 import type { GifLoadStats } from './types';
-export declare function getTotalLoadTimeMs(stats: GifLoadStats): number;
 export type GifLoadStatsMode = 'fresh' | 'pending' | 'cache';
 export interface GifLoadStatsLine {
     label: string;
@@ -11,8 +10,6 @@ export interface GifLoadStatsView {
     totalMs: number;
 }
 export declare function getGifLoadStatsView(stats: GifLoadStats): GifLoadStatsView;
-export declare function formatGifLoadStats(stats: GifLoadStats): string;
 export declare function formatLoadTimeMs(ms: number): string;
 export declare function getDebugDensity(width: number, height: number): 'compact' | 'medium' | 'full';
 export declare function formatGifLoadStatsCompact(stats: GifLoadStats): string;
-export declare function getGifLoadStatsLineLabel(line: GifLoadStatsLine, mode: GifLoadStatsMode): string;

package/dist/utils/types.d.ts

@@ -5,14 +5,14 @@ export interface LoadedGif {
     height: number;
 }
 export interface GifLoadStats {
-    /** 本次实际 fetch 耗时，仅 fresh 发起方有值 */
-    fetchTimeMs: number;
-    /** 本次实际 decode 耗时，仅 fresh 发起方有值 */
+    /** 浏览器侧实际网络/缓存读取耗时（Resource Timing） */
+    networkTimeMs: number;
+    /** Worker 池排队，或 pending 跟随方等待进行中的加载 */
+    queueWaitMs: number;
+    /** 本次实际 decode 耗时 */
     decodeTimeMs: number;
-    /** 等待进行中的 fetch 阶段，仅 pending */
-    pendingWaitFetchMs: number;
-    /** 等待进行中的 decode 阶段，仅 pending */
-    pendingWaitDecodeMs: number;
+    /** 墙钟总耗时（含主线程争用等未分项统计的等待） */
+    totalMs: number;
     fromCache: boolean;
     fromPending: boolean;
 }
@@ -23,6 +23,9 @@ export interface CreateGifOptions {
     onPause?: () => void;
     onLoaded?: (stats: GifLoadStats) => void;
     skipPending?: boolean;
+    useWorker?: boolean;
+    /** Worker 池并发数，仅 useWorker=true 时生效，默认 min(hardwareConcurrency, 4) */
+    workerConcurrency?: number;
 }
 export interface GifController {
     play: () => void;

package/dist/workers/gifDecode.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@libshub/gif-tools",
-  "version": "1.0.8",
-  "description": "",
+  "version": "1.0.9",
+  "description": "基于 Canvas 的 React GIF 播放组件，支持 Worker 解码、资源缓存与加载性能统计",
   "module": "./dist/gif-tools.es.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
@@ -55,4 +55,4 @@
   "dependencies": {
     "gifuct-js": "^2.1.2"
   }
-}
+}