Description
The performance measurement is currently not super precise as it only collects performance information from the direct JavaScript handler that is called. It does not take layouts triggered by writes that apply in the handlers into account.
See the following article for detailed information: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/amp/
As far as I am aware, there is currently no browser API that can expose this information properly, but it might be possible to workaround:
With the tricks mentioned in the article using requestAnimationFrame(() => setTimeout(handler, 0)) we might be able to measure the cost of one update including it's layout.
Based on this we can measure the difference to the JavaScript handlers.
- An easy approach would be to simply add the difference relative to all handlers executed.
- Further, it might be possible to execute handlers in different combinations the longer the program runs to gather more data to distinguish more expensive from less expensive handlers and apply the results proportionally.