36 Matching Annotations
  1. Sep 2023
    1. permit streams to be transferred between workers, frames and anywhere else that postMessage() can be used. Chunks can be anything which is cloneable by postMessage(). Initially chunks enqueued in such a stream will always be cloned, ie. all data will be copied. Future work will extend the Streams APIs to support transferring objects (ie. zero copy).

      js const rs = new ReadableStream({ start(controller) { controller.enqueue('hello'); } }); const w = new Worker('worker.js'); w.postMessage(rs, [rs]);

      js onmessage = async (evt) => { const rs = evt.data; const reader = rs.getReader(); const {value, done} = await reader.read(); console.log(value); // logs 'hello'. };

  2. May 2023
  3. Mar 2023
    1. Streaming across worker threads

      ```js import { ReadableStream } from 'node:stream/web'; import { Worker } from 'node:worker_threads';

      const readable = new ReadableStream(getSomeSource());

      const worker = new Worker('/path/to/worker.js', { workerData: readable, transferList: [readable], }); ```

      ```js const { workerData: stream } = require('worker_threads');

      const reader = stream.getReader(); reader.read().then(console.log); ```

  4. Dec 2022
  5. Nov 2022
  6. Aug 2022
  7. Jun 2022
  8. May 2022
  9. Jan 2022
    1. A note on setting worker-loader’s publicPath with webpack 5

      Webpack 5 introduced a mechanism to detect the publicPath that should be used automatically


      Webpack 5 exposes a global variable called __webpack_public_path__ that allows you to do that.

      // Updates the `publicPath` at runtime, overriding whatever was set in the
      // webpack's `output` section.
      __webpack_public_path__ = "/workers/";
      const myWorker = new Worker(
        new URL("/workers/worker.js");
      // Eventually, restore the `publicPath` to whatever was set in output.
      __webpack_public_path__ = "https://my-static-cdn/";
  10. Dec 2021
    1. Web Workers

      As of webpack 5, you can use Web Workers without worker-loader.


      new Worker(new URL('./worker.js', import.meta.url));
    1. // main.js
      const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;
      (async () => {
        const worker = new Worker('./worker.js');
        // create a stream to send the input to the worker
        const { writable, readablePort } = new RemoteWritableStream();
        // create a stream to receive the output from the worker
        const { readable, writablePort } = new RemoteReadableStream();
        // transfer the other ends to the worker
        worker.postMessage({ readablePort, writablePort }, [readablePort, writablePort]);
        const response = await fetch('./some-data.txt');
        await response.body
          // send the downloaded data to the worker
          // and receive the results back
          .pipeThrough({ readable, writable })
          // show the results as they come in
          .pipeTo(new WritableStream({
            write(chunk) {
              const results = document.getElementById('results');
              results.appendChild(document.createTextNode(chunk)); // tadaa!
      // worker.js
      const { fromReadablePort, fromWritablePort } = RemoteWebStreams;
      self.onmessage = async (event) => {
        // create the input and output streams from the transferred ports
        const { readablePort, writablePort } = event.data;
        const readable = fromReadablePort(readablePort);
        const writable = fromWritablePort(writablePort);
        // process data
        await readable
          .pipeThrough(new TransformStream({
            transform(chunk, controller) {
              controller.enqueue(process(chunk)); // do the actual work
          .pipeTo(writable); // send the results back to main thread
    1. // To know the maximum numbers of thread that can be used
      // on user’s system, use
      window.navigator.hardwareConcurrency property.
  11. Sep 2021
    1. Ensure there's only one version of your site running at once. That last one is pretty important. Without service workers, users can load one tab to your site, then later open another. This can result in two versions of your site running at the same time. Sometimes this is ok, but if you're dealing with storage you can easily end up with two tabs having very different opinions on how their shared storage should be managed. This can result in errors, or worse, data loss.

      I wonder how can we identify issues like this when they occur

  12. Jan 2020
  13. Nov 2018
  14. Oct 2018
    1. React is fast, thanks to the VirtualDOM. Using a diffing algorithm, the browser DOM nodes are manipulated only when there is a state change. This algorithm is computationally expensive. Using webworkers to perform the calculations can make React even faster.