-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(ru): 40-christmas-web-worker.md translation
- Loading branch information
Stanislav Gavrilov
committed
Feb 20, 2024
1 parent
cc4d34f
commit 595c6f3
Showing
2 changed files
with
34 additions
and
1 deletion.
There are no files selected for viewing
33 changes: 33 additions & 0 deletions
33
docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
--- | ||
title: 🟠 Веб-воркеры | ||
description: Испытание 40 о том как создать и использовать веб-воркер | ||
author: thomas-laforge | ||
challengeNumber: 40 | ||
command: performance-christmas-web-worker | ||
sidebar: | ||
order: 119 | ||
--- | ||
|
||
## Информация | ||
|
||
Это испытание было создано для [Angular Advent Calendar](https://angularchristmascalendar.com) 2023. | ||
|
||
Это простое приложение, где нужно нажать на кнопку **Discover**, чтобы увидеть сюрприз, скрывающийся за черным экраном. Тем не менее, взаимодействие с приложением оставляет желать лучшего. При нажатии на кнопку происходит зависание страницы, а затем, после краткой задержки, секрет раскрывается мгновенно и без какой-либо плавности в анимации. | ||
|
||
> Пояснение: Для того, чтобы вызвать зависание приложения, загрузчик использует функцию, выполняющую очень сложные вычисления. Хотя возможно было бы использовать обычный таймер, но это не суть данного испытания. | ||
Так как JavaScript работает в однопоточном режиме, выполнение ресурсоемких задач препятствует обновлению пользовательского интерфейса браузера и реагированию на клики мыши или другие действия. Задача этого испытания - разгрузить основной поток, перенеся сложные вычисления в отдельный поток. Для этой цели мы будем использовать веб-воркеры. Веб-воркеры способны запускать скрипты в фоне, не влияя на основной поток, что позволяет браузеру сохранять высокое качество пользовательского взаимодействия. | ||
|
||
В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.io/guide/web-worker) чтобы начать. | ||
|
||
## Пояснение | ||
|
||
Это испытание направлено на создание плавной анимации за счет перемещения функции, выполняющей сложные вычисления, в веб-воркер. | ||
|
||
Для начала, используя схематик, создайте веб-воркер и перенесите в него функцию, вызывающую проблемы. После этих шагов анимация должна стать плавной, а отображение процента выполнения — обновляться, тем самым значительно улучшив пользовательский опыт. | ||
|
||
:::note[Пояснение] | ||
Поскольку мы находимся в рабочем пространстве Nx, просто замените команду `ng` на `nx` при запуске схематика. | ||
|
||
Если `nx` не установлен глобально на вашем компьютере, добавьте префикс `npx` к вашей команде. | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters