mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
Merge pull request #686 from webbomj/translate-challenge-36
docs(ru): added translate challenge 36
This commit is contained in:
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
title: 🟢 NgFor Оптимизация
|
||||||
|
description: Задача 36 заключается в изучении того, как работает track by
|
||||||
|
author: thomas-laforge
|
||||||
|
contributors:
|
||||||
|
- webbomj
|
||||||
|
challengeNumber: 36
|
||||||
|
command: performance-ngfor-optimize
|
||||||
|
sidebar:
|
||||||
|
order: 13
|
||||||
|
---
|
||||||
|
|
||||||
|
## Information
|
||||||
|
|
||||||
|
В этом приложении у нас есть список лиц, которых мы можем добавлять, удалять или обновлять. Если вы откроете панель разработчика Chrome, нажав **F12**, перейдете на вкладку "Источник" и развернете элемент, чтобы просмотреть список, вы заметите, что каждый раз, когда вы добавляете, удаляете или обновляете элемент списка, все элементы DOM уничтожаются и инициализируется снова. (Смотрите видео ниже).
|
||||||
|
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/30832608/71b90307-3ee3-42c0-a532-b67ce4f20bf6">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
Мы также можем использовать <b>Angular DevTool</b> для профилирования нашего приложения и понимания того, что происходит внутри нашего приложения. Я покажу вам, как это сделать, в следующем видео.
|
||||||
|
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/30832608/dd8108c6-1d89-4b05-9aa5-e760bd6f7f11">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
:::note[Заметка]
|
||||||
|
Если вы не знаете, как им пользоваться, сначала прочтите [страницу введения в производительность](/задачи/производительность/) и вернитесь после.
|
||||||
|
:::
|
||||||
|
|
||||||
|
Если вам нужна дополнительная информация о `ngFor`, я приглашаю вас сначала ознакомиться с [документацией](https://angular.io/api/common/For).
|
||||||
|
|
||||||
|
## Пояснение
|
||||||
|
|
||||||
|
Цель этой задачи состоит в том, чтобы понять, что вызывает это обновление DOM, и решить его.
|
||||||
Reference in New Issue
Block a user