React Profiler: Что означают сроки?

Question

Я использую реагирующий профилировщик, чтобы сделать мое приложение более эффективным. Обычно он будет отображать график, подобный этому:

Я запутался, потому что время не складывается. Например, было бы целесообразно, чтобы общее время фиксации для «Shell» составляло 0,3 мс, а для «Main» - «0,2 мс из 0,3 мс». Но это не так.

Что именно означают эти сроки и как они складываются?

( примечание: Я прочитал "Представление React Profiler" , но из этого раздела следует, что это соглашение о представлении времени является новым с тех пор, как эта статья .)

Answer 1

Первое число (0,2 мс) - это собственная продолжительность, а второе число (0,3 мс) - это фактическая продолжительность. В основном продолжительность самости - это фактическая продолжительность минус время, потраченное на детей. Я заметил, что числа не всегда складываются идеально, что, я думаю, является либо артефактом округления, либо потому, что некоторое время уходит на скрытую работу. Например, в вашем случае Shell имеет фактическое время 3,1 мс, а длительность собственного времени 0,3 мс, что означает, что 2 дочерних элемента (Navbar и Main) должны составлять 3,1 мс - 0,3 мс или 2,8 мс. Однако мы видим, что Navbar не перерисовывается, поэтому он равен 0 мс, но фактическая продолжительность для Main составляет всего 2,7 мс, а не 2,8 мс. Это не окажет никакого практического влияния, когда вы настраиваете производительность, но это немного противоречит ожиданиям.