Skip to content
19 / 36

Как ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Interaction to Next Paint (INP)?

INP измСряСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ дСйствиСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (ΠΊΠ»ΠΈΠΊ, Ρ‚Π°ΠΏ, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши) ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ отрисовкой ΠΊΠ°Π΄Ρ€Π°. Норма -- Π΄ΠΎ 200ms. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ INP -- ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΈΡ…ΡƒΠ΄ΡˆΠ΅Π΅ взаимодСйствиС Π·Π° сСанс (98-ΠΉ ΠΏΠ΅Ρ€Ρ†Π΅Π½Ρ‚ΠΈΠ»ΡŒ). Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅: ΡΠΎΠΊΡ€Π°Ρ‰Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ main thread (Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠ»Π³ΠΈΠ΅ таски Ρ‡Π΅Ρ€Π΅Π· scheduler.yield()), ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ DOM-измСнСния послС взаимодСйствия.

Как ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Interaction to Next Paint (INP)? | JScriptiser