diff --git a/aio/content/guide/web-worker.md b/aio/content/guide/web-worker.md index 9572d2072c..4c8e2275b0 100644 --- a/aio/content/guide/web-worker.md +++ b/aio/content/guide/web-worker.md @@ -1,18 +1,43 @@ # Using Web Workers with Angular CLI +# 通过 Angular CLI 使用 Web Worker + + [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface. +[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 允许你在后台线程中运行 CPU 密集型计算,解放主线程,以便更新用户界面。 + + If you find your application becomes unresponsive while processing data, using Web Workers can help. +如果你发现你的应用在处理数据时停止了响应,那么使用 Web Workers 可以为你提供帮助。 + + ## Adding a Web Worker +## 添加一个 Web Worker + + You can add a web worker anywhere in your application. If the file that contains your expensive computation is `src/app/app.component.ts`, you can add a Web Worker using `ng generate web-worker app`. +你可以在应用中的任何地方添加一个 Web Worker。假设包含沉重计算工作的文件是 `src/app/app.component.ts`,你可以使用 `ng generate web-worker app` 新增一个 Web Worker。 + + Running this command will: +运行这个命令会: + + - configure your project to use Web Workers, if it isn't already. + + 把你的项目配置成使用 Web Workers 的(如果尚未配置过)。 + + - add `src/app/app.worker.ts` with scaffolded code to receive messages: + 添加 `src/app/app.worker.ts` 文件,并添加用于接收消息的脚手架代码: + + ```typescript addEventListener('message', ({ data }) => { const response = `worker response to ${data}`; @@ -22,6 +47,9 @@ Running this command will: - add scaffolded code to `src/app/app.component.ts` to use the worker: + 往 `src/app/app.component.ts` 中添加使用该 worker 的脚手架代码: + + ```typescript if (typeof Worker !== 'undefined') { // Create a new @@ -38,9 +66,23 @@ Running this command will: After the initial scaffolding, you will need to refactor your code to use the Web Worker by sending messages to and from. +在完成了最初的脚手架之后,你需要重构代码,通过来回发送消息来使用 Web Worker。 + ## Caveats +## 警告 + + There are two important things to keep in mind when using Web Workers in Angular projects: +在 Angular 项目中使用 Web Workers 时,要记住两个重要事项: + + - Some environments or platforms, like `@angular/platform-server` used in [Server-side Rendering](guide/universal), don't support Web Workers. You have to provide a fallback mechanism to perform the computations that the worker would perform to ensure your application will work in these environments. + + 某些环境或平台(比如[服务端渲染](guide/universal)中使用的 `@angular/platform-server` 不支持 Web Workers。你必须提供一个后备机制来执行 Worker 要执行的计算,以确保你的应用能在那些环境中运行。 + - Running Angular itself in a Web Worker via [**@angular/platform-webworker**](api/platform-webworker) is not yet supported in Angular CLI. + + Angular CLI 尚不支持通过 [**@angular/platform-webworker**](api/platform-webworker)在 Web Worker 中运行 Angular 自身。 +