javascript 绘制 100 万条数据 卡顿 问题解决方案：per-request frame rendering
发布时间
阅读量：
阅读量
函数：
1.window.requestAnimationFrame(callback)
callback：在下一次页面重绘前用于更新动画帧的函数（即前述的回调函数）。
作用：向浏览器发出信号，表明希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数以实现动画效果。此方法需提供一个回调函数作为参数，该函数将在浏览器进行下一次页面重绘前被调用。
2.document.createdocumentfragment()
作用：生成一个虚拟的节点对象，该对象具备完整的属性与方法集合。通过这种方式可以有效减少对DOM的操作次数。
示例代码：在一个循环中执行10万次操作，并在每次循环时向页面中添加一个“li”标签，标签内容为随机数。
说明：若一次性完成10万次循环操作，由于每次循环都需要对DOM进行修改，而JavaScript是阻塞式执行的，其他任务将无法获得执行机会，这将导致浏览器出现明显的卡顿现象。为解决这一问题，可以采用分段处理的方式，在一定时间间隔内仅执行少量添加操作。例如每次添加20个元素，并借助requestAnimationFrame方法传入的函数，在浏览器每次重绘页面时触发该函数的执行。
<!DOCTYPE html>
<html lang="en">
<head>全部评论 (0)
还没有任何评论哟~