一个js绘图库的优化技巧

JavaScript020

一个js绘图库的优化技巧,第1张

最近在项目中使用Cytoscape.js、D3.js和DataV等前端绘图库。

图形常见的操作有拖拽、缩放、平移等。

页面出现这些动作事件后,这些绘图库都会抛出一个hook,然我们有机会根据业务需求,在合适的时机完成图形操作。

问题就来了,例如拖拽事件,用户拖拽一个节点是一个持续的过程,浏览器有可能1s中抛出好几百个“drag”事件。

如果每个“drag”事件,我们都去做绘制图形相关的计算,那么会浪费很多计算资源。

因为浏览器一般1s中最多也就绘制60次,也就是说,尽管我们1秒钟计算了好几百次,只有其中60次的计算结果能够展示在界面上,大部分计算都是无效的,白白浪费了计算资源。

那么有什么优化方法呢?

首先想到的是debounce或者throttle函数, 能够降低回调函数的执行频率。但缺点是,时间参数门限的选取比较纠结,参数大了,用户操作会有卡顿延时感;参数门限小了话,又有可能浪费性能。

最好的办法就是浏览器要绘制界面之前,完成相关的计算,这样不多不少,每个计算结果都能得到展示。

所以,最后的答案来了 —— window.requestAnimationFrame(callback) 。这个web API是前端应用绘图库的必备API,能够让用户有丝滑的交互体验,同时让计算开销降到最低。

1、cypress

Cypress是新一代前端测试框架,它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。

2、rollup

rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化,有效减少文件请求大小

3、day.js

2KB 不可变日期和时间库。

4、immer.js

Immer核心实现是利用 ES6 的 proxy,几乎以最小的成本实现了 js 的不可变数据结构,简单易用、体量小巧、设计巧妙,满足了我们对JS不可变数据结构的需求。

5、jsdoc

JSDoc 是一个根据 JavaScript 文件中注释信息,生成 JavaScript 应用程序或模块的API文档的工具。你可以使用 JSDoc 标记如:命名空间,类,方法,方法参数等。从而使开发者能够轻易地阅读代码,掌握代码定义的类和其属性和方法,从而降低维护成本,和提高开发效率。

6、ramda.js

一款实用的 JavaScript 函数式编程库。

7、p-limit

以有限的并发运行多个承诺返回和异步函数

可以限制Javascript中的promise或同时阻止来自服务器的所有请求调用。

8、Akta

为Javascript应用程序量身定制的状态管理库

9、js-cookie

用于处理浏览器cookie的轻量级Javascript API。

做前端开发很多年了,前端库的更新真的是日新月异。多到你数都数不过来。

之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结.

首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.

前端 由于入行门槛低, 更新换代很快, 每年都会有大量新的框架和库出现, 也有大量库被淘汰(比如 JQuery , 但是学习它的设计思想很有必要). 所以我们大可不必担心, 保持自己的学习步伐, 按需学习即可.

比如说你对移动端比较感兴趣, 工作中也刚好涉及到一些技术的应用,那么我可以专门研究移动端相关的技术和框架, 又或者你对企业后台/中台产品感兴趣, 比较喜欢开发PC端项目, 那么我们可以专门研究这种类型的js库或者框架, 接下来笔者也是按照不同前端业务的需求, 来整理一份能快速应用到工作中的js库, 以提高大家的开发效率.

其实还有很多,后期在更新