Merge pull request #347 from xcurveballx/event-loop-minor

Event loop minor

Author: iliakan

2-ui/99-ui-misc/03-event-loop/article.md

@@ -9,7 +9,7 @@
 
 ## Событийный цикл
 
-Идея *событийного цикла* очень проста. Есть бесконечный цикл, в котором движок JavaScript ожидает задачи, исполняет их, и снова ожидает появления новых.
+Идея *событийного цикла* очень проста. Есть бесконечный цикл, в котором движок JavaScript ожидает задачи, исполняет их и снова ожидает появления новых.
 
 Общий алгоритм движка:
 
@@ -34,14 +34,14 @@
 
 ![](eventLoop.svg)
 
-Например, когда движок занят выполнением скрипта, пользователь может передвинуть мышь, тем самым вызвав появление события `mousemove`, или может истечь таймер, установленный `setTimeout` и т.п. Эти задачи формируют очередь, как показано на иллюстрации выше.
+Например, когда движок занят выполнением скрипта, пользователь может передвинуть мышь, тем самым вызвав появление события `mousemove`, или может истечь таймер, установленный `setTimeout`, и т.п. Эти задачи формируют очередь, как показано на иллюстрации выше.
 
-Задачи из очереди исполняются по правилу "первым пришел - первым ушёл". Когда браузер заканчивает выполнение скрипта, он обрабатывает событие `mousemove`, затем выполняет обработчик, заданный `setTimeout`, и так далее.
+Задачи из очереди исполняются по правилу "первым пришёл - первым ушёл". Когда браузер заканчивает выполнение скрипта, он обрабатывает событие `mousemove`, затем выполняет обработчик, заданный `setTimeout`, и так далее.
 
 Пока что всё просто, не правда ли?
 
 Отметим две детали:
-1.  Рендеринг (отрисовка страницы) никогда не происходит во время выполнения задачи движком. Не имеет значение сколь долго выполняется задача. Изменения в DOM отрисовываются только после того, как задача выполнена.
+1.  Рендеринг (отрисовка страницы) никогда не происходит во время выполнения задачи движком. Не имеет значения, сколь долго выполняется задача. Изменения в DOM отрисовываются только после того, как задача выполнена.
 2.  Если задача выполняется очень долго, то браузер не может выполнять другие задачи, обрабатывать пользовательские события, поэтому спустя некоторое время браузер предлагает "убить" долго выполняющуюся задачу. Такое возможно, когда в скрипте много сложных вычислений или ошибка, ведущая к бесконечному циклу.
 
 Это была теория. Теперь давайте взглянем, как можно применить эти знания.
@@ -54,7 +54,7 @@
 
 Пока движок занят подсветкой синтаксиса, он не может делать ничего, связанного с DOM, не может обрабатывать пользовательские события и т.д. Возможно даже "подвисание" браузера, что совершенно неприемлемо.
 
-Мы можем избежать этого, разбив задачу на части. Сделать подсветку для первых 100 строк, затем запланировать `setTimeout` (с нулевой задержкой) разметку следующих 100 строк, и т.д.
+Мы можем избежать этого, разбив задачу на части. Сделать подсветку для первых 100 строк, затем запланировать `setTimeout` (с нулевой задержкой) для разметки следующих 100 строк и т.д.
 
 Чтобы продемонстрировать такой подход, давайте будем использовать для простоты функцию, которая считает от `1` до `1000000000`.
 
@@ -160,11 +160,11 @@ count();
 
 Ещё одно преимущество разделения на части крупной задачи в браузерных скриптах - это возможность показывать индикатор выполнения.
 
-Обычно браузер отрисовывает содержимое страницы после того, как заканчивается выполнение текущего кода. Не имеет значения насколько долго выполняется задача. Изменения в DOM отображаются только после её завершения.
+Обычно браузер отрисовывает содержимое страницы после того, как заканчивается выполнение текущего кода. Не имеет значения, насколько долго выполняется задача. Изменения в DOM отображаются только после её завершения.
 
 С одной стороны, это хорошо, потому что наша функция может создавать много элементов, добавлять их по одному в документ и изменять их стили -- пользователь не увидит "промежуточного", незаконченного состояния. Это важно, верно?
 
-В примере ниже, изменения `i` не будут заметны, пока функция не завершится, поэтому мы увидим только последнее значение `i`:
+В примере ниже изменения `i` не будут заметны, пока функция не завершится, поэтому мы увидим только последнее значение `i`:
 
 
 ```html run
@@ -220,7 +220,7 @@ count();
 
 В обработчике события мы можем решить отложить некоторые действия, пока событие не "всплывёт" и не будет обработано на всех уровнях. Мы можем добиться этого, обернув код в `setTimeout` с нулевой задержкой.
 
-В главе <info:dispatch-events> мы видели пример: наше событие `menu-open` генерируется через `setTimeout`, чтобы возникло после того, как полностью обработано событие "click".
+В главе <info:dispatch-events> мы видели пример: наше событие `menu-open` генерируется через `setTimeout`, чтобы оно возникло после того, как полностью обработано событие "click".
 
 ```js
 menu.onclick = function() {
@@ -244,7 +244,7 @@ menu.onclick = function() {
 
 Также есть специальная функция `queueMicrotask(func)`, которая помещает `func` в очередь микрозадач.
 
-**Сразу после каждой *макрозадачи* движок исполняет все задачи из очереди *микрозадач* перед тем, как выполнить следующую макрозадачу или отобразить изменения на странице или сделать что-то ещё.**
+**Сразу после каждой *макрозадачи* движок исполняет все задачи из очереди *микрозадач* перед тем, как выполнить следующую макрозадачу или отобразить изменения на странице, или сделать что-то ещё.**
 
 Например:
 
@@ -267,11 +267,11 @@ alert("code");
 
 ![](eventLoop-full.svg)
 
-**Все микрозадачи завершаются до обработки каких-либо событий или рендеринга или перехода к другой макрозадаче.**
+**Все микрозадачи завершаются до обработки каких-либо событий или рендеринга, или перехода к другой макрозадаче.**
 
-Это важно, так как гарантирует, что общее окружение остаётся одним и тем же между микрозадачами - не изменены координаты мыши, не получены новые данные по сети, и т.п.
+Это важно, так как гарантирует, что общее окружение остаётся одним и тем же между микрозадачами - не изменены координаты мыши, не получены новые данные по сети и т.п.
 
-Если мы хотели бы запустить функцию асинхронно (после текущего кода), но до отображения изменений и до новых событий, мы можем запланировать это через `queueMicrotask`.
+Если бы мы хотели запустить функцию асинхронно (после текущего кода), но до отображения изменений и до новых событий, то мы могли бы запланировать это через `queueMicrotask`.
 
 Вот пример с индикатором выполнения, похожий на предыдущий, но в этот раз использована функция `queueMicrotask` вместо `setTimeout`. Обратите внимание - отрисовка страницы происходит только в самом конце. Как и в случае обычного синхронного кода.