web-worker 相关问题

我在 web worker 中使用以下代码来安排事件以精确的 10 毫秒间隔发生。这似乎适用于除任何 iOS 浏览器之外的所有浏览器。（桌面 safari 很好。） <question vote="3"> <div> </div> <p>我在 web worker 中使用以下代码来安排事件以 10 毫秒的间隔准确发生。</p> <p>这似乎适用于除任何 iOS 浏览器之外的所有浏览器。（桌面 safari 很好。）</p> <pre><code><script id="masterClock" type="javascript/worker"> let onmessage = function (event) { let delay = 10; // milliseconds let time = Date.now(); while (Date.now() < time + delay) { }; // waits 10ms increments in all browsers except mobile Safari postMessage({data: []}); }; </script> </code></pre> <p>任何建议/解释表示赞赏！</p> <p>编辑：</p> <ul> <li>我尝试使用基于 <pre><code>setTimeout</code></pre> 的计时器，但它太不精确了，对 iOS 根本没有帮助。</li> <li>我尝试了一个基于<pre><code>requestAnimationFrame</code></pre>的替代计时器，但它在iOS中也不一致。</li> <li>我考虑过使用<pre><code>AudioContext</code></pre>，但我不想预先安排所有事件，因为用户在进行时与它们进行交互；但也许它可以作为计时器？</li> </ul> </question> <answer tick="false" vote="0"> <p>由于 iOS 设备可能具有电源管理功能，可以在后台或屏幕关闭时限制或降低 JavaScript 执行的优先级（如 <a href="https://www.reddit.com/r/apple/comments/49ieb6/safari_deprioritizing_javascript_and_affecting_a/" rel="nofollow noreferrer">this thread</a> 所示），您可能需要考虑另一种后台任务机制。</p> <p>尝试一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" rel="nofollow noreferrer">Web API Worker</a> 它将调用您的 javascript 循环：</p> <pre><code><script> const worker = new Worker('worker.js'); worker.onmessage = function (event) { // Handle the message from the worker console.log('Message received from worker:', event.data); }; </script> </code></pre> <p>还有你的剧本：</p> <pre><code>let delay = 10; // milliseconds function timer() { let startTime = Date.now(); while (Date.now() < startTime + delay) {} postMessage({data: []}); setTimeout(timer, delay); } timer(); </code></pre> <hr/> <p>但如果问题仍然存在，那么是的，Audio worker 更精确。由于您需要保持交互的进行，请考虑一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet" rel="nofollow noreferrer">Audio Worklet API</a>，它用于提供自定义音频处理脚本，这些脚本 <em> 在单独的线程</em> 中执行以提供非常低延迟的音频处理。</p> <p>正如<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor#processing_audio" rel="nofollow noreferrer">文档所建议的</a>，您需要：</p> <ol> <li>扩展<pre><code>AudioWorkletProcessor</code></pre>类（参见“<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor#deriving_classes" rel="nofollow noreferrer">派生类</a>”部分）并在其中提供您自己的<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor/process" rel="nofollow noreferrer"><pre><code>process()</code></pre></a>方法；</li> <li>使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope/registerProcessor" rel="nofollow noreferrer"><pre><code>AudioWorkletGlobalScope.registerProcessor()</code></pre></a>方法注册处理器；</li> <li>使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worklet/addModule" rel="nofollow noreferrer"><pre><code>addModule()</code></pre></a> 方法在音频上下文的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/audioWorklet" rel="nofollow noreferrer"><pre><code>audioWorklet</code></pre></a> 属性上加载文件；</li> <li>基于处理器创建一个AudioWorkletNode。处理器将由 <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletNode" rel="nofollow noreferrer"><pre><code>AudioWorkletNode</code></pre></a> 构造函数在内部实例化。</li> </ol> <p>意思是创造一个<pre><code>audio-worklet-processor.js</code></pre>：</p> <pre><code>class TimerProcessor extends AudioWorkletProcessor { static get parameterDescriptors() { return [{ name: 'delay', defaultValue: 10 }]; } constructor() { super(); this.timer = 0; } process(inputs, outputs, parameters) { const delay = parameters.delay[0] || 10; this.timer += 128 / sampleRate * 1000; // 128 is the default buffer size if (this.timer >= delay) { this.timer -= delay; this.port.postMessage({ data: [] }); } return true; // Keep the processor alive } } registerProcessor('timer-processor', TimerProcessor); </code></pre> <p>您可以从您的<pre><code>worker.js</code></pre>注册它：</p> <pre><code>(async () => { // Load the audio worklet processor const audioContext = new AudioContext(); await audioContext.audioWorklet.addModule('audio-worklet-processor.js'); // Create the audio worklet node and connect it to the destination const timerNode = new AudioWorkletNode(audioContext, 'timer-processor'); timerNode.connect(audioContext.destination); // Set up a message listener timerNode.port.onmessage = (event) => { // Handle the message from the audio worklet processor console.log('Message received from audio worklet processor:', event.data); }; })(); </code></pre> <p>然后打电话给您的工人：</p> <pre><code><script> const worker = new Worker('worker.js'); worker.onmessage = function (event) { // Handle the message from the worker console.log('Message received from worker:', event.data); }; </script> </code></pre> </answer> </body></html>

javascript ios timer mobile-safari web-worker

回答 0 投票 0

仅在 Mobile Safari 中不一致的 10ms setTimeout

我有一个网络应用程序使用 10ms，重复 setTimeout 作为主时钟。这似乎适用于除移动版 Safari 之外的所有浏览器。桌面野生动物园很好。 setTimeout 在 web worker 中，但是

javascript settimeout mobile-safari web-worker audiocontext

回答 0 投票 0

Bitmaprenderer 是否应该在网络工作者中的 OffscreenCanvas 上工作？

我正在尝试在网络工作者中使用 OffscreenCanvas 并尝试各种策略。在我的原始代码中，我以

javascript html canvas web-worker

回答 1 投票 0

Chrome Web Workers 停止运行

我正在运行一个 setTimeout 计时器来更新我们的 JWT 令牌。大多数时候它工作正常，但 Chrome 似乎正在限制 setTimeout。在做了一些研究之后，我将其更改为使用 hacktimer ...

javascript google-chrome timer settimeout web-worker

回答 0 投票 0

如何从 webpack 中的内存缓存加载 Web Worker

我使用 create-react-app 创建了我的应用程序，它使用 [email protected]。我有一个网络工作者，按照 https://webpack.js.org/guides/web-workers/ 上的指导如下加载导出函数

webpack web-worker

回答 0 投票 0

JavaScript Web Worker 关闭（）不工作

我的网络工作者反复调用 close() 但没有停止。这是工人的脚本： self.onmessage = 函数 (e) { 关闭（）; 对于（e.data 中的 c）{ postMessage(e.data[c]); c...

javascript web-worker

回答 1 投票 0

在构建中包含 GeoTiff.js 和 Web Worker 时出现 Rollup/Vite 构建错误

我正在使用 Web Worker 对 GeoTiff 文件进行计算。我从 CalculateRidge.ts 中调用函数 getRidgePoints，这个函数创建了一个工作人员，将消息发布给工作人员，然后

typescript vite web-worker rollupjs geotiff

回答 1 投票 0

用 Typescript 编写的 Web Worker 不会被构建/编译（使用 vite）到 Javascript

我通过以下方式在打字稿中使用 Web Worker： const url = new URL("src/lib/Functions/CalculateRidge.ts", import.meta.url); const worker = new Worker(url, { type: 'module' }) 在

javascript typescript svelte vite web-worker

回答 1 投票 0

如何在 Webpack 5 中使用 Web Workers？

我一直在努力寻找在使用 Webpack 5 和打字稿的同时使用 Web Workers 的最佳方法。我尝试按照文档进行操作，但是，当我尝试创建 Web Worker 时，我遇到了......

javascript webpack webpack-dev-server web-worker

回答 2 投票 0

Vite Web Workers 在开发服务器上失败

你好我正在将代码移动到我的 p5.js 项目上的网络工作线程。我让它工作，但只有当我构建和预览它时（yarn build && yarn preview）。当使用 vite dev server (yarn ...

vite web-worker

回答 0 投票 0

Web Workers - 如何导入模块

我正在使用 ES2015 导入/导出模块。在我的工作文件中，当我尝试像往常一样导入函数时：工人.js 从“./abc.js”导入{a，b，c}；我收到错误：语法错误：导入