跟月影学可视化
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
新⼈⾸单¥29.9
4288 人已学习
课程目录
已更新 33 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色?
11|图案生成:如何生成重复图案、分形图案以及随机效果?
12 | 如何使用滤镜函数实现美颜效果?
13 | 如何给简单的图案添加纹理和复杂滤镜?
14 | 如何使用片元着色器进行几何造型?
15 | 如何用极坐标系绘制有趣图案?
16 | 如何使用噪声生成复杂的纹理?
17 | 如何使用后期处理通道增强图像效果?
视觉高级篇 (10讲)
18 | 如何生成简单动画让图形动起来?
19 | 如何用着色器实现像素动画?
20 | 如何用WebGL绘制3D物体?
21 | 如何添加相机,用透视原理对物体进行投影?
22 | 如何用仿射变换来移动和旋转3D物体?
23 | 如何模拟光照让3D场景更逼真?(上)
24 | 如何模拟光照让3D场景更逼真?(下)
25 | 如何用法线贴图模拟真实物体表面
26 | 如何绘制带宽度的曲线?
27 | 案例:如何实现简单的3D可视化图表?
性能篇 (3讲)
28 | Canvas、SVG与WebGL在性能上的优势与劣势
29 | 怎么给Canvas绘制加速?
30|怎么给WebGL绘制加速?
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

28 | Canvas、SVG与WebGL在性能上的优势与劣势

月影 2020-08-26
你好,我是月影。
性能优化,一直以来都是前端开发的难点。
我们知道,前端性能是一块比较复杂的内容,由许多因素决定,比如,网页内容和资源文件的大小、请求数、域名、服务器配置、CDN 等等。如果你能把性能优化好,就能极大地增强用户体验。
在可视化领域也一样,可视化因为要突出数据表达的内容,经常需要设计一些有视觉震撼力的图形效果,比如,复杂的粒子效果和大量元素的动态效果。想要实现这些效果,图形系统的渲染性能就必须非常好,能够在用户的浏览器上稳定流畅地渲染出想要的视觉效果。
那么针对可视化渲染,我们都要解决哪些性能问题呢?

可视化渲染的性能问题有哪些?

由于前端的可视化也是在 Web 上展现的,因此像网页大小这些因素也会影响它的性能。而且,无论是可视化还是普通 Web 前端,针对这些因素进行性能优化的原理和手段都一样。
所以我今天想和你聊的是,可视化方面特殊的性能问题。它们在我们熟悉的 Web 前端工作中并不常见,通常只在可视化中绘制复杂图形的时候,我们才需要重点考虑。这些问题大体上可以分为两类,一类是渲染效率问题,另一类是计算问题
我们先来看它们的定义,渲染效率问题指的是图形系统在绘图部分所花费的时间,而计算问题则是指绘图之外的其他处理所花费的时间,包括图形数据的计算、正常的程序逻辑处理等等
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥29.9
立即订阅
登录 后留言

精选留言(1)

  • 躺着看云飘
    老师, 近期在开发中遇到一个需求需要绘制每秒200个数据的心电图. 图表数量多就会出现卡顿. 但是CPU和内存都内有吃满. 是不是可以用D3和Spritejs的webgl渲染结合, 来解决这个问题呢?
    2020-08-27
    1
    1
收起评论
1
返回
顶部