{"id":345866,"date":"2021-08-04T16:44:06","date_gmt":"2021-08-04T23:44:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=345866"},"modified":"2021-08-04T16:44:09","modified_gmt":"2021-08-04T23:44:09","slug":"the-state-of-web-workers-in-2021","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-state-of-web-workers-in-2021\/","title":{"rendered":"The State Of Web Workers In 2021"},"content":{"rendered":"\n

You gotta appreciate the tenacity of Surma. He’s been advocating for Web Workers as a path forward to better-feeling websites for a lot of years now<\/a>. He’s at it again<\/a> making sure we all understand the landscape:<\/p>\n\n\n\n

[…] regardless of where you look, multithreading is used everywhere<\/em>. iOS empowers developers to easily parallelize code using Grand Central Dispatch<\/a>, Android does this via their new, unified task scheduler WorkManager<\/a> and game engines like Unity have job systems<\/a>. The reason for any of these platforms to not only support multithreading, but making it as easy as possible is always the same: Ensure your app feels<\/em> great.<\/p>Surma<\/em>, “The State Of Web Workers In 2021”<\/a><\/cite><\/blockquote>\n\n\n\n

So pretty much every platform has its own version of multi-threading, including the web. It’s just that on the web we have to sort of “fight” against the single-threaded nature of JavaScript by using Web Workers (which are “universally supported” if you’re wondering about that). The question is: use them how<\/em> and for what<\/em>? For the latter, Surma shows off an example of a game where “the entire app state and game logic is running in a worker.” For the former, the helper library comlink<\/a> looks like a big reduction in toil.<\/p>\n\n\n\n

Personally, I wish popular tooling would just kinda… do it. I don’t know what that really looks like, but it kinda feels like developer outreach isn’t really moving the needle on this. What if popular tooling like Apollo<\/a> \u2014 which is in charge of a lot of “app state” \u2014 were to magically handle all of that off the main thread. Does that make sense? Is it possible?<\/p>\n","protected":false},"excerpt":{"rendered":"

You gotta appreciate the tenacity of Surma. He’s been advocating for Web Workers as a path forward to better-feeling websites for a lot of years now. He’s at it again making sure we all understand the landscape: […] regardless of where you look, multithreading is used everywhere. iOS empowers developers to easily parallelize code using Grand Central […]<\/p>\n","protected":false},"author":3,"featured_media":345869,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Surma: The State Of Web Workers In 2021","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[432,1093,5738],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/6-web-workers-in-2021.png?fit=2000%2C837&ssl=1","jetpack-related-posts":[{"id":374731,"url":"https:\/\/css-tricks.com\/the-difference-between-web-sockets-web-workers-and-service-workers\/","url_meta":{"origin":345866,"position":0},"title":"The Difference Between Web Sockets, Web Workers, and Service Workers","date":"November 3, 2022","format":false,"excerpt":"Web Sockets, Web Workers, Service Workers\u2026 these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there\u2019s a good chance you need to look up what they mean.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/service-web-worker-socket.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334247,"url":"https:\/\/css-tricks.com\/progressive-web-apps-in-2021\/","url_meta":{"origin":345866,"position":1},"title":"Progressive Web Apps in 2021","date":"February 11, 2021","format":false,"excerpt":"Maximiliano Firtman has a look at PWAs this year, including trying to get a bead on how widespread they are: At the end of 2020, approximately\u00a01% of websites included a Service Worker, and 2.2% had an installable Web App Manifest file. Remember that some platforms -such as Safari on iOS\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/cover.png?fit=1000%2C467&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295481,"url":"https:\/\/css-tricks.com\/off-the-main-thread\/","url_meta":{"origin":345866,"position":2},"title":"“Off The Main Thread”","date":"September 10, 2019","format":false,"excerpt":"JavaScript is what they call \"single-threaded.\" As Brian Barbour puts it: This means it has one call stack and one memory heap. We all feel a symptom of that regularly in the form of performance jank and non-interactivity on elements or entire sites. If we give JavaScript lots of jobs\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/timeline-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359055,"url":"https:\/\/css-tricks.com\/add-a-service-worker-to-your-site\/","url_meta":{"origin":345866,"position":3},"title":"Add a Service Worker to Your Site","date":"December 28, 2021","format":false,"excerpt":"One of the best things you can do for your website in 2022 is add a service worker, if you don't have one in place already. Service workers give your website super powers. Today, I want to show you some of the amazing things that they can do, and give\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/cog-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":22103,"url":"https:\/\/css-tricks.com\/intro-to-web-workers\/","url_meta":{"origin":345866,"position":4},"title":"Intro to Web Workers","date":"June 19, 2013","format":false,"excerpt":"Brian Cooksey goes from \"I don't really know what Web Workers are\" to \"OK I totally get Web Workers.\" on one short article. ...they are scripts that run in their own background thread. Independence from the regular JavaScript event loop means that a worker can churn away at something for\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339781,"url":"https:\/\/css-tricks.com\/is-css-a-programming-language\/","url_meta":{"origin":345866,"position":5},"title":"Is CSS a Programming Language?","date":"May 7, 2021","format":false,"excerpt":"I have a real distaste for this question. It might seem like a fun question to dig into on the surface, but the way it enters public discourse rarely seems to be in good faith. There are ulterior motives at play involving respect, protective emotions, and desires to break or\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/6-web-workers-in-2021.png?fit=1024%2C429&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345866"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345866"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345866\/revisions"}],"predecessor-version":[{"id":346146,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345866\/revisions\/346146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345869"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=345866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}