window.requestAnimationFrame API在动画方面有非常大的运用代价。
1.如何渲染几万条数据？<!DOCTYPE html><html lang=\"大众en\"大众> <head> <meta charset=\公众UTF-8\公众> <meta name=\"大众viewport\公众 content=\公众width=device-width, initial-scale=1.0\"大众> <meta http-equiv=\公众X-UA-Compatible\"大众 content=\"大众ie=edge\"大众> <title>Document</title></head><body><ul>控件</ul><script> setTimeout(() => { // 插入十万条数据 const total = 100000; // 一次插入 20 条，如果以为性能不好就减少 const once = 20; // 渲染数据统共须要几次 const loopCount = total / once; let countOfRender = 0 let ul = document.querySelector(\"大众ul\公众); function add() { // 优化性能，插入不会造成回流 const fragment = document.createDocumentFragment(); for (let i = 0; i < once; i++) { const li = document.createElement(\"大众li\公众); li.innerText = Math.floor(Math.random() total); fragment.appendChild(li); } ul.appendChild(fragment); countOfRender += 1; loop(); } function loop() { if (countOfRender < loopCount) { window.requestAnimationFrame(add); } } loop(); }, 0);</script></body></html>
2.window.requestAnimationFrame()先容window.requestAnimationFrame() 见告浏览器——你希望实行一个动画，并且哀求浏览器不才次重绘之前调用指定的回调函数更新动画。该方法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前实行；
把稳：若你想在浏览器下次重绘之前连续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
当你准备更新动画时你该当调用此方法。这将使浏览器不才一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数实行次数常日是每秒60次，但在大多数遵照W3C建议的浏览器中，回调函数实行次数常日与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐蔽的<iframe> 里时，requestAnimationFrame() 会被停息调用以提升性能和电池寿命。
回调函数会被传入DOMHighResTimeStamp参数，DOMHighResTimeStamp指示由RequestAnimationFrame（）排队的回调开始触发的韶光。指示当前被 requestAnimationFrame() 排序的回调函数被触发的韶光。在同一个帧中的多个回调函数，它们每一个都会接管到一个相同的韶光戳，纵然在打算上一个回调函数的事情负载期间已经花费了一些韶光。该韶光戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。
