Lantern: Use onload handlers to create dependencies for trace events #4600
Comments
patrickhulce
changed the title
|
@patrickhulce i wonder if this is fixed by #5504 ? |
|
Yeah good call I suspect it might be |
|
|
I suspect just the
part would be fixed by async stacks, but I have not looked into it. |
|
This is actually super important for LCP metric accuracy. I'll look into it 👍 |
|
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...
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 :/ |
|
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 View Example Test Page<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function stall(ms = 50) {
const start = Date.now()
while (Date.now() - start < ms) ;
}
</script>
<img src="https://picsum.photos/id/237/400/400" onload="stall(2500)">
<img src="https://picsum.photos/id/236/200/200" onload="stall(250)">
<img src="https://picsum.photos/id/235/200/200" onload="stall(250)">
<img src="https://picsum.photos/id/234/200/200" onload="stall(250)">
<img src="https://picsum.photos/id/233/200/200" onload="stall(250)">
<img src="https://picsum.photos/id/232/200/200" onload="stall(250)">
<img src="https://picsum.photos/id/231/200/200" onload="stall(250)">
<p>some other content</p>
</body>
</html> |
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:
event.args.src_func: 'ImageNotifyFinished'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
The text was updated successfully, but these errors were encountered: