28 | Canvas、SVG与WebGL在性能上的优势与劣势
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
性能优化，一直以来都是前端开发的难点。
我们知道，前端性能是一块比较复杂的内容，由许多因素决定，比如，网页内容和资源文件的大小、请求数、域名、服务器配置、CDN 等等。如果你能把性能优化好，就能极大地增强用户体验。
在可视化领域也一样，可视化因为要突出数据表达的内容，经常需要设计一些有视觉震撼力的图形效果，比如，复杂的粒子效果和大量元素的动态效果。想要实现这些效果，图形系统的渲染性能就必须非常好，能够在用户的浏览器上稳定流畅地渲染出想要的视觉效果。
那么针对可视化渲染，我们都要解决哪些性能问题呢？
可视化渲染的性能问题有哪些？
由于前端的可视化也是在 Web 上展现的，因此像网页大小这些因素也会影响它的性能。而且，无论是可视化还是普通 Web 前端，针对这些因素进行性能优化的原理和手段都一样。
所以我今天想和你聊的是，可视化方面特殊的性能问题。它们在我们熟悉的 Web 前端工作中并不常见，通常只在可视化中绘制复杂图形的时候，我们才需要重点考虑。这些问题大体上可以分为两类，一类是渲染效率问题，另一类是计算问题。
我们先来看它们的定义，渲染效率问题指的是图形系统在绘图部分所花费的时间，而计算问题则是指绘图之外的其他处理所花费的时间，包括图形数据的计算、正常的程序逻辑处理等等。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
前端可视化领域涉及的图形系统包括Canvas、SVG和WebGL，它们各自具有不同的性能特点。Canvas2D适合绘制少量图形，SVG适合中等数量的图形，而WebGL适合高性能渲染大量图形。性能优化方面需要考虑渲染效率和计算问题。Canvas和SVG的性能受绘制元素的数量和大小影响，而WebGL的渲染性能取决于渲染次数、着色器执行次数和复杂度。此外，HTML/CSS的渲染性能也受到影响，需要考虑元素数量和大小。在WebGL中，采用批量绘制技术可以提高性能，而不采用这个技术则会影响渲染方案的性能。通过具体代码示例和性能测试，文章深入探讨了这些图形系统的性能特点和优化方法，为读者提供了全面的前端可视化性能优化指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(4)
- 最新
- 精选
躺着看云飘老师, 近期在开发中遇到一个需求需要绘制每秒200个数据的心电图. 图表数量多就会出现卡顿. 但是CPU和内存都内有吃满. 是不是可以用D3和Spritejs的webgl渲染结合, 来解决这个问题呢?作者回复: 对，你也可以试一下用性能篇讲解的原理来解决问题。
2020-08-2724
undefined利用GPU的渲染，在相对数据较多的情况下，集成显卡的电脑是不是就会卡2023-08-08归属地：四川
l_j_dota_1111渲染次数，和着色器执行次数分别指的什么呢2021-08-09
渴望做梦老师，如何提神svg的渲染性能呢，我们开发一了一个甘特图，但是节点一多就会卡顿？2021-07-02
收起评论