perf.js

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())