From 595c6f39a7351858e6b3cbb96d5cebda252aa919 Mon Sep 17 00:00:00 2001 From: Stanislav Gavrilov Date: Tue, 20 Feb 2024 21:24:21 +0300 Subject: [PATCH] docs(ru): 40-christmas-web-worker.md translation --- .../performance/40-christmas-web-worker.md | 33 +++++++++++++++++++ docs/src/content/i18n/ru.json | 2 +- 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md diff --git a/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md new file mode 100644 index 0000000..674ceed --- /dev/null +++ b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md @@ -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` к вашей команде. +::: diff --git a/docs/src/content/i18n/ru.json b/docs/src/content/i18n/ru.json index be1716a..4e58543 100644 --- a/docs/src/content/i18n/ru.json +++ b/docs/src/content/i18n/ru.json @@ -16,7 +16,7 @@ "challenge.footer.video": "Видео", "challenge.footer.gettingStarted.title": "Чтобы пройти это испытание, прочитайте:", "challenge.footer.gettingStarted.link": "Первые шаги", - "challenge.footer.upvoteAnswer": "Вы можете проголосовать за этот ответ 👍 если он вам понравился", + "challenge.footer.upvoteAnswer": "Вы можете проголосовать за ответ 👍 если он вам понравился", "subscription.button": "Подписаться", "subscription.email": "username@gmail.com", "subscription.note.title": "Примечание",