[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":334,"topic:html-web-workers-background-processing":360},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,26,30,34,38,42],{"id":9,"title":23,"slug":24,"order_index":9,"cornerstone":25,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",false,{"id":27,"title":28,"slug":29,"order_index":9,"cornerstone":25,"reading_time_minutes":27},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":25,"reading_time_minutes":27},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":25,"reading_time_minutes":27},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":25,"reading_time_minutes":27},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":25,"reading_time_minutes":27},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":27,"name":47,"slug":48,"order_index":27,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":25,"reading_time_minutes":27},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":25,"reading_time_minutes":27},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":25,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":25,"reading_time_minutes":27},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":25,"reading_time_minutes":27},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":25,"reading_time_minutes":27},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":25,"reading_time_minutes":27},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":25,"reading_time_minutes":27},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":25,"reading_time_minutes":27},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":25,"reading_time_minutes":27},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":25,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":25,"reading_time_minutes":27},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":25,"reading_time_minutes":27},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":25,"reading_time_minutes":27},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":25,"reading_time_minutes":27},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":25,"reading_time_minutes":27},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":25,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":25,"reading_time_minutes":27},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":25,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":25,"reading_time_minutes":27},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":25,"reading_time_minutes":27},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":25,"reading_time_minutes":27},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":25,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":25,"reading_time_minutes":27},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":25,"reading_time_minutes":27},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":25,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":25,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":25,"reading_time_minutes":27},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":25,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":25,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":25,"reading_time_minutes":27},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":25,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":25,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":25,"reading_time_minutes":27},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":25,"reading_time_minutes":27},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":25,"reading_time_minutes":27},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":25,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":25,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":25,"reading_time_minutes":27},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":25,"reading_time_minutes":27},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":25,"reading_time_minutes":27},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":25,"reading_time_minutes":27},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":25,"reading_time_minutes":27},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":25,"reading_time_minutes":27},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":25,"reading_time_minutes":27},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":25,"reading_time_minutes":27},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":25,"reading_time_minutes":27},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":25,"reading_time_minutes":27},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":25,"reading_time_minutes":27},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":25,"reading_time_minutes":27},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":25,"reading_time_minutes":27},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":25,"reading_time_minutes":27},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":27,"cornerstone":25,"reading_time_minutes":27},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":25,"reading_time_minutes":27},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":25,"reading_time_minutes":27},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":25,"reading_time_minutes":27},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":25,"reading_time_minutes":27},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":25,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":25,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"data":335},[336,341,345,350,355],{"name":337,"slug":338,"description":339,"post_count":27,"subcategories":340},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":342,"description":343,"post_count":27,"subcategories":344},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":346,"slug":347,"description":348,"post_count":9,"subcategories":349},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":351,"slug":352,"description":353,"post_count":9,"subcategories":354},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":356,"slug":357,"description":358,"post_count":9,"subcategories":359},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":361},{"id":275,"title":276,"slug":277,"content":362,"course":363,"subcategory":364,"author":365,"reading_time_minutes":27,"cornerstone":25,"schema_type":371,"faq_json":5,"video_url":5,"canonical_url":372,"meta_title":373,"meta_description":374,"og_image":5,"toc_json":375,"code_examples":403,"quiz":5,"exercises":412,"published_at":5,"updated_at":419,"prev":420,"next":421},"\u003Ch2 id=\"html-web-workers-background-processing\">HTML Web Workers: Background Processing\u003C\u002Fh2>\u003Cp>JavaScript normally runs on a single main thread, which also handles rendering and user interaction — so a slow, CPU-heavy calculation can freeze the entire page. Web Workers solve this by running a separate JavaScript file on its own background thread, completely independent of the UI, so heavy work no longer blocks scrolling, clicking, or animations.\u003C\u002Fp>\u003Ch3 id=\"how-web-workers-communicate\">How Web Workers Communicate\u003C\u002Fh3>\u003Cp>A worker cannot directly access the DOM, \u003Ccode>window\u003C\u002Fcode>, or the main thread's variables. Instead, the main script and the worker communicate exclusively by sending messages back and forth using \u003Ccode>postMessage()\u003C\u002Fcode> and listening with the \u003Ccode>onmessage\u003C\u002Fcode> event handler.\u003C\u002Fp>\u003Ch3 id=\"creating-a-worker\">Creating a Worker\u003C\u002Fh3>\u003Cp>A worker is created by pointing the \u003Ccode>Worker\u003C\u002Fcode> constructor at a separate JavaScript file. That file runs in its own isolated global scope, often referred to as \u003Ccode>self\u003C\u002Fcode> inside the worker.\u003C\u002Fp>\u003Ch3 id=\"sending-and-receiving-data\">Sending and Receiving Data\u003C\u002Fh3>\u003Cp>Data passed through \u003Ccode>postMessage()\u003C\u002Fcode> is copied (not shared by reference) between the threads, using an algorithm called structured cloning, so both sides can safely use the same data without race conditions.\u003C\u002Fp>\u003Ch3 id=\"terminating-a-worker\">Terminating a Worker\u003C\u002Fh3>\u003Cp>Once a worker's job is done, calling \u003Ccode>worker.terminate()\u003C\u002Fcode> from the main thread (or \u003Ccode>self.close()\u003C\u002Fcode> from inside the worker) shuts it down and frees its resources.\u003C\u002Fp>\u003Ch3 id=\"when-to-use-web-workers\">When to Use Web Workers\u003C\u002Fh3>\u003Cul>\n\u003Cli>Heavy mathematical calculations (image\u002Fvideo processing, encryption, large dataset sorting).\u003C\u002Fli>\n\u003Cli>Parsing very large JSON or CSV files without freezing the UI.\u003C\u002Fli>\n\u003Cli>Real-time data processing, such as live chart updates from a large stream.\u003C\u002Fli>\n\u003Cli>Any task that would otherwise cause visible lag or a \"page not responding\" warning.\u003C\u002Fli>\n\u003C\u002Ful>\u003Ch3 id=\"limitations\">Limitations\u003C\u002Fh3>\u003Cp>No DOM access, no access to most main-thread-only APIs (like \u003Ccode>window\u003C\u002Fcode> or \u003Ccode>document\u003C\u002Fcode>), and each worker has some memory and startup overhead — so workers are best reserved for genuinely expensive tasks, not everyday code.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F\u002F main.js - the main page script\nconst worker = new Worker('worker.js');\n\nworker.postMessage({ command: 'start', number: 45 });\n\nworker.onmessage = (event) => {\n  console.log('Result from worker:', event.data);\n};\n\nworker.onerror = (error) => {\n  console.error('Worker error:', error.message);\n};\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F\u002F worker.js - runs on a separate background thread\nself.onmessage = function (event) {\n  const { command, number } = event.data;\n\n  if (command === 'start') {\n    const result = fibonacci(number);\n    self.postMessage(result);\n  }\n};\n\nfunction fibonacci(n) {\n  return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":10,"slug":11},{"name":259,"slug":260},{"slug":366,"display_name":367,"job_title":5,"short_bio":5,"expertise_tags":368,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":369,"posts":370},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-web-workers-background-processing","HTML Web Workers: Background JavaScript Processing","Learn the HTML5 Web Workers API — running JavaScript on a background thread, message passing, and when to use workers, with practical code examples.",[376],{"id":277,"text":377,"level":27,"children":378},"HTML Web Workers: Background Processing",[379,383,387,391,395,399],{"id":380,"text":381,"level":31,"children":382},"how-web-workers-communicate","How Web Workers Communicate",[],{"id":384,"text":385,"level":31,"children":386},"creating-a-worker","Creating a Worker",[],{"id":388,"text":389,"level":31,"children":390},"sending-and-receiving-data","Sending and Receiving Data",[],{"id":392,"text":393,"level":31,"children":394},"terminating-a-worker","Terminating a Worker",[],{"id":396,"text":397,"level":31,"children":398},"when-to-use-web-workers","When to Use Web Workers",[],{"id":400,"text":401,"level":31,"children":402},"limitations","Limitations",[],[404,409],{"id":405,"language":406,"code":407,"is_editable":408},142,"javascript","\u002F\u002F main.js - the main page script\nconst worker = new Worker('worker.js');\n\nworker.postMessage({ command: 'start', number: 45 });\n\nworker.onmessage = (event) => {\n  console.log('Result from worker:', event.data);\n};\n\nworker.onerror = (error) => {\n  console.error('Worker error:', error.message);\n};",true,{"id":410,"language":406,"code":411,"is_editable":408},143,"\u002F\u002F worker.js - runs on a separate background thread\nself.onmessage = function (event) {\n  const { command, number } = event.data;\n\n  if (command === 'start') {\n    const result = fibonacci(number);\n    self.postMessage(result);\n  }\n};\n\nfunction fibonacci(n) {\n  return n \u003C= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);\n}",[413],{"id":267,"title":414,"slug":415,"prompt":416,"starter_code":417,"expected_output":418,"language":406,"order_index":9},"Offload a Heavy Loop to a Worker","offload-a-heavy-loop-to-a-worker","Write a worker.js file that receives a number N via postMessage, sums all integers from 1 to N in a loop, and sends the total back to the main thread. Then write the main-thread code that creates the worker, sends N = 1000000, and logs the result.","\u002F\u002F worker.js\nself.onmessage = function(event) {\n  \u002F\u002F TODO: sum 1 to event.data and postMessage the result\n};\n\n\u002F\u002F main.js\nconst worker = new Worker('worker.js');\n\u002F\u002F TODO: send 1000000 to the worker and log the result","The worker computes the sum from 1 to 1,000,000 and the main thread logs the returned total.","2026-09-27T18:50:49+00:00",{"id":271,"slug":273,"title":272},{"id":279,"slug":281,"title":280}]