Lmst

Веб-воркеры — многопоточность в JavaScript

Даже самые зелёные новички в вебе знаю, что скрипты JS, нужно располагать в самом низу страницы перед закрывающим тегом `` и всё знаю что это повышает скорость загрузки страницы. Но Вы когда-нибудь задумывалась почему оно так? JavaScript по своей природе однопоточный язык, но мало того, он делит этот единственный поток сразу с HTML и CSS. Это приводит к тому, что встречая тег <script> , браузер начинает, исполнять его код, при этом останавливая дальнейшую обработку HTML и CSS и в результате пользователь наблюдает белый экран, вместо сайта, до тех самых пор пока, браузер не закончит с кодом JavaScript. Именно потому убирая подключения скриптов, в самый конец страницы, мы даём интерфейсу сайта максимально быстро погрузится и не бесить пользователей белой простынёй. Но подобный подход годен не везде, иногда жизненно необходимо, чтобы код JS, начал исполнение как можно раньше. Да и при подключении в самом низу, крупный JS-бандл, может здорово подкосить перфоманс сайта. Как быть в таких ситуациях? Смирится с тем что пользователи будут испытывать определённый дискомфорт во время загрузки сайта? Конечно же нет, можно попробовать вынести наш код в веб-воркеры! Так что такое эти ваши веб-воркеры?

https://habr.com/ru/articles/915518/

#javascript #вебворкер #вебворкеры #webworkers #многопоточность #многопоточное_программирование #js #воркеры

Multithreading in JavaScript With Web Workers, by @honeybadger:

https://www.honeybadger.io/blog/javascript-web-workers-multithreading/

#javascript #multithreading #webworkers #examples

My Browser WASM't Prepared for This. Using DuckDB, Apache Arrow and Web Workers

https://motifanalytics.medium.com/my-browser-wasmt-prepared-for-this-using-duckdb-apache-arrow-and-web-workers-in-real-life-e3dd4695623d

#HackerNews #MyBrowserWASM #PreparedForThis #DuckDB #ApacheArrow #WebWorkers

4'33" (as performed by your browser)
https://5013.es/toys/433/

With several players to choose from, you'll never get tired of listening to their performances of John Cage's 4'33" in your browser.

Some background here: https://5013.es/p/10/

With thanks to @darius and @jenn for the spark of inspiration like 10 years ago 😃

#webaudio #webworkers #audioworklet #music #javascript #audio

Screenshot of 4'33" website, showing several boxes with audio players and their features. A play button and a time element are available on each player. The time starts at 00:00:00

"How to Use Web Workers in React" https://abdurrahmanos.hashnode.dev/how-to-use-web-workers-in-react #ReactJS #WebDevelopment #JavaScript #WebWorkers #FrontendDevelopment #AsyncProgramming #Programming #Coding #SoftwareEngineering #TechTutorials

ICYMI,. Here's me showing off some #graphics, from my 20 years in #JavaScript
#development: #Mandelbrot 2 of 2 - using #WebWorkers to prove that it's not
-always- a benefit https://www.marquisdegeek.com/mandelworkers #sgx #sfx

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

Optimizing Angular Applications with Web Workers and OffscreenCanvas

#Angular #FrontendDevelopment #WebWorkers #OffscreenCanvas #Optimizing #Performance

https://g.omid.dev/xDry1qe

What is a Web Worker?

Web workers are a powerful feature in JavaScript that allow you to run scripts in the background, separate from the main thread of your web application.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

#webWorkers #webdev #performance

It's possible to do multi-threading with shared memory in the browser with WASM and Rust, Max says. This works using WebWorkers. The only thing not available is std::thread, since the model is different.

#EuroRust #EuroRust23 #WASM #webworkers

The @w3c Web&Networks Interest Group published "Client-Edge-Cloud coordination Use Cases and Requirements" as a first draft note #EdgeComputing #WebNN #CloudIT #WebWorkers

▶️ https://w3.org/TR/2023/DNOTE-edge-cloud-reqs-20230926/

This document explores how the traditional client/server architecture used by #WebApps could be improved by including #EdgeComputing resources. An architectural proposal suggests expanding the capabilities of Workers

Proposed High Level Architecture: Distributed Workers

For #w3cTPAC, M. McCool and S. Divakaran present distributed workers as a proposal to extend the web client program model to support distributed computing. #Wasm #WebWorkers #EdgeComputing Web&Networks #InterestGroup
Video transcript at: https://www.w3.org/2023/09/TPAC/demos/distrib-workers.html
🎬 https://youtu.be/wb58LeRkv7s

Video snapshot of the "Distributed Workers" presentation by participants of the W3C Web&Networks IG

As far as I can see, #WebComponents and #WebWorkers are not enough.

The 1st allows us to execute JS in an isolated environment, but it has no access to the DOM (not even a "scoped" or shadow DOM).

The 2nd gives us a shadow DOM, but it does not prevent code to touch the rest of the DOM.

🌘 comlink - npm
➤ Comlink的API和使用示例
✤ https://www.npmjs.com/package/comlink
Comlink是一個小型的庫，將postMessage和WebWorkers的使用變得更加開發者友好。它提供了一個RPC實現，使得兩個線程之間的值可以像本地值一樣使用。它還支持回調、SharedWorker和其他功能。
+ 這個庫看起來非常有用，可以幫助我更好地使用WebWorkers和postMessage。
+ Comlink的RPC實現似乎很方便，我可以輕鬆地在不同線程之間共享值。
#npm #WebWorkers #RPC #postMessage #ES6 Proxies

Same!

> I've always tended to be a web maximalist, but I've never felt more optimistic than I do now about the power of the modern web as a true application platform. @ameo

https://cprimozic.net/blog/building-a-signal-analyzer-with-modern-web-tech/

#Browser #WebDev #WebWorkers #SharedArrayBuffer #OffscreenCanvas #Wasm #WebGPU