Skip to content

Instantly share code, notes, and snippets.

@geelen geelen/perf.js
Created Sep 24, 2016

Embed
What would you like to do?
function makeRandomColor() {
return '#' + Math.random().toString(16).substr(-6)
}
let tag = document.createElement('style')
tag.type = 'text/css'
tag.appendChild(document.createTextNode(''));
(document.head || document.getElementsByTagName('head')[0]).appendChild(tag)
let styleSheet = [...document.styleSheets].filter(x => x.ownerNode === tag)[0]
let group = document.createElement('div')
document.head.appendChild(group)
let current
let colours = Array.from({ length: 8000 }).map(makeRandomColor)
let rules = colours.map((c, i) => `._${i} { color: ${c}; }`)
console.profile('createTextNode')
rules.forEach((rule, i) => {
if (i % 40 === 0) {
current = document.createElement('style')
document.head.appendChild(current)
}
current.appendChild(document.createTextNode(rule))
})
console.profileEnd('createTextNode')
// console.profile('insertRule')
// rules.forEach(rule => styleSheet.insertRule(rule, styleSheet.cssRules.length))
// console.profileEnd('insertRule')
// console.profile('insertAdjacentHTML')
// rules.forEach(rule => document.head.insertAdjacentHTML('beforeend', `<style>${rule}</style>`))
// console.profileEnd('insertAdjacentHTML')
// console.profile('appendChild')
// rules.forEach((rule,i) => {
// if (i % 100 === 0) {
// current = document.createElement('div')
// group.appendChild(current)
// }
// let s = document.createElement('style')
// s.appendChild(document.createTextNode(rule))
// current.appendChild(s)
// })
// console.profileEnd('appendChild')
console.log(`Inserted ${rules.length} rules!`)
console.log(performance.now())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.