场景题

向 div 插入 1000 个 span

问题分析
如果直接用 appendChild() 循环插入，每次插入都会引起重排，效率较差

优化方法

1. 使用字符串拼接，再用 innnerHtml 一次性插入到 div 中

  const div = document.getElementsByTagName('div')[0]
  let str = ''
  for(let i = 1; i <= 100; i++){
    str += '<span>这是第' + i + '个</span>'
  }
  div.innerHTML = str

2. 使用 createDocumentFragment() 方法创建一个虚拟的节点对象，将所有 span 插入该虚拟节点，再将该虚拟节点整个插入到 html 中

  const div = document.querySelector('div')
  const fragment = document.createDocumentFragment()
  for(let i = 1; i <= 100; i++){
    const span = document.createElement('span')
    span.innerHTML = `这是第${i}个`
    fragment.appendChild(span)
  }
  div.appendChild(fragment)

随机打乱数组