diff --git a/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md b/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md new file mode 100644 index 0000000..ff53ccb --- /dev/null +++ b/docs/src/content/docs/ru/challenges/performance/34-default-onpush.md @@ -0,0 +1,57 @@ +--- +title: 🟒 Default vs OnPush +description: Π—Π°Π΄Π°Ρ‡Π° 34 Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ стратСгиСй обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Default ΠΈ OnPush. +author: thomas-laforge +contributors: + - webbomj +challengeNumber: 34 +command: performance-default-onpush +sidebar: + order: 7 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +Π’ этом Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΌΡ‹ рассмотрим различия ΠΈ послСдствия использования `ChangeDetectionStrategy.Default` Π² сравнСнии с `ChangeDetectionStrategy.OnPush`. + +Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ [Angular Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ](https://angular.io/guide/change-detection-skipping-subtrees) Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ различиях ΠΌΠ΅ΠΆΠ΄Ρƒ этими стратСгиями. + +Π’ этом Π·Π°Π΄Π°Π½ΠΈΠΈ всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ со стратСгии `Default`. Когда Π²Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ Π±ΡƒΠΊΠ²Ρ‹ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°, Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ. + +:::note[Π—Π°ΠΌΠ΅Ρ‚ΠΊΠ°] +Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ подсвСтку ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. +::: + +Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, каТдая Π±ΡƒΠΊΠ²Π° запускаСт Π½ΠΎΠ²Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΈ всС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. + +Π”Π°Π²Π°ΠΉΡ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Angular DevTool для профилирования нашСго прилоТСния ΠΈ ΠΏΠΎΠΉΠΌΠ΅ΠΌ, ΠΊΠ°ΠΊ этот инструмСнт ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит Π²Π½ΡƒΡ‚Ρ€ΠΈ нашСго прилоТСния. + +:::note[Π—Π°ΠΌΠ΅Ρ‚ΠΊΠ°] +Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ [страницу ввСдСния Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ](/challenges/performance/) сначала ΠΈ возвращайся. +::: + +Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ своС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ нСсколько Π±ΡƒΠΊΠ² Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ нСсколько Ρ†ΠΈΠΊΠ»ΠΎΠ² обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. + +Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· полос (ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ ΠΆΠ΅Π»Ρ‚ΠΎΠΉ стрСлкой Π½Π° рисункС Π½ΠΈΠΆΠ΅), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π° `PersonListComponent`, `RandomComponent` ΠΈ всС `MatListItem` влияСт Ρ†ΠΈΠΊΠ» обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ взаимодСйствуСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π°. + +![profiler record](../../../../../assets/performance/34/profiler-record.png 'Profiler Record') + +## ПояснСниС + +ЦСль этой Π·Π°Π΄Π°Ρ‡ΠΈ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΊΠ»Π°ΡΡ‚Π΅Ρ€ΠΈΠ·Π°Ρ†ΠΈΡŽ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡŽ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ "OnPush", Π½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ... + +## Подсказки: + +
+ Подсказка 1 + +Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ `ChangeDetectionStrategy.OnPush` Π½ΠΎ этого Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ достаточно. + +
+ +
+ Подсказка 2 + +Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΎΡ‚ списка. + +