写点什么

如何评估一个 JavaScript 语言库

  • 2015-05-26
  • 本文字数:1850 字

    阅读完需:约 6 分钟

在进行 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 好读者)。

2015-05-26 09:153256
用户头像

发布了 1008 篇内容, 共 426.3 次阅读, 收获喜欢 346 次。

关注

评论

发布
暂无评论
发现更多内容

RocketMQ 打破锁性能瓶颈之道

Apache RocketMQ

云原生 消息队列

AI英语口语练习APP的开发

北京木奇移动技术有限公司

软件外包公司 AI英语学习 AI英语

深度剖析 RocketMQ 5.0 之 IoT 消息:物联网需要什么样的消息技术?

Apache RocketMQ

RocketMQ 云原生 物联网 IoT 消息队列

基于模型蒸馏的大模型文案生成最佳实践

阿里云大数据AI技术

人工智能 大数据 大模型 大语言模型 大模型蒸馏

利用CSRF暴力破解用户ID实现批量删除用户攻击

qife

CSRF WEB安全

大数据-51 Redis 分布式锁到哨兵机制:一文掌握Redis高可用架构

武子康

Java redis 大数据 缓存 分布式

深度剖析 RocketMQ 5.0 之事件驱动:云时代的事件驱动有啥不同?

Apache RocketMQ

RocketMQ 云原生 消息队列 事件总线Eventbridge

哈尔滨二级等保测评:关注重点与实施要点

等保测评

哈尔滨三级等保建设:从规划到落地的关键步骤

等保测评

区块链预付卡APP的运营策略

北京木奇移动技术有限公司

区块链开发 软件外包公司 web3开发

算法赋能再升级!非凸底仓增强算法全面上线江海证券

非凸科技

区块链预付卡APP的上线流程

北京木奇移动技术有限公司

区块链开发 软件外包公司 web3开发

Mac mini玩游戏怎么样?怎么提高Mac mini玩游戏的流畅度?

阿拉灯神丁

CrossOver Mac下载 如何在Mac上运行win游戏 苹果电脑必备软件 Mac游戏推荐 虚拟机安装

基于 Apache RocketMQ 的 ApsaraMQ Serverless 架构升级

Apache RocketMQ

云原生 事件驱动 消息队列

预制菜加工预制菜加工厂智能化生产管理MES系统全面解决方案厂智能化生产管理MES系统全面解决方案

万界星空科技

mes 预制菜加工 预制菜工厂 预制菜生产管理 食品加工MES

开发者空间安装ODBC驱动,编写应用程序操作GaussDB数据库

华为云开发者联盟

数据库 华为云 Gauss DB ODBC 华为开发者空间

构建编程智能体一年实践的经验教训分享

Baihai IDP

程序员 AI AI Agent 编程智能体

海外版“JoyLinker”来了!全家桶套件免费开放!

BeeWorks

即时通讯 IM 私有化部署

深度剖析 RocketMQ 5.0 之架构解析:云原生架构如何支撑多元化场景?

Apache RocketMQ

RocketMQ 云原生 消息队列

开赛 | KWDB 核心贡献挑战赛,30万奖金池等你来瓜分!

KaiwuDB

生产管理系统赋能烟草行业:激活高效生产新动能

中烟创新

提示注入2.0:混合AI威胁下的新型网络安全挑战

qife

网络安全 提示注入

经典MCP服务器漏洞如何威胁您的整个AI代理系统

qife

SQL注入 漏洞挖掘

中烟创新推出“小快轻准”应用产品,助力中小企业数字化转型

中烟创新

1688图片搜索商品API指南

tbapi

1688API接口 1688拍立淘接口 1688图片搜索API 1688拍立淘api

Apache RocketMQ 创新论文被软件工程顶会 FM 2024 录用

Apache RocketMQ

企业为什么需要私有化部署的IM软件?

BeeWorks

即时通讯 IM 私有化部署

基于YOLOv8的交通车辆(12种常见车型)实时检测系统识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!

申公豹

yolov8

深度剖析 RocketMQ 5.0 之消息进阶:如何支撑复杂业务消息场景?

Apache RocketMQ

RocketMQ 云原生 消息队列

微店商品详情API指南

tbapi

微店API 微店商品数据采集 微店商品详情API

即时通讯:BeeWorks私有化方案重塑企业沟通方式

BeeWorks

即时通讯 IM 私有化部署

如何评估一个JavaScript语言库_JavaScript_谢丽_InfoQ精选文章