{"id":24161633,"url":"https://github.com/zcaceres/webworker-wasm","last_synced_at":"2025-10-11T12:32:22.440Z","repository":{"id":46352769,"uuid":"410592896","full_name":"zcaceres/webworker-wasm","owner":"zcaceres","description":"Exploring optimization with Webworkers and WASM.","archived":false,"fork":false,"pushed_at":"2021-10-21T21:30:40.000Z","size":55130,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-02T04:43:23.306Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zcaceres.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-26T15:43:39.000Z","updated_at":"2021-10-21T21:30:43.000Z","dependencies_parsed_at":"2022-09-24T14:10:58.237Z","dependency_job_id":null,"html_url":"https://github.com/zcaceres/webworker-wasm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zcaceres/webworker-wasm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcaceres%2Fwebworker-wasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcaceres%2Fwebworker-wasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcaceres%2Fwebworker-wasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcaceres%2Fwebworker-wasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcaceres","download_url":"https://codeload.github.com/zcaceres/webworker-wasm/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcaceres%2Fwebworker-wasm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007167,"owners_count":26084247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-12T17:17:34.711Z","updated_at":"2025-10-11T12:32:22.418Z","avatar_url":"https://github.com/zcaceres.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ideas for feature\n- spinning image to show whether the UI thread is blocked\n- Tasks:\n    - real time dictionary search\n    - static dictionary search\n    - dictionary sorting\n    - sorting a million random numbers\n\n\n# Optimization with WASM and WebAssembly\n\n## To Run\nTo run the samples below, you [must launch Chrome with the `--allow-file-access-from-files` flag](https://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode).\n\nRun this on OSX.\n```sh\n/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --allow-file-access-from-files\n```\n\n## baseline.html - Vanilla JS\nOur baseline is atrocious. We never see our timer running because as soon as begin to process the data, the single thread of Javascript is blocked. So although it's very slow, we can't even calculate how much time has passed.\n\nThis version takes about X seconds.\n\n## promises.html - Promisified JS\nPromises offer the illusion of multi-threaded processes. But the compute-intensive task is equally bad with promises because the process of sorting a million numbers takes so long that, once it has begun, the thread stays blocked. There's no escaping the single-thread!\n\nThis version takes about X seconds, too.\n\n## webworker-js.html - WebWorker with JS\nLet's try a Javascript WebWorker. WebWorkers do not have access to the DOM. Think of them almost like a remote server, where you're making requests through the `window.postMessage` interface and waiting to hear back an unknown amount of time in the future.\n\nThe JS WebWorker approach means we can refactor out our compute-intensive task (generating the numbers and sorting them) and leave the UI-oriented tasks (such as updating the timer) in the main JS thread.\n\n\n\nWebWorkers have a bit of overhead on startp. So this version is actually *slower* than the last two! It takes about X seconds.\n\nBut, the UI stays responsive since we don't block the main thread. This version *feels* faster (a good lesson in UI design). But it isn't. We are still doing the same heavy computation in Javascript. It's just as slow, but now in a background thread with the overhead of a WebWorker.\n\n## webworker-rust.html - WebWorker with Rust\nLet's now rewrite out functionality in Rust and compile it to WebAssembly. We'll then load it in a background worker as in the last example.\n\nWe export one function to Javascript from our WASM bundle. This is `generate_and_sort()`. This function is called by our JS by run inside our WebAssembly bundle. It also generates and sorts a million numbers, adhering as closely to the original JS implementation as I could.\n\n## Conclusion\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcaceres%2Fwebworker-wasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcaceres%2Fwebworker-wasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcaceres%2Fwebworker-wasm/lists"}