{"id":11634,"date":"2021-06-09T14:13:09","date_gmt":"2021-06-09T14:13:09","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=11634"},"modified":"2024-02-16T10:48:44","modified_gmt":"2024-02-16T10:48:44","slug":"multithreading-web-apps","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=11634","title":{"rendered":"Multithreading (Web apps)"},"content":{"rendered":"

Types of Worker<\/strong><\/p>\n\n\n\n\n\n\n\n\n
Type<\/th>\nWorker<\/th>\n<\/tr>\n
Web Worker<\/th>\nService Worker<\/th>\n<\/tr>\n
Dedicated Worker<\/th>\nShared Worker<\/th>\n<\/tr>\n
Amount<\/th>\nMultiple per tab<\/td>\nOne per origin<\/td>\n<\/tr>\n
Scope<\/th>\nOne tab<\/td>\nOne origin<\/td>\nOne origin<\/td>\n<\/tr>\n
Lifetime<\/th>\nDepends on tab<\/td>\nDepends on tabs<\/td>\nDepends on browser<\/td>\n<\/tr>\n
Usage<\/th>\nParallelism<\/td>\nOffline experience,
Background sync,
Push notifications<\/td>\n<\/tr>\n<\/table>\n

They can’t access the DOM.<\/p>\n

\n

Example<\/strong> (Dedicated Worker)<\/p>\n

\r\n<html>\r\n  <head>\r\n    <script src="script.js"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <img src="https:\/\/media.giphy.com\/media\/lKKXOCVviOAXS\/giphy.gif"\/>\r\n    <p>Take a nap:\r\n      <button onclick="takeNapSync()">Sync<\/button>\r\n      <button onclick="takeNapAsync()">Async<\/button>\r\n    <\/p>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nconst napTimeInMs = 3000;\r\n\r\nvar worker = new Worker('worker.js');\r\nworker.onmessage = function(event) {\r\n  alert(event.data);\r\n}\r\n\r\nfunction sleep(timeInMs) {\r\n  var start = new Date().getTime();\r\n  var expire = start + timeInMs;\r\n  while (new Date().getTime() < expire) {}\r\n}\r\n\r\nfunction takeNapSync() { \/\/ Is blocking the UI-Thread\r\n  sleep(napTimeInMs);\r\n  alert("Nap done.");\r\n}\r\n\r\nfunction takeNapAsync() { \/\/ Isn't blocking the UI-Thread\r\n  worker.postMessage(napTimeInMs);\r\n}\r\n<\/pre>\n
\r\nfunction sleep(timeInMs) {\r\n  var start = new Date().getTime();\r\n  var expire = start + timeInMs;\r\n  while (new Date().getTime() < expire) {}\r\n}\r\n\r\nonmessage = function(event) {\r\n  sleep(event.data);\r\n  postMessage("Nap done.");\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Types of Worker Type Worker Web Worker Service Worker Dedicated Worker Shared Worker Amount Multiple per tab One per origin<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/11634"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11634"}],"version-history":[{"count":1,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/11634\/revisions"}],"predecessor-version":[{"id":16838,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/11634\/revisions\/16838"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11634"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}