罗列一下备选的移动web开发类库,简单对比他们的加载,初始化时间
在实际应用中,去纠结某一个方法执行一万遍,不同类库性能上几毫秒的差异,意义不是特别大,目前美店的优化的方向还是减小类库体积,初始化时间。所以这里并没有参考网上的测试报告,感兴趣的可以点这里自行测试
- 自行测试结果如下
手机端wifi下30次加载&执行时间统计如下
类库 | 大小 | 首次耗时 | 平均耗时 |
---|---|---|---|
jquery | 85k | 111ms | 71ms |
jquery-build | 50k | 79ms | 55ms |
zepto | 24k | 97ms | 38ms |
jquip | 32k | 69ms | 35ms |
sprint | 17k | 41ms | 34ms |
kissy-mini | 31k | 50ms | 27ms |
kissy-seed | 44k | 81ms | 57ms |
-
包含以下7个库
-
jquery
-
jquery(build)
-
zepto(build)
-
jquip
-
sprint
-
kissy mini
-
kissy seed
-
-
执行 grunt,构建出需要的文件
-
运行 python -m SimpleHTTPServer 起一个本地服务,手淘或其他浏览器访问该页面,页面将自动刷新30次,计算出脚本加载与执行的平均值。
-
修改time.js的阈值以及setTimeout时间,可进行更多次加载,取的更精确的结果
-
版本 jquery v2.1.4
-
手机端wifi下30次加载&执行时间
-
首次耗时 111ms
-
平均耗时 71ms
-
-
在gruntfile中增加要删除的模块,进入到目录执行grunt,文件会自动打包到lib文件夹,可使用 jquery-build.html 调试&查看效果
-
例如:不删除任何模块,打包后为84K。 删除 "ajax", "deprecated", "sizzle"后,打包后的文件体积减少到了58k
-
打开jquery API:http:https://api.jquery.com/ 在左侧的模块中,以下几个是支持移除的
-
Ajax
-
CSS
-
Deprecated
-
Event Alias
-
Dimensions
-
Effects
-
Offset
-
-
移除任何一个模块,这个模块里面对应的所有方法将不再可用
-
手机端wifi下30次加载&执行时间
-
首次耗时 79ms
-
平均耗时 55ms
-
-
zepto builder http:https://github.e-sites.nl/zeptobuilder/
-
zepto默认构建的库大小为24k(以前的版本好像是18左右)
-
默认安装以下几个模块
-
zepto
-
event
-
ajax
-
form
-
ie
-
-
执行 MODULES="zepto event ajax form iedetect fx fx_methods assets data callbacks deferred selector stack ios3" npm run-script dist 安装全部模块(看了一下,基本上都会用到,touch,gesture目前暂时需求,可以先移除),压缩前79.5k,压缩后为35k
-
手机端wifi下30次加载&执行时间
-
首次耗时 97ms
-
平均耗时 38ms
-
-
非常小巧的jquery构建版本,号称实现了jquery 90%的功能,以下是它的组成
-
jquip.js (6.6k,最新版19k)
-
jquip.events.js (1k,最新版3k)
-
jquip.docready.js (.5k,最新版1k)
-
jquip.css.js (2.5k,最新版6k)
-
jquip.ajax.js (1k,最新版3k)
-
-
除此之外还有一些可选的选择器引擎,后期如果考虑自己实现jquery,可以借鉴
-
以上几个模块压缩版为32k
-
手机端wifi下30次加载&执行时间
-
首次耗时 69ms
-
平均耗时 35ms
-
-
sprint提供常用的dom操作方法,体积非常小,压缩后的版本仅有17k,而且以官方提供的测试结果看,部分方法执行速度比jquery快,但是功能上有短板,如果替换为sprint,很多方法需要自行实现或另行选择框架
-
官网提供的完整压缩版为17k
-
手机端wifi下30次加载&执行时间
-
首次耗时 41ms
-
平均耗时 34ms
-
-
github上搜到的是kissy mobile,不过官网打不开了,不知道是啥玩意儿,pass。找到一个替代的kissy mini
-
官网戳这里
-
kissy mini 好像没有在github上托管,放在他们自己的gitlab上,但是这个gitlab是打不开的
-
提供3个版本
-
mini.js(8k,最新版31k)
-
mini-full.js(13k,最新版39k)
-
mini-all.js(34k)
-
-
以mini.js为例,手机端wifi下30次加载&执行时间
-
首次耗时 50ms
-
平均耗时 27ms
-
-
seed是kissy的加载器,可以点击API查看,包含4个部分
-
lang——一个类似于underscore的工具库
-
features——环境检测,对H5的新API,css3动画的支持,有点类似于modernizr
-
loader——提供一个模块化开发的API
-
ua——顾名思义,useragent,可判断浏览器内核,手机型号等等
-
-
如果需要其他,比如操作dom,还得另行添加模块,可在bower.json里的dependencies中添加对应模块,执行bower install && node build,打包出自定义的seed.js
-
也可以自己定义模块,kissy提供了一个KMD模块定义规范,根据规范定义自己的模块
-
kissy也提供一个基于NodeJS的模块打包工具,点这里查看
-
目前单就kissy seed本身,代码量为44k;
-
下图为网摘的整个kissy框架的结构,值得一看
-
手机端wifi下30次加载&执行时间
-
首次耗时 81ms
-
平均耗时 57ms
-
- 手机端wifi下30次加载&执行时间统计如下
类库 | 大小 | 首次耗时 | 平均耗时 |
---|---|---|---|
jquery | 85k | 111ms | 71ms |
jquery-build | 50k | 79ms | 55ms |
zepto | 24k | 97ms | 38ms |
jquip | 32k | 69ms | 35ms |
sprint | 17k | 41ms | 34ms |
kissy-mini | 31k | 50ms | 27ms |
kissy-seed | 44k | 81ms | 57ms |
1.对结果的一些思考(仅个人)
-
对比jquery,不难发现,jquery的大小为zepto的3倍多,但是首次耗时却差不多,看来foundation5舍弃zepto后的那篇博文内容确实是有据可查http:https://zurb.com/article/1293/why-we-dropped-zepto
-
sprint的数据是最好的,体积最小,执行时间最短;但其实对比jquip,kissy-mini,可以发现它的执行速度其实并不快,如果要使用它还需要引入其他工具库,增添了额外成本
-
因为项目目前主要是重构,考虑到重构工作量以及jquery与kissy语法上的区别,还是用jquery系的类库替换jquery比较方便
-
综合看来,目前还是比较推荐jquip,毕竟它实现了jquery90%的功能(虽然只是号称);sprint也可以进行调研,找到缺少的方法,手动补上,也是一个比较好的选择
- 分析几个大型类库的API,虽然支持模块分解,但每个模块里面都有大量我们不会用到的代码,后期要将代码缩减到极致,最好的办法还是我们手动去写,网上也有很多实现的文章,如: