Когда открываешь «Call Tree» в «DevTools Performance» и видишь функцию с огромным «Total time», первая мысль - вот она, причина всех тормозов. Но это может быть ловушка.

«Total time» показывает общее время функции и всех её потомков. Если функция вызывает другие функции, которые сами по себе тяжёлые, «Total time» будет большим, но это не значит, что проблема в самой функции. «Self time» показывает время, потраченное только на саму функцию без учёта вызовов внутри. Если «Self time» маленький, а «Total time» большой - проблема не в этой функции, а в том, что она вызывает.

Например, если у onClick «Total time» 15,948 мс, а «Self time» 1.3 мс, это значит, что сама функция почти ничего не делает, но внутри неё вызываются другие функции, которые и тормозят. Оптимизация onClick не даст эффекта - нужно искать, какая из дочерних функций занимает время. Разворачиваешь вложенные вызовы, видишь handleOperation с «Total time» 15,947 мс, но «Self time» 0.0 мс - тоже не она. Идёшь глубже и находишь runHeavyTask с «Self time» 15,663 мс - вот она, настоящая проблема.

Обратная ситуация: функция с большим «Self time» - это именно то, что нужно оптимизировать. Если у функции «Total time» 15,946 мс и «Self time» 15,663 мс, значит, она сама по себе тяжёлая, и оптимизация именно этой функции даст максимальный эффект.

Родительские операции могут прятать внутри себя тяжёлые дочерние вызовы. Если видишь функцию с большим «Total time», но маленьким «Self time» - не спеши её оптимизировать. Разворачивай вложенные вызовы и ищи, где на самом деле тратится время. Часто проблема не там, где кажется на первый взгляд.

Но вот вопрос ❓

Если «Call Tree» показывает, где тратится время, почему так много разработчиков всё равно оптимизируют не те функции? Может быть, мы слишком доверяем первым числам, которые видим, и не копаем глубже? #разработка #performance #браузер