Question

Does anyone know what the triangular warning icon on Google Chrome Developer Tools Timeline View represents? When I hover over it, click it etc – there’s no different information provided than for any of the other events. The event itself doesn’t look to be long either, I can’t work out what it’s warning me about.

Thanks.

Answer 1

This warning sign means that some code (e.g. element.offsetHeight or document.width) has triggered a synchronous layout event, which can adversely affect the performance in some cases. You should be able to see the associated stack trace if you expand the event tree.

A full explanation of this triangle and what it means is in the DevTools documentation:
https://developer.chrome.com/devtools/docs/timeline#locating-forced-synchronous-layouts

_{(source: chrome.com)}

It includes a Forced Synchronous Layout demo to understand it better.