Right now, all this extension does is listen for timeline panel events and console.logs the paint durations per frame.
- Discover what CSS properties are contributing to long paint times.
This is a 'paint time' chrome extension inspired by this comment.
This repo is unlikely to be commited to regularly by myself, it exists mainly to serve as inspiration to other developers and/or developer tools committers. Ideally, this would be handled in developer tools itself rather than having to install a custom extension.
- Find a smart way to get user defined CSS on elements possibly through
document.styleSheets. Should there be a whitelist of likely poor performing properties? E.g.
['boxShadow', 'borderRadius']whose properties are toggled to their defaults? This avoids toggling every single property (which could be a lot) if a reset.css was used for example.
- How can we reset a style to its default? Use the user agent stylesheet? Alternatively,
document.styleSheets.rules.style.color = nullseems to work.
- Use something like html2canvas to render a before and after of the portion of the DOM which recommendations have been produced for. E.g. Here is what
<span id="some-elem... ...ipsum</span>looks like with
border-radius: 10px;(current) and