Skip to content

Instantly share code, notes, and snippets.

@jantimon

jantimon/css-om-test.js

Created May 25, 2024 09:00
Show Gist options
  • Save jantimon/cd7bd00a851c317fd684aac465497840 to your computer and use it in GitHub Desktop.
Save jantimon/cd7bd00a851c317fd684aac465497840 to your computer and use it in GitHub Desktop.
Download ZIP
different test cases to compare recalculate style timings
Raw
css-om-test.js
const styleElement = document.createElement("style");
styleElement.innerHTML = `@property --unused-property-no-inherit { inherits: false }`
document.head.appendChild(styleElement);
const styleSheet = styleElement.sheet;
setTimeout(() => {
performance.mark("inject html opacity 0.5");
console.log("add to <html> opacity: 0.5");
styleSheet.insertRule("html { opacity: 0.5 }", styleSheet.cssRules.length);
}, 1000);
setTimeout(() => {
performance.mark("inject html --unused-property: 999");
console.log("add to <html> --unused-property: 999");
styleSheet.insertRule("html { --unused-property: 999 }", styleSheet.cssRules.length);
}, 2000);
setTimeout(() => {
performance.mark("inject html --unused-property-no-inherit: 999");
console.log("add to <html> -unused-property-no-inherit: 999");
styleSheet.insertRule("html { --unused-property-no-inherit: 999 }", styleSheet.cssRules.length);
}, 3000);
setTimeout(() => {
performance.mark("add class to html element");
console.log("add to <html> a class");
document.querySelector("html").classList.add("unused-class")
}, 4000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment