An idea for paint times in developer tools.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.DS_Store
README.md
background.js
icon.png
manifest.json
paint-times.html
paint.js

README.md

Right now, all this extension does is listen for timeline panel events and console.logs the paint durations per frame.

Goal

  • 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.

Ideas

  • Find a way to continuiously repaint the page in JavaScript, the current "Enable continuous page repainting" in Developer Tools seems to handle this in C++. If the Remote Debugging Protocol made this available, that would even better and eliminate the need to repaint in JavaScript.
  • 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[0].rules[0].style.color = null seems 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 border-radius: 0; (recommended)