mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Joe Martin (Crowdstaffing)
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
79 lines
2.6 KiB
Markdown
79 lines
2.6 KiB
Markdown
# Background processing using web workers
|
|
|
|
[Web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) lets you run CPU-intensive computations in a background thread, freeing the main thread to update the user interface.
|
|
If you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
The CLI does not support running Angular itself in a web worker.
|
|
|
|
</div>
|
|
|
|
## Adding a web worker
|
|
|
|
To add a web worker to an existing project, use the Angular CLI `ng generate` command.
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
ng generate web-worker <location>
|
|
|
|
</code-example>
|
|
|
|
You can add a web worker anywhere in your application.
|
|
For example, to add a web worker to the root component, `src/app/app.component.ts`, run the following command.
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
ng generate web-worker app
|
|
|
|
</code-example>
|
|
|
|
The command performs the following actions.
|
|
|
|
1. Configures your project to use web workers, if it isn't already.
|
|
1. Adds the following scaffold code to `src/app/app.worker.ts` to receive messages.
|
|
|
|
<code-example language="typescript" header="src/app/app.worker.ts">
|
|
|
|
addEventListener('message', ({ data }) => {
|
|
const response = `worker response to ${data}`;
|
|
postMessage(response);
|
|
});
|
|
|
|
</code-example>
|
|
|
|
1. Adds the following scaffold code to `src/app/app.component.ts` to use the worker.
|
|
|
|
<code-example language="typescript" header="src/app/app.component.ts">
|
|
|
|
if (typeof Worker !== 'undefined') {
|
|
// Create a new
|
|
const worker = new Worker(new URL('./app.worker', import.meta.url));
|
|
worker.onmessage = ({ data }) => {
|
|
console.log(`page got message: ${data}`);
|
|
};
|
|
worker.postMessage('hello');
|
|
} else {
|
|
// Web workers are not supported in this environment.
|
|
// You should add a fallback so that your program still executes correctly.
|
|
}
|
|
|
|
</code-example>
|
|
|
|
After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
|
|
|
|
<div class="alert is-important">
|
|
|
|
Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/universal), don't support web workers.
|
|
To ensure that your application will work in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.
|
|
|
|
</div>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|