Skip to content

Commit

Permalink
JS: Исправляет ошибки и форматирование (часть 11) (#5515)
Browse files Browse the repository at this point in the history 
* Исправляет ошибки и форматирование

* Удаляет

* Принимает правки от Светы

Co-authored-by: Svetlana Korobtseva <[email protected]>

* урла → URL

---------

Co-authored-by: Svetlana Korobtseva <[email protected]>
  • Loading branch information
@TatianaFokina @skorobaeus
TatianaFokina and skorobaeus authored Oct 18, 2024
1 parent b715c2a commit 823a670
Show file tree
Hide file tree
Showing 10 changed files with 145 additions and 160 deletions.
53 changes: 28 additions & 25 deletions js/performance/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ tags:

## Кратко

Performance API — это API браузера, позволяющее измерять время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – `DOMHighResTimeStamp`, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча).
Performance API — это API браузера, которое измеряет время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – `DOMHighResTimeStamp`, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча).

## Пример

### Создание меток и измерений

Получаем время, прошедшее с начала навигации на страницу
Получаем время, прошедшее с начала навигации на страницу:

```js
const t = performance.now()
Expand All @@ -45,7 +45,7 @@ const finish = performance.mark('конец')

performance.measure('итого', 'начало', 'конец')
console.log(performance.getEntriesByName('итого')[0].duration)
// количество миллисекунд между метками 'начало' и 'конец'
// Количество миллисекунд между метками 'начало' и 'конец'
```

### Работа с записанными данными
Expand All @@ -68,7 +68,7 @@ performance.clearMeasures()
performance.clearMarks()
```

Или можем очистить всё сразу:
Очищаем всё сразу:

```js
performance.clearResourceTimings()
Expand All @@ -78,9 +78,9 @@ performance.clearResourceTimings()

### Создание меток

Метка (mark) — время с начала перехода на страницу до создания метки в миллисекундах. Например, от клика по ссылке или после подтверждения введённого урла в строку поиска.
Метка (mark) — время с начала перехода на страницу до создания метки в миллисекундах. Например, от клика по ссылке или после подтверждения введённого URL в строку поиска.

При создании меток мы можем передать первым аргументом строку - имя метки. В дальнейшем, мы можем обращаться к этому имени для поиска.
При создании меток мы можем передать первым аргументом строку — имя метки. В дальнейшем мы можем обращаться к этому имени для поиска.

```js
const markName = 'старт выполнения функции'
Expand All @@ -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).

Expand All @@ -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(имя)` — получить список из записей с указанным именем.

<details>
<summary>Подробнее про метки автоматически записываемые браузером</summary>
<summary>Метки, автоматически записываемые браузером</summary>

Для улучшения анализа производительности страницы, браузер автоматически записывает некоторые метки:
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`).

</details>

Expand All @@ -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('метка')
Expand All @@ -182,7 +185,7 @@ performance.clearResourceTimings()

<aside>

⏱ Для измерения времени мы можем так же использовать класс `Date` с его методом `Date.now()`, возвращающий `timestamp` – текущее время в миллисекундах. Сохранив в переменные два вызова `Date.now()` (например, перед функцией и после) мы можем вычислить разницу и узнать время работы функции. Но Performance API предоставляет удобные функции для работы со временем, позволяет именовать сохранённые метки времени и обладает большей точностью.
⏱ Для измерения времени можем так же использовать класс `Date` с его методом `Date.now()`, возвращающий `timestamp` — текущее время в миллисекундах. Сохранив в переменные два вызова `Date.now()` (например, перед функцией и после), мы вычислим разницу и узнаем время работы функции. Одновременно Performance API предоставляет удобные функции для работы со временем, позволяет именовать сохранённые метки времени и обладает большей точностью.

</aside>

Expand All @@ -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`. В ручном режиме мы работаем с метками и измерениями.
2 changes: 1 addition & 1 deletion js/performance/practice/meded90.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
🛠 Удобно анализировать производительность при помощи вкладки «Производительность» (Performance) в инструментах разработчика. Вызовы `performance.mark()` и `performance.measure()` будут отображаться в разделе `Timings` после записи профиля.
🛠 Удобно анализировать производительность при помощи вкладки «Производительность» (Performance) в инструментах разработчика. Вызовы `performance.mark()` и `performance.measure()` отобразятся в разделе `Timings` после записи профиля.

![Панель отладки производительности с performance.mark](images/perfomance-panel.png)

Expand Down
6 changes: 3 additions & 3 deletions js/performance/practice/mighty-peach.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
🛠 `performance` полезно использовать для поиска узких мест вашей программы. Рассмотрим пример, когда у нас есть две функции `function_1()` и `function_2()` и мы хотим выяснить какая из функций тормозит нашу программу.
🛠 `performance` полезно использовать для поиска узких мест вашей программы. Рассмотрим пример, когда есть две функции `function_1()` и `function_2()` и мы хотим выяснить какая из функций тормозит нашу программу.

<iframe title="Измерение времени работы функции" src="../demos/functions-measure/" height="50"></iframe>

При измерении видно, что `function_1()` работает медленнее, а значит для ускорения нужно оптимизировать её.
При измерении видно, что `function_1()` работает медленнее, значит, для ускорения нужно оптимизировать её.

🛠 Инструменты разработчика позволяют отслеживать производительность программы и другими способами. Например, во вкладке Performance можно записать работу программы и проанализировать время работы отдельных функций или показатели рендеринга. В настройках инструментов разработчика можно включить отображение FPS (количество кадров в секунду) и проверить быстродействие интерфейса.
🛠 Инструменты разработчика отслеживают производительность программы и другими способами. Например, во вкладке «Производительность» (Performance) можно записать работу программы и проанализировать время работы отдельных функций или показатели рендеринга. В настройках инструментов разработчика включается отображение FPS (количество кадров в секунду), так проверите быстродействие интерфейса.
12 changes: 9 additions & 3 deletions js/promise-all/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ]) => {
Expand Down
11 changes: 7 additions & 4 deletions js/promise-all/practice/yurlovr.md
View file
Original file line number Diff line number Diff line change
@@ -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)
})
Expand Down
Loading

0 comments on commit 823a670

Please sign in to comment.