diff --git a/js/performance/index.md b/js/performance/index.md index d22b76b77b..c98e536be9 100644 --- a/js/performance/index.md +++ b/js/performance/index.md @@ -16,13 +16,13 @@ tags: ## Кратко -Performance API — это API браузера, позволяющее измерять время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – `DOMHighResTimeStamp`, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча). +Performance API — это API браузера, которое измеряет время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – `DOMHighResTimeStamp`, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча). ## Пример ### Создание меток и измерений -Получаем время, прошедшее с начала навигации на страницу +Получаем время, прошедшее с начала навигации на страницу: ```js const t = performance.now() @@ -45,7 +45,7 @@ const finish = performance.mark('конец') performance.measure('итого', 'начало', 'конец') console.log(performance.getEntriesByName('итого')[0].duration) -// количество миллисекунд между метками 'начало' и 'конец' +// Количество миллисекунд между метками 'начало' и 'конец' ``` ### Работа с записанными данными @@ -68,7 +68,7 @@ performance.clearMeasures() performance.clearMarks() ``` -Или можем очистить всё сразу: +Очищаем всё сразу: ```js performance.clearResourceTimings() @@ -80,7 +80,7 @@ performance.clearResourceTimings() Метка (mark) — время с начала перехода на страницу до создания метки в миллисекундах. Например, от клика по ссылке или после подтверждения введённого урла в строку поиска. -При создании меток мы можем передать первым аргументом строку - имя метки. В дальнейшем, мы можем обращаться к этому имени для поиска. +При создании меток мы можем передать первым аргументом строку — имя метки. В дальнейшем, мы можем обращаться к этому имени для поиска. ```js const markName = 'старт выполнения функции' @@ -94,11 +94,11 @@ console.log(entries) ### Создание измерений -Измерение (measure) - разница во времени между двумя метками. Измерение принимает несколько аргументов: +Измерение (measure) — разница во времени между двумя метками. Измерение принимает несколько аргументов: -1. Имя измерения; -1. Имя первой метки - необязательный параметр, если не указать, то первой меткой будет время со старта навигации на страницу; -1. Имя второй метки - необязательный параметр, если не указать, то второй меткой будет вызов `performance.now()` в момент создания измерения. +- имя измерения; +- имя первой метки — необязательный параметр; если не указать, первой меткой будет время со старта навигации на страницу; +- имя второй метки — необязательный параметр; если не указать, второй меткой будет вызов `performance.now()` в момент создания измерения. В Firefox и некоторых мобильных браузерах вызов метода `measure()` не возвращает полученное измерение и его нужно запрашивать вручную с помощью `getEntriesByName()`. Следите за [таблицей поддержки](https://caniuse.com/mdn-api_performance_measure_returns_undefined). @@ -122,19 +122,20 @@ console.log({ m1, m2, m3 }) ### Способы получения меток и измерений -Получить измерения и метки можно тремя разными способами: +Получить измерения и метки можно тремя способами: -1. `performance.getEntries()` - получить список всех меток и измерений, включая записываемые браузером. -1. `performance.getEntriesByType(тип)` - получить список из записей заданного типа, например, `mark` или `measure`. -1. `performance.getEntriesByName(имя)` - получить список из записей с указанным именем. +1. `performance.getEntries()` — получить список всех меток и измерений, включая записываемые браузером. +1. `performance.getEntriesByType(тип)` — получить список из записей заданного типа, например, `mark` или `measure`. +1. `performance.getEntriesByName(имя)` — получить список из записей с указанным именем.
- Подробнее про метки автоматически записываемые браузером + Метки, автоматически записываемые браузером - Для улучшения анализа производительности страницы, браузер автоматически записывает некоторые метки: - 1. `navigation` – события навигации браузера `domComplete`, `loadEventStart`, `loadEventEnd`, `redirectCount`, `domContentLoadedEventStart`, `domContentLoadedEventEnd`, `domInteractive`, `requestStart`, `responseStart`, `unloadEventEnd`, `unloadEventStart`. - 1. `resource` – содержат информацию о загрузке ресурсов сайтом. Например, можно узнать про загрузку стилей или выполнение запросов к API. - 1. `paint` – информация о рендере страницы, например, время отрисовки первого контента – `first-paint`, `first-contentful-paint`. +Для улучшения анализа производительности страницы, браузер автоматически записывает некоторые метки: + +- `navigation` — события навигации браузера `domComplete`, `loadEventStart`, `loadEventEnd`, `redirectCount`, `domContentLoadedEventStart`, `domContentLoadedEventEnd`, `domInteractive`, `requestStart`, `responseStart`, `unloadEventEnd`, `unloadEventStart`. +- `resource` — содержат информацию о загрузке ресурсов сайтом. Например, можно узнать про загрузку стилей или выполнение запросов к API. +- `paint` — информация о рендере страницы, например, время отрисовки первого контента (`first-paint`, `first-contentful-paint`).
@@ -154,11 +155,13 @@ console.log(onlyMarks) ### Способы очистить записи -Метки и измерения с одинаковыми именами не перезаписывают друг друга. Если одно и то же имя может использоваться в разных частях кода, например, если имена создаются динамически, может быть полезно удалять уже созданные метки перед записью новых с тем же именем. Очистить записанные метки и измерения можно разными методами: +Метки и измерения с одинаковыми именами не перезаписывают друг друга. Если одно и то же имя может использоваться в разных частях кода, например, если имена создаются динамически, полезно удалять уже созданные метки перед записью новых с тем же именем. Очистить записанные метки и измерения можно несколькими методами. + +`performance.clearMarks(имя_метки)` — очистить все записанные метки с переданным именем. Если имя не передать, удалятся все метки, созданные методом `performance.mark()`. + +`performance.clearMeasures(имя_измерения)` — очищаем все записанные измерения с переданным именем. Если имя не передать, удалятся все измерения, созданные методом `performance.measure()`. -1. `performance.clearMarks(имя_метки)` - очистить все записанные метки с переданным именем. Если имя не передать, то удалятся все метки, созданные методом `performance.mark()`. -1. `performance.clearMeasures(имя_измерения)` - очищаем все записанные измерения с переданным именем. Если имя не передать, то удалятся все измерения, созданные методом `performance.measure()`. -1. `performance.clearResourceTimings()` - очистить все метки, связанные с загрузкой ресурсов браузером. +`performance.clearResourceTimings()` — очистить все метки, связанные с загрузкой ресурсов браузером. ```js const mark = performance.mark('метка') @@ -182,7 +185,7 @@ performance.clearResourceTimings() @@ -194,6 +197,6 @@ Performance API представляет собой реестр записей. - `navigation` — для записей, связанных с навигацией по сайту; - `resource` — время получение внешних ресурсов (css, запросы API); - `paint` — время первой отрисовки (first paint), либо первой отрисовки контента (first contentful paint); -- `longtask` — время работы задачи из [LongTasks API](http://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API); +- `longtask` — время работы задачи из [LongTasks API](http://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API). Тип записи хранится в поле `entryType`. В ручном режиме мы работаем с метками и измерениями. diff --git a/js/performance/practice/meded90.md b/js/performance/practice/meded90.md index 019265f7eb..62d2830c40 100644 --- a/js/performance/practice/meded90.md +++ b/js/performance/practice/meded90.md @@ -1,4 +1,4 @@ -🛠 Удобно анализировать производительность при помощи вкладки «Производительность» (Performance) в инструментах разработчика. Вызовы `performance.mark()` и `performance.measure()` будут отображаться в разделе `Timings` после записи профиля. +🛠 Удобно анализировать производительность при помощи вкладки «Производительность» (Performance) в инструментах разработчика. Вызовы `performance.mark()` и `performance.measure()` отобразятся в разделе `Timings` после записи профиля. ![Панель отладки производительности с performance.mark](images/perfomance-panel.png) diff --git a/js/performance/practice/mighty-peach.md b/js/performance/practice/mighty-peach.md index 15b585ab84..81deabbfa0 100644 --- a/js/performance/practice/mighty-peach.md +++ b/js/performance/practice/mighty-peach.md @@ -1,7 +1,7 @@ -🛠 `performance` полезно использовать для поиска узких мест вашей программы. Рассмотрим пример, когда у нас есть две функции `function_1()` и `function_2()` и мы хотим выяснить какая из функций тормозит нашу программу. +🛠 `performance` полезно использовать для поиска узких мест вашей программы. Рассмотрим пример, когда есть две функции `function_1()` и `function_2()` и мы хотим выяснить какая из функций тормозит нашу программу. -При измерении видно, что `function_1()` работает медленнее, а значит для ускорения нужно оптимизировать её. +При измерении видно, что `function_1()` работает медленнее, значит, для ускорения нужно оптимизировать её. -🛠 Инструменты разработчика позволяют отслеживать производительность программы и другими способами. Например, во вкладке Performance можно записать работу программы и проанализировать время работы отдельных функций или показатели рендеринга. В настройках инструментов разработчика можно включить отображение FPS (количество кадров в секунду) и проверить быстродействие интерфейса. +🛠 Инструменты разработчика отслеживают производительность программы и другими способами. Например, во вкладке «Производительность» (Performance) можно записать работу программы и проанализировать время работы отдельных функций или показатели рендеринга. В настройках инструментов разработчика включается отображение FPS (количество кадров в секунду), так проверите быстродействие интерфейса. diff --git a/js/promise-all/index.md b/js/promise-all/index.md index ad633661b3..17ae2c5b42 100644 --- a/js/promise-all/index.md +++ b/js/promise-all/index.md @@ -64,9 +64,15 @@ Promise.all([promise1, promise2, promise3]) В примере ниже, промис `promise2` завершается с ошибкой: ```js -const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 5000)) -const promise2 = new Promise((resolve, reject) => setTimeout(() => reject('error'), 2000)) -const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 1000)) +const promise1 = new Promise( + resolve => setTimeout(() => resolve(1), 5000) +) +const promise2 = new Promise( + (resolve, reject) => setTimeout(() => reject('error'), 2000) +) +const promise3 = new Promise( + resolve => setTimeout(() => resolve(3), 1000) +) Promise.all([promise1, promise2, promise3]) .then(([response1, response2, response3 ]) => { diff --git a/js/promise-all/practice/yurlovr.md b/js/promise-all/practice/yurlovr.md index f93e68ba99..f5e8a02906 100644 --- a/js/promise-all/practice/yurlovr.md +++ b/js/promise-all/practice/yurlovr.md @@ -1,14 +1,17 @@ -🛠 Довольно частое использование — это преобразование массива с данными в массив с промисами с помощью [`map()`](/js/array-map/). В `map()` для каждого элемента создаётся промис, а затем полученный массив передаётся в `Promise.all()`. Это позволит дождаться выполнения всех промисов, а затем обработать результат. +🛠 Довольно частое использование — преобразование массива с данными в массив с промисами с помощью [`map()`](/js/array-map/). В `map()` для каждого элемента создаётся промис, а полученный массив передаётся в `Promise.all()`. Это позволит дождаться выполнения всех промисов, а затем обработать результат. -Например, можно использовать метод `Promise.all()` для получения данных нескольких персонажей из вселенной звёздных войн через запрос к API: +Например, можете использовать метод `Promise.all()` для получения данных нескольких персонажей из вселенной Звёздных войн через запрос к API: ```js const peopleIds = [1, 13, 3] -const arrayFetchUsers = peopleIds.map(user => fetch(`https://swapi.dev/api/people/${user}`).then((response) => response.json())) +const arrayFetchUsers = peopleIds.map( + user => fetch(`https://swapi.dev/api/people/${user}`) + .then((response) => response.json()) +) Promise.all(arrayFetchUsers) .then((responses) => { - // responses — массив результатов выполнения промисов + // Массив результатов выполнения промисов responses.forEach(resp => { console.log(resp.name) }) @@ -20,7 +23,7 @@ Promise.all(arrayFetchUsers) Пример сначала сделает три запроса к API, с помощью `Promise.all()` дождётся их завершения и парсинга ответа в [JSON](/tools/json/), а затем выведет имя персонажа для каждого. В консоли появится: -``` +```json Luke Skywalker Chewbacca R2-D2 diff --git a/js/promise-allsettled/index.md b/js/promise-allsettled/index.md index abea71535d..b3aa163a87 100644 --- a/js/promise-allsettled/index.md +++ b/js/promise-allsettled/index.md @@ -21,11 +21,11 @@ tags: Метод `allSettled()` — это один из статических методов объекта `Promise`. Его используют, когда нужно запустить несколько промисов параллельно и дождаться их выполнения. -`Promise.allSettled()` очень похож на метод [`Promise.all()`](/js/promise-all/), но работает немного по-другому. В отличие от [`Promise.all()`](/js/promise-all/#odin-iz-promisov-zavershilsya-oshibkoy), `Promise.allSettled()` ждёт выполнения всех промисов, при этом неважно, завершились они успешно или с ошибкой. +`Promise.allSettled()` очень похож на метод [`Promise.all()`](/js/promise-all/), но работает по-другому. В отличие от [`Promise.all()`](/js/promise-all/#odin-iz-promisov-zavershilsya-oshibkoy), `Promise.allSettled()` ждёт выполнения всех промисов, при этом неважно, завершились они успешно или с ошибкой. ## Как пишется -`Promise.allSettled()` принимает итерируемую коллекцию промисов (чаще всего — [массив](/js/arrays/)) и возвращает новый промис, который будет выполнен, когда будут выполнены все переданные промисы. Полученный промис содержит массив результатов выполнения всех переданных промисов, сохраняя порядок оригинального массива, но не порядок выполнения. +`Promise.allSettled()` принимает итерируемую коллекцию промисов, чаще всего — [массив](/js/arrays/). После метод возвращает новый промис, который выполнится, когда выполнятся все переданные промисы. Полученный промис содержит массив результатов выполнения всех переданных промисов, сохраняя порядок оригинального массива, но не порядок выполнения. ## Как понять @@ -49,13 +49,13 @@ Promise.allSettled(promises) }) ``` -Если промис выполнился успешно, то на выходе получаем объект с двумя свойствами — `status` и `value`. `status` будет содержать строку `'fulfilled'`, а `value` — значение, которое передали при вызове `resolve` у промиса: +Если промис выполнился успешно, на выходе получаем объект с двумя свойствами `status` и `value`. `status` содержит строку `'fulfilled'`, а `value` — значение, которое передали при вызове `resolve` у промиса: ```js { status: 'fulfilled', value: значение } ``` -Если промис выполнился с отказом, то на выходе получаем объект с двумя свойствами — `status` и `reason`. `status` будет содержать строку `'rejected'`, а `reason` — значение, которое передали при вызове `reject` у промиса: +Если промис выполнился с отказом, на выходе получаем объект с двумя свойствами — `status` и `reason`. `status` содержит строку `'rejected'`, а `reason` — значение, которое передали при вызове `reject` у промиса: ```js { status: 'rejected', reason: значение } diff --git a/js/promise-any/index.md b/js/promise-any/index.md index cc2d015613..091a0c2e80 100644 --- a/js/promise-any/index.md +++ b/js/promise-any/index.md @@ -19,11 +19,11 @@ tags: ## Кратко -Метод `any` — это один из статических методов объекта `Promise`. Его используют, когда нужно запустить несколько промисов параллельно и дождаться первого успешного разрешённого. +Метод `any` — один из статических методов объекта `Promise`. Его используют, когда нужно запустить несколько промисов параллельно и дождаться первого успешного разрешённого. ## Как пишется -`Promise.any()` принимает [итерируемую](/js/iterator/) коллекцию промисов (чаще всего — [массив](/js/arrays/)) и возвращает новый промис, который будет выполнен, когда будет выполнен первый из промисов, переданных в виде перечисляемого аргумента, или отклонён, если все из переданных промисов завершатся с ошибкой. +`Promise.any()` принимает [итерируемую](/js/iterator/) коллекцию промисов, чаще всего — [массив](/js/arrays/). Метод возвращает новый промис, который выполнится, когда выполнится первый из промисов, переданных в виде перечисляемого аргумента. Промис может быть отклонён, если все из переданных промисов завершатся с ошибкой. Возвращает значение первого успешно выполнившегося промиса. @@ -31,13 +31,11 @@ tags: Метод полезен, когда нужно вернуть первый исполненный промис. После того как один из промисов будет исполнен, метод не будет дожидаться исполнения остальных. -В отличие от [`Promise.all()`](/js/promise-all/), который содержит массив значений исполненных промисов, `Promise.any()` содержит только одно значение (при условии, что хотя бы один из промисов исполнен успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнился только один промис, неважно какой. +В отличие от [`Promise.all()`](/js/promise-all/), который содержит массив значений исполненных промисов, `Promise.any()` содержит только одно значение при условии, что хотя бы один из промисов исполнен успешно. Такой подход полезен, когда нужно чтобы выполнился только один промис, неважно какой. -Также, в отличие от [`Promise.race()`](/js/promise-race/), который возвращает промис, содержащий значение первого завершённого (`resolved` или `rejected`), этот метод возвращает промис, содержащий значение первого успешно выполненного (`resolved`) промиса. Метод будет игнорировать исполнение промисов с ошибкой (`rejection`) вплоть до первого исполненного успешно (`resolved`). +Также `Promise.any()` отличается от [`Promise.race()`](/js/promise-race/). Метод `Promise.race()` возвращает промис, содержащий значение первого завершённого (`resolved` или `rejected`). Метод `Promise.any()` возвращает промис, содержащий значение первого успешно выполненного (`resolved`) промиса. `Promise.any()` проигнорирует исполнение промисов с ошибкой (`rejection`) до первого исполненного успешного (`resolved`). -## Для чего можно использовать - -Например, у нас есть 2 картинки и надо отобразить любую из них, которая загрузится быстрее: +Можете использовать `Promise.any()`, когда есть две картинки и надо отобразить ту, которая загрузится быстрее: ```js function fetchAndDecode(url) { @@ -67,9 +65,7 @@ Promise.any([coffee, tea]) }) ``` -### Успешное выполнение нескольких промисов - -Создадим два промиса, второй выполнится раньше: +**Успешное выполнение нескольких промисов**. Создадим два промиса, второй выполнится раньше: ```js const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 5000)) @@ -86,9 +82,7 @@ Promise.any([promise1, promise2]) // 2 ``` -### Массив промисов пустой - -Передадим пустой массив в `Promise.any()`: +**Пустой массив промисов**. Передадим пустой массив в `Promise.any()`: ```js Promise.any([]) @@ -102,15 +96,17 @@ Promise.any([]) В итоге обработчик [`then()`](/js/promise-then/) будет проигнорирован, и будет выполняться код из обработчика ошибок [`catch`](/js/promise-catch/). -### Один из промисов завершился ошибкой - -Метод `Promise.any()` не завершится с ошибкой, если хотя бы один из промисов выполнится успешно. +**Один из промисов завершился ошибкой**. Метод `Promise.any()` не завершится с ошибкой, если хотя бы один из промисов выполнится успешно. -В примере ниже, промис `promise2` завершается с ошибкой: +В примере промис `promise2` завершается с ошибкой: ```js -const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 5000)) -const promise2 = new Promise((resolve, reject) => setTimeout(() => reject('error'), 1000)) +const promise1 = new Promise( + resolve => setTimeout(() => resolve(1), 5000) +) +const promise2 = new Promise( + (resolve, reject) => setTimeout(() => reject('error'), 1000) +) Promise.any([promise1, promise2]) .then((result) => { @@ -122,17 +118,17 @@ Promise.any([promise1, promise2]) }) ``` -В итоге обработчик `catch()` будет проигнорирован, и будет выполняться код из обработчика ошибок `then()` со значением _1_ в переменной `result`. - -### Все промисы завершились ошибкой +В итоге обработчик `catch()` проигнорируется и выполнится код из обработчика ошибок `then()` со значением `1` в переменной `result`. -Метод `Promise.any()` завершится с ошибкой, если все переданные промисы завершатся с ошибкой. - -В примере ниже, все промисы завершаются с ошибкой: +**Все промисы завершились ошибкой**. Метод `Promise.any()` завершится с ошибкой, если все переданные промисы завершатся с ошибкой. ```js -const promise1 = new Promise((resolve, reject) => setTimeout(() => reject('error1'), 5000)) -const promise2 = new Promise((resolve, reject) => setTimeout(() => reject('error2'), 1000)) +const promise1 = new Promise( + (resolve, reject) => setTimeout(() => reject('error1'), 5000) +) +const promise2 = new Promise( + (resolve, reject) => setTimeout(() => reject('error2'), 1000) +) Promise.any([promise1, promise2]) .then((result) => { @@ -144,11 +140,9 @@ Promise.any([promise1, promise2]) }) ``` -В итоге обработчик `then()` будет проигнорирован, и будет выполняться код из обработчика ошибок `catch()`. - -### Не промисы в массиве промисов +В итоге обработчик `then()` проигнорируется и выполнится код из обработчика ошибок `catch()`. -Если в `Promise.any()` передать не промисы, он вернёт *первый* переданный аргумент, независимо от его типа, в результат выполнения как есть (под капотом при этом произойдёт его преобразование с помощью метода `Promise.resolve()`). +**Непромисы в массиве промисов**. Если в `Promise.any()` передать что-то помимо промисов, метод вернёт **первый** переданный аргумент любого типа в результат выполнения. Под капотом при этом произойдёт его преобразование с помощью метода `Promise.resolve()`. Передадим в `Promise.any()` массив значений, которые не являются промисами: diff --git a/js/promise/demos/Lopinopulos-QWNLMwR/index.html b/js/promise/demos/Lopinopulos-QWNLMwR/index.html index d4c3d7117f..5c31230748 100644 --- a/js/promise/demos/Lopinopulos-QWNLMwR/index.html +++ b/js/promise/demos/Lopinopulos-QWNLMwR/index.html @@ -2,7 +2,7 @@ - Пример состояний промиса - Promise — Дока + Пример состояний промиса — Promise — Дока