Add profiling marks to the engine

[pmdartus]

Description

In order to investigate performance issues related, we should provide add markers to track where we spend time in the different lifecycle hooks.

Previous discussions

@caridy commented on Nov 16, 2016

connected, disconnected and updated should be the 3 phases that somehow (in dev-mode) we should report so that the Timeline can show them accordingly. The latest version of react provides similar capability.

---

@pmdartus on Nov 18, 2016

Couple of links about this subject:

• React 15.4 changelog
• Pull request

---

@caridy commented on Apr 4, 2017

Question: how to do this with a service? If possible, we should try to do it in a service so we don't have to have all that in the engine itself. @p-dartus can you take care of identifying the important moments for the marks so we can validate the thesis that this might be doable via services?

---

@diervo commented on Apr 4, 2017
Lessons learned from instrumentation work in Aura, is that it will be hard to make everything trough a service.
IMO the best approach will be combine hooking points with a service, and go from there.

---

@pmdartus commented on Apr 7, 2017

I think it will be difficult to leverage Raptor services for the component profiling. In the current design, services hooks are triggered only after their associated life-cycle event. But in the case of the profiling marks, it requires a hook before and after the life-cycle event.

I think that marking the following methods would really improve the debugability and the performance profiling:

• All the boundaries between the framework and the user code: constructor, connectedCallback, disconnectedCallback, renderedCallback, attributeChangedCallback, render. Those marks give a general idea of when the different lifecycle events are triggered.
• And the rehydrate method. This method is at the root of the children component creation call stack. This mark gives a better idea of the page structure, and what part of the component tree is currently getting created/rendered.

Here are the generated marks when adding hooks to the methods in invoker.js and the rehydrate method in cmp.js

---

@pmdartus commented on Apr 11, 2017

@cpatino Any thoughts on this ?

---

@caridy commented on Apr 11, 2017

I'm ok with this, but let's make sure we brainstorm about how to add those marks. If they should be permanent, or if they should be in place only in dev mode, etc.

---

@caridy commented on Oct 10, 2017

@p-dartus can you work on the format proposal for this?