组织者：前端早早聊
分享人：逸达，阿里
渲染优化方案
基于时间切片分批渲染DOM
长任务会卡死浏览器，切割任务分块执行主线程就不会阻塞。所以即使时间慢了，最终图还是会出来，不至于卡死浏览器。
关键API
window.requestIdleCallback(callback);
该方法会在浏览器空闲期间调用。
基于可视化范围节点裁减渲染
只渲染实际需要渲染的内容所在的画布区域（再加一些缓冲区域），其余被裁减的区域不渲染，这样会大大提高性能。
基于缩放级数的节点分级LOD（Lazyload）处理
只有在用户需要看细节时再渲染细节内容。
基于Canvas渲染节点
基于DOM（或SVG）开发成本较低，但性能问题较大
基于Canvas性能优异，但开发成本较高，且难以实现灵活布局。
Canvas化
通过react-reconciler实现的基于Yoga Layout布局的自定义G Canvas渲染器。可广泛支持底层基于G渲染的AntV系列产品，如G6，G2。
它支持完整的Flexbox布局，及CSS语法子集。提供基础Host组件：Shape、Rect、Text、Image等
既有极高的渲染性能，又有接近于HTML+CSS的开发效率
更多优化
- 服务端预渲染节点
- WebGL渲染器
- WebWorker预计算
推荐资料
- 自己写个React渲染器: 以 Remax 为例(用React写小程序)juejin.cn/post/684490…
- Building a Custom React Rendererhttps://www.youtube.com/watch?v=CGpMlWVcHok
- Figma 技术博客www.figma.com/blog/sectio…
- Massive Environments from 0 to 200 MPHhttps://www.gdcvault.com/play/1012335/Streaming-Massive-Environments-from-0
- 设计模式：可复用面向对象软件的基础Erich Gamma（Eclipse, VSCode 负责人）
