From 8100a75fdb3322653d9860913383e1c947ad37ba Mon Sep 17 00:00:00 2001 From: webbomj Date: Wed, 13 Mar 2024 16:30:51 +0300 Subject: [PATCH] docs(ru): added translate challenge 35 --- .../ru/challenges/performance/35-memoize.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 docs/src/content/docs/ru/challenges/performance/35-memoize.md diff --git a/docs/src/content/docs/ru/challenges/performance/35-memoize.md b/docs/src/content/docs/ru/challenges/performance/35-memoize.md new file mode 100644 index 0000000..9cebe58 --- /dev/null +++ b/docs/src/content/docs/ru/challenges/performance/35-memoize.md @@ -0,0 +1,50 @@ +--- +title: 🟒 ΠœΠ΅ΠΌΠΎΠΈΠ·Π°Ρ†ΠΈΡ +description: Π—Π°Π΄Π°Ρ‡Π° 35 Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ чистыС pipe +author: thomas-laforge +contributors: + - webbomj +challengeNumber: 35 +command: performance-memoized +sidebar: + order: 8 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +Π’ Angular чистыС ΠΊΠ°Π½Π°Π»Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ эффСктивны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ запоминаСтся, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ…ΠΎΠ΄Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ измСняСтся, функция "прСобразования" ΠΊΠ°Π½Π°Π»Π° Π½Π΅ вычисляСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ, Π° выводится ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. + +Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ ΠΊΠ°Π½Π°Π»Π°Ρ… Π² [Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Angular](https://angular.io/guide/pipes) ΠΈ Π² этой [ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠΌ ΠΏΠΎΠ³Ρ€ΡƒΠΆΠ΅Π½ΠΈΠΈ Π² pipes](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d). + +Π’ этом Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΌΡ‹ Π½Π°Ρ‡Π½Π΅ΠΌ с ΠΊΠ½ΠΎΠΏΠΊΠΈ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ списка людСй. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ связан с числом, ΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вычислСниС Π€ΠΈΠ±ΠΎΠ½Π°Ρ‡Ρ‡ΠΈ для создания слоТных вычислСний, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ замСдлят Ρ€Π°Π±ΠΎΡ‚Ρƒ прилоТСния. + +Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ список Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ввСсти нСсколько Π±ΡƒΠΊΠ² Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°. Π’Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π΄Π°ΠΆΠ΅ нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ выполняСтС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самый простой Π½Π°Π±ΠΎΡ€ тСкста. + +:::note[ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅] +Π’ этом Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°ΠΎΡΡ‚Ρ€ΡΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ списка. +::: + +Π”Π°Π²Π°ΠΉΡ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Angular DevTool для профилирования нашСго прилоТСния ΠΈ ΠΏΠΎΠΉΠΌΠ΅ΠΌ, ΠΊΠ°ΠΊ этот инструмСнт ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит Π²Π½ΡƒΡ‚Ρ€ΠΈ нашСго прилоТСния. + +:::note[ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅] +Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, сначала ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ [страницу ввСдСния Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ](/Π·Π°Π΄Π°Ρ‡ΠΈ/ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ/) ΠΈ Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ послС. +::: + +Π’Π΅ΠΏΠ΅Ρ€ΡŒ запуститС ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ вашСго прилоТСния ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ нСсколько Π±ΡƒΠΊΠ² Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ нСсколько красных полос, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΡ…ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ профиля. + +Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· полос (ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ ΠΆΠ΅Π»Ρ‚ΠΎΠΉ стрСлкой Π½Π° рисункС Π½ΠΈΠΆΠ΅), Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ†ΠΈΠΊΠ» обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² `PersonListComponent` Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 3 сСкунд. + +![profiler record](../../../../assets/performance/35/memoize-profiler.png 'Profiler Record') + +## ПояснСниС + +ЦСль этой Π·Π°Π΄Π°Ρ‡ΠΈ - ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ являСтся ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ Ρ‚Π°ΠΊΠΎΠΉ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π΅Π΅. + +## Подсказка: + +
+ Подсказка 1 + +Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ `Pipes` для запоминания вычислСния Π€ΠΈΠ±ΠΎΠ½Π°Ρ‡Ρ‡ΠΈ. + +