开发者社区> 问答> 正文

web有没有可能用webgl实现同一套的方案,达到高性能的dom的目的?

web有没有可能用webgl实现同一套的方案,用webgl实现清渲染层,实现一套dom和css的子集,达到高性能的dom的目的?

展开
收起
OSC开源社区 2024-05-28 13:06:24 30 0
1 条回答
写回答
取消 提交回答
  • 个人的观点是,在实现层面是可行的,性能的提升与否需要有测试数据的考证。
    先来看一下涉及到的两项关键技术:虚拟dom和webgl加速

    1. 虚拟dom:针对不同平台封装底层细节,为开发者提供多端统一的开发体验。从React Native到现在的flutter,这类框架致力于解决多端开发的痛点,不过还是有一些急需解决的问题,比如现在React Native就在面对非常大的挑战。
    2. webgl加速:webgl可以在浏览器端调用GPU来获得高性能,是一个快速发展的领域,将webgl加速落地的项目也不少。在加速渲染方面,有highchart boost(一般散点图在100k的点的量级上就会有一定的性能问题,而使用webgl散点图可以轻松渲染1000k的散点);在加速计算方面,有tensorflow.js(使用webgl来做tensor运算)。

    回到开始的问题,首先以webgl实现虚拟dom来达到html和css的子集理论上是可行的。
    在现有的技术框架下,实现一个虚拟dom的可行方案(暂不考虑性能问题):创建three.js对象替代dom对象,所有对象缓存在内存中,不需要真正挂载到dom上,使用raycaster来控制对象的捕获与交互,该框架只需要在有浏览器环境支持即可运行。当然在dom设计的时候也要考虑一定的降级方案,比如three.js除了webgl渲染器外同时也实现了canvas渲染器。如果把性能的问题也一并考虑进来,从理论上来说,应用webgl,对于需要频繁挂载、卸载dom对象的应用或者大量dom搜索计算的应用,会有一定提升。不过由于不同的浏览器对于dom对象都有一定的优化,如果使用虚拟dom替代原来的静态dom方案的话有很大可能无法享受部分此类特性,具体性能提升情况需要在开发完成后,经过测试才能有一个定论。

    2024-05-28 14:46:02
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Web应用系统性能优化 立即下载
高性能Web架构之缓存体系 立即下载
PWA:移动Web的现在与未来 立即下载