BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

如何评估一个JavaScript语言库

| 作者 谢丽 关注 11 他的粉丝 发布于 2015年5月27日. 估计阅读时间: 6 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在进行Web开发时,JavaScript库的选择很重要。Chirs Love是一名有着大约20年经验的Web开发专家,同时也是《高性能单页Web应用程序》一书的作者。近日,他撰文介绍了自己选择JavaScript库所遵循的一些原则。

库的大小

Microjs.com是Chris最喜欢的JavaScript库资源。该站点有一个原则,就是开发者提交的JavaScript库压缩后必须小于5KB。Chris认为,5KB已经不小了。他之所以将库的大小看得如此之重是因为,文件越大,脚本求值和HTTP请求耗时就越长。JavaScript求值是一个经常被忽略的问题,但这是开发者应该考虑的问题。在JavaScript加载和求值的过程中,浏览器会停止其它一切动作。因此,脚本越小越好。

JavaScript库的大小影响的不只是加载时间。库越大,说明其功能越多。这意味着浏览器需要请求和处理许多应用程序并不需要的代码。库越大,问题会越多。一个好的JavaScript库应该专门解决一个问题。当开发者增加解决相关问题的代码时,库就开始变成框架。在若干应用程序中,框架的许多代码从来都不执行。

Chris以jQuery为例说明了上述观点。他曾经非常喜欢jQuery,但现在他已经不在应用程序中使用它。因为几年前,在为一个需要快速加载的移动Web应用做架构时,他发现jQuery会严重降低性能。经过研究,他了解到,使用document.querySelectorAll及其它浏览器原生API访问DOM非常简单,速度比jQuery快上万倍,还不需要额外的JavaScript代码,并且所有的浏览器都支持相同的原生API。然后,他又用实现jQuery AJAX函数接口的AJAX库Reqwest取代了jQuery的AJAX功能。Reqwest库压缩后只有3.4KB。再后来,他甚至都不再使用Reqwest,因为只需要大约20行代码就可以实现AJAX功能

现在,Chris使用他自己编写的框架DollarBill来完成他过去使用jQuery所做的一切(AJAX功能除外)。该框架与jQuery的一个重要不同是,它只有12KB,而jQuery超过110KB。类似jQuery的框架还有许多,Microjs网站所有者Thomas Fuchs创建的Zepto也是一例。另外,在大小评估过程中,要将JavaScript库使用的CSS、HTML、图片及字体计算在内。在Chris看来,5KB是在大多数情况下都应遵循的一个原则,而14KB是上限。

易用性

问题简单,解决问题的代码就简单,而库应该让代码更简单,因为库是一个经过重构的、可重用的常见问题解决方案。因此,在评估库时,Chris会查看库的文档和示例程序,看看配置是否复杂、函数是否复杂、是否需要预编译等等。如果“是”太多,他就会考虑选择其它的方案。也就是说,一个好的库,应该提供友好的语法、易用的接口,应该能够提高开发者的效率,而且不能以降低用户体验为代价。

外部依赖

一个库有外部依赖是个不好的信号。在Chris看来,这是由于作者对浏览器不够了解,无法提供高效的解决方案所导致的。外部依赖会导致一个小库变大。比如,他不会使用Bootstrap组件,因为它们依赖jQuery。这违背第一个原则。如果开发者要使用Bootstrap,他建议使用类似UNCSS这样的工具移除用不到的CSS。另外,他还提供了一个可选的响应式CSS库Skeleton。该库只有13.2KB,而且没有外部依赖。Chris认为,库应该使用浏览器原生API进行编写,而不是其它第三方库。他经常会阅读一个库的源代码,从中选取自己需要的部分,然后编写自己的库。

内存泄露

在现代Web应用程序中,单个请求持续的时间比传统Web页面要长许多。Chris的标准是,Web应用程序应该足够健壮,可以一个周不刷新而仍然处于活动状态。这就需要避免出现内存泄露。它会导致Web应用程序性能下降,甚至崩溃。但是,所有的主流JavaScript框架和库都存在内存泄露。开发者可以参考Chris使用IE内存分析工具追踪内存泄露的示例,查找可能出现泄露的代码。内存泄露是他选择库的一个主要决定因素。

代码质量

阅读代码可以学到许多东西。越是理解如何编写好的代码,就越容易识别出不好的代码。因此,阅读代码可以判断库的优劣。

除了上述原则外,可重用性也是Chris考量的一个因素。他会优先考虑可以在多个项目中重用的库。另外,如果没有找到合适的库,那么开发者可以编写自己的库。总之,选择好的库或框架对于应用程序开发而言非常重要。但库可能存在问题,所以在使用库编写代码之前务必对它做一个评估。


感谢郭蕾对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入InfoQ读者交流群InfoQ好读者)。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

某些时候,性能好些变得越来越不重要 by Chang River

而开发者的时间好像越来越值钱,所有jQuery还是必需的。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT