{"id":13694902,"url":"https://github.com/berwin/time-slicing","last_synced_at":"2025-03-17T08:38:07.007Z","repository":{"id":41523160,"uuid":"162686717","full_name":"berwin/time-slicing","owner":"berwin","description":"Break down long tasks into smaller tasks, avoid blocking the main process.","archived":false,"fork":false,"pushed_at":"2019-05-18T09:39:54.000Z","size":7,"stargazers_count":107,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T21:48:36.950Z","etag":null,"topics":["time-slicing","web-performance"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/berwin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-21T08:18:21.000Z","updated_at":"2024-09-13T06:36:47.000Z","dependencies_parsed_at":"2022-08-10T02:35:31.973Z","dependency_job_id":null,"html_url":"https://github.com/berwin/time-slicing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berwin%2Ftime-slicing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berwin%2Ftime-slicing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berwin%2Ftime-slicing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berwin%2Ftime-slicing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/berwin","download_url":"https://codeload.github.com/berwin/time-slicing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243853655,"owners_count":20358454,"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","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":["time-slicing","web-performance"],"created_at":"2024-08-02T17:01:47.878Z","updated_at":"2025-03-17T08:38:06.710Z","avatar_url":"https://github.com/berwin.png","language":"JavaScript","readme":"# time-slicing\nBreak down long tasks into smaller tasks, avoid blocking the main process.\n\n## Introduce\n\nUsually synchronous code execution for more than 50 milliseconds is a long task.\n\nLong tasks will block the main thread, causing the page to jam, We have two solutions, Web worker and Time slicing.\n\nWe should use web workers as much as possible, but the web worker cannot access the DOM. So we need to split a long task into small tasks and distribute them in the macrotask queue.\n\nFor example：\n\n```javascript\nsetTimeout(_ =\u003e {\n  const start = performance.now()\n  while (performance.now() - start \u003c 1000) {}\n  console.log('done!')\n}, 5000)\n```\nThe browser will get stuck for one second after the code is executed for five seconds. \n\nWe can use the chrome developer tool to capture the performance of the code run.\n\n![](https://s3.amazonaws.com/media-p.slid.es/uploads/743702/images/5616444/long-task.png)\n\nNow, we use time-slicing to cut long tasks, the code is as follows:\n\n```javascript\nsetTimeout(ts(function* () {\n  const start = performance.now()\n  while (performance.now() - start \u003c 1000) {\n    yield\n  }\n  console.log('done!')\n}), 5000)\n```\nIn the code, we use the **yield** keyword to split the code and distribute the code in different macrotask queues.\n\nWe can use the chrome developer tool to capture the performance of the code run.\n\n![](https://s3.amazonaws.com/media-p.slid.es/uploads/743702/images/5616903/pasted-from-clipboard.png)\n\nFrom the figure we can see that the long task is gone, and replaced by a myriad of intensive small tasks.\n","funding_links":[],"categories":["JavaScript","目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberwin%2Ftime-slicing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fberwin%2Ftime-slicing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberwin%2Ftime-slicing/lists"}