Lantern: Use onload handlers to create dependencies for trace events

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.

https://developer.chrome.com/docs/lighthouse/overview/

Apache License 2.0

28.28k stars 9.36k forks source link

Lantern: Use onload handlers to create dependencies for trace events #4600

Open patrickhulce opened 6 years ago

patrickhulce commented 6 years ago

When an image has an lengthy onload handler decode, we can connect that long task to the loading of the image. This would help with smoke testing our byte efficiency audits when using Lantern-based estimates too.

Brief investigation for onload:

The parent event fired has event.args.src_func: 'ImageNotifyFinished'
The first child event has event.args.data.type: 'load', event.name: 'EventDispatch'

there's no URL unfortunately but we can probably connect it to an image resource based on timestamp

paulirish commented 6 years ago

@patrickhulce i wonder if this is fixed by #5504 ?

patrickhulce commented 6 years ago

Yeah good call I suspect it might be

connorjclark commented 4 years ago

@patrickhulce i wonder if this is fixed by #5504 ?

this being the entire issue here, or just "there's no URL unfortunately but we can probably connect it to an image resource based on timestamp" ?

patrickhulce commented 4 years ago

I suspect just the

"there's no URL unfortunately but we can probably connect it to an image resource based on timestamp" ?

part would be fixed by async stacks, but I have not looked into it.

patrickhulce commented 4 years ago

This is actually super important for LCP metric accuracy. I'll look into it 👍

patrickhulce commented 4 years ago

This is still fairly difficult :/

Even with our async stacks and sampling profiler all we get to link it to an image URL is the "Finish Loading" event, well before the task, and a "PaintImage" event in a raster thread.

Maybe we can link it all together with...

An EventDispatch event with args.data.type = "load"
that followed a ResourceFinish of an image
that had a PaintImage event within the task

The problem I imagine is going to be when lots of images finish at the same time it's going to be really difficult (impossible?) to identify which was which :/

patrickhulce commented 4 years ago

Alright a bit more investigation and it is not possible with current information available in trace events to identify exactly which load event was being dispatched. We would need to add the network request ID, image URL, or some other identifier to the EventDispatch event in order to make this happen.

View Example Test Page

```html

some other content

```