interview web

性能优化

1.减少请求数量
2.减小资源大小
3.优化网络连接
4.优化资源加载
5.减少重绘回流
6.性能更好的API
7.webpack优化

 

 

 

 

页面需要渲染10万条数据？

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul></ul>

<script>
  console.time()
  // 插入10万条数据
  const total = 100000
  let ul = document.querySelector('ul')

  // 懒加载的思路 -- 分段渲染
  // 1.一次渲染一屏的量
  const once = 20
  // 2.全部渲染完需要多少次，循环的时候要用
  const loopCount = total / once
  // 3.已经渲染了多少次
  let countHasRender = 0


  function add () {
    // 创建虚拟节点，使用createDocumentFragment 不会触发渲染
    const fragment = document.createDocumentFragment()
    // 循环10万次
    for (let i = 0; i < once; i++) {
      const li = document.createElement('li')
      li.innerText = Math.floor(Math.random() * total)

      fragment.appendChild(li)
    }
    // 最后把虚拟节点append到ul上
    ul.appendChild(fragment)

    // 4.已渲染的次数 + 1
    countHasRender += 1
    loop()
  }
  add()

  // 最重要的部分来了
  function loop() {
    // 5.如果还没渲染完，那么就使用 requestAnimationFrame来继续渲染
    if (countHasRender <loopCount) {
      // requestAnimationFrame叫做逐帧渲染
      // 类似setTimeout
      // 帧一秒钟播放多少张图片，一秒钟播放的图片越多，动画就越流畅
      window.requestAnimationFrame(add)
    }
  }

  console.timeEnd()
</script>
</body>
</html>

 

posted @ 2021-03-01 09:56  慕斯undefined  阅读(71)  评论(0)  编辑  收藏  举报