如何流畅地在浏览器中渲染100万个元素？深入浏览器底层渲染原理图文分享

主要观点总结

本文从表象深入到浏览器底层原理，分析了页面卡顿的原因，并提供了三种解决方案。

关键观点总结

关键观点1: 浏览器事件循环与页面渲染原理

介绍了浏览器事件循环的运行机制，包括单线程、宏任务和微任务、异步机制等，以及这些机制如何与页面渲染协作。

关键观点2: 页面卡顿的原因

同步创建巨量元素到页面上时，导致下一帧的渲染任务无法在短时间内完成，造成了阻塞，占用了主线程，使其他任务无法及时执行。

关键观点3: 解决方案一：使用setTimeout（宏任务分片）

通过将一次性渲染任务分割成多个小任务，使用setTimeout将代码变为异步执行，避免主线程阻塞。

关键观点4: 解决方案二：使用requestAnimationFrame（帧空闲期渲染）

利用requestAnimationFrame产生的回调函数会在GUI渲染线程将要执行渲染任务前执行的特性，精准地控制每次新渲染的元素数量。

关键观点5: 其他解决方案

介绍了使用MessageChannel和requestIdleCallback的解决方案，但由于存在一些局限性，所以不推荐使用。