zepto和jquery的区别

Posted 2023-05-04

1、针对移动端程序

zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），zepto是不支持IE浏览器的。

2、DOM操作的区别

添加id时jquery不会生效而zepto会生效。

3、事件触发的区别

使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行。

4、事件委托的区别

zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件。

5、js精简方面

zepto是jquery的精简，针对移动端去除了大量jquery的兼容代码。

6、其他方面

zepto中没有为原型定义extend方法而jquery有；zepto的each方法只能遍历数组，不能遍历JSON对象。

参考技术A

一、支持的浏览器：Zepto不支持IE浏览器，目的是为了减小Zepto的体积；因为Zepto使用jQuery句法，所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中，而其他浏览器则能享受到Zepto在文件大小上的优势，然而它们两个的API不是完全兼容的。

二、Dom操作的区别：添加id时jQuery不会生效而Zepto会生效。

三、事件触发的区别：使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。

四、事件委托的区别：在 jQuery 中只会触发a上面的委托弹出”a事件“。Zepto中，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是a，符合则执行，然后查看是不是b，符合则执行。

五、width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

六、offset()的区别：Zepto返回top,left,width,height；jQuery返回width,height。

参考资料来源：百度百科-jQuery

参考技术B

1、DOM操作的区别：添加id时jQuery不会生效而Zepto会生效；

2、事件触发的区别：使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行；

3、事件委托的区别：zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件；

4、offset()的区别：zepto返回top,left,width,height; jquery返回width,height。zepto无法获取隐藏元素宽高，jquery可以；

5、、zepto中没有为原型定义extend方法而jquery有。

扩展资料：

DOM操作的区别：代码实现

// <p>jQuery <p>

(function($)

     $(function()

         var $insert = $('<p>jQuery 插入</p>',

             id: 'insert-by-jquery'

         );

         $insert.appendTo($('body'));

     );

)(window.jQuery);   

// <p id="insert-by-zepto">Zepto </p>

Zepto(function($)   

    var $insert = $('<p>Zepto 插入</p>',

        id: 'insert-by-zepto'

    );

    $insert.appendTo($('body'));

);

参考技术C zepto主要用在移动设备上，只支持较新的浏览器，好处是代码量比较小，性能也较好。
jquery主要是兼容性好，可以跑在各种pc，移动上，好处是兼容各种浏览器，缺点是代码量大，同时考虑兼容，性能也不够好。

jq自身也注意到了这个总是，所有它的2.x版本是不支持ie6 7 8的，大致就是这些。 参考技术D 1. Zepto 对象 不能自定义事件
例如执行： $().bind('cust', function());
结果： TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象：
例如： $('
').bind('cust', function());
2. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
例如执行：$('[data-userid=123123123]')
结果：Error: SyntaxError: DOM Exception 12
解决办法： $('[data-userid="123123123]"') or $("[data-userid='123123123']")
3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
4.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象
5.Zepto 的animate 方法参数说明 ：
例如：$("data-userid='123123123'").animate( opacity : 0,duration:'slow');
duration : 'slow' 是无效的，需要修改为 duration : 600本回答被提问者和网友采纳

Zepto 和 jQuery 2 有啥区别？

【中文标题】Zepto 和 jQuery 2 有啥区别？

【英文标题】：What is the difference between Zepto and jQuery 2?Zepto 和 jQuery 2 有什么区别？

【发布时间】：2013-01-27 15:05:11

【问题描述】：

有两个类似的项目：

Zepto.js

Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有 大部分与 jQuery 兼容的 API。

jQuery 2.0

jQuery 2.0 测试版：这是您对未来的品味，它可以更快、更小而不需要支持 IE 6、7 或 8。它是特定于平台的 HTML 应用程序的绝佳选择。

这只是关于性能还是他们遵循不同的方法？

【问题讨论】：

如果你曾经尝试从 jQuery 切换到 Zepto：blog.pamelafox.org/2011/11/porting-from-jquery-to-zepto.html

这是一个关于特定编程问题的有用、有趣、相关的问题。为什么它被关闭了？不是“哪个更好”，而是“使用的注意事项是什么”

【参考方案1】：

Zepto.js 和 jQuery 之间的主要区别在于它们各自的文件大小是 Zepto.js 的 ~20kb（缩小，未压缩）而不是 jQuery 的 ~80kb，并且 Zepto.js 的 ~10kb（缩小，压缩）而不是 jQuery 的 ~ 30kb。此外，Zepto 对 IE<10 等浏览器的支持要么缺乏要么无法保证，its target platforms 是：

Safari 5+（桌面） Chrome 5+（桌面） Mozilla Firefox 4+ iOS 4+ Safari Android 2.2+ 浏览器 其他基于 WebKit 的浏览器/运行时 webOS 1.4.5+ 浏览器 BlackBerry Tablet OS 1.0.7+ 浏览器 亚马逊 Silk 1.0+ Opera 10+ Internet Explorer 10+

【讨论】：

jquery 2 是 ~30kb，而 zepto 是 ~10kb，当两者都被压缩和缩小时。非 gzip 压缩，jquery 2 仍然是 ~80kb 而 zepto 是 ~30kb。

-1。 asparagino 指出，MHD 的数字不正确。他的回答是有效的。

Zepto 和 jQuery 都支持自定义构建，因此厨房水槽的大小可能不是那么重要。不同之处在于 jQuery 有更好的支持和性能，更新更频繁，社区更活跃。 Zepto 的吸引力在很大程度上被 jQuery 2.0 弥补了 Zepto 曾经填补的空白。

【参考方案2】：

jquery 2 是 ~30kb，而 zepto 是 ~10kb，当两者都被压缩和缩小时。非 gzip 压缩但已缩小，jquery 2 约为 80kb，zepto 约为 30kb。

使用分析程序检查您网站的受众。如果您的大部分用户使用 IE9，您需要 jquery 并且 zepto 不会飞。如果超过百分之几使用 IE8 或更低版本，并且您无法面对让他们在没有您的网站的情况下陷入困境，您将需要使用 jquery 1。如果您的目标是最后一个，对不起 - 很多新的闪亮玩具不适合你。

如果您正在为 android/ios/phonegap 等构建 html5 应用程序，那么您主要针对的是 webkit，因此 zepto 确实可以为您节省大量空间。 zepto 存在的主要见解和原因是，当仅在 webkit 平台上运行时，许多 jquery 的跨平台变通方法都是不必要的。

Zepto 还添加了几个触摸事件处理程序来协助移动开发，但主要是您需要考虑的页面权重与平台支持。

【讨论】：

大概如果你选择任何一个平台，那么跨平台的解决方法是不必要的:)

Zepto 更接近 ~25kb ;)。他们有构建说明来重新打包库以获得您需要的最小大小。

我假设您说的是非 gzip 压缩但缩小的构建，自从我写这篇文章以来的八个月里，它的波动并没有超过几个 kb。所以... 25kb 是 ~30kb :P

【参考方案3】：

Zepto 缺少 jQuery 提供的延迟/承诺 API。有一个附加组件，Simply Deferred，可以解决这个问题：https://github.com/sudhirj/simply-deferred。

【讨论】：

考虑阅读有关 jQuery 承诺的内容：domenic.me/2012/10/14/youre-missing-the-point-of-promises

【参考方案4】：

这是一个有点老的问题，但我想增加性能。据我所知，Zepto 的表现优于 jQuery。

这个jsPerf 显示了不同的结果。与 Zepto 相比，我可以经常使用 jQuery 的类选择（单个元素） 137%。对于 ID 选择，我可以经常使用 jQuery 的 285%。

考虑到对大多数应用程序而言，这是一笔巨大的交易，DOM 交互是唯一重要的性能统计数据（网络请求除外）。

另外看看那个性能，我可以看到我可以像 jQuery 一样频繁地执行 document.getElementsByClassNAme 8326%，所以如果可能的话，我们都应该放弃所有这些 :-)

【讨论】：

Zurb 的人可不是这么说的。他们从 CSS 框架中删除 Zepto 的原因之一是，即使 Zepto 的文件更小，jQuery 的性能也优于 Zepto。其他原因是因为许多插件是为 jQuery 编写的。查看他们的博文：zurb.com/article/1293/why-we-dropped-zepto

@ricardozea，这个答案和那篇文章说的是同一件事：jQuery 使用选择器更快。不过要明确一点，您需要大约 100 个 jsperf 来全面测试这些库，然后聘请一位统计学家来确定对于普通网站和普通用户而言哪个更快。

您是在说：“...Zepto 的性能优于 jQuery。”。是的，我们同意 jQuery 更快。

呵呵 不 :-) 这就是我被告知的；我的发现是 jQuery 更快（至少有选择器）。

【参考方案5】：

根据我的阅读，人们似乎严重倾向于 Zepto。最常见的原因是文件大小，但 jQuery 2 在加载后实际上比 Zepto 快。此外，由于大多数人都是围绕 jQuery 开发的，因此您不会发现对 Zepto 的太多支持。我并不是建议您不应该使用 Zepto，但您应该了解为什么要使用它，以及您使用的其他 JavaScript 库是否支持/与它冲突。

我会说这取决于您的项目。对于个人或有限使用，Zepto 可能是更好的选择。但是，其他库对 jQuery 的支持要多得多，如果文件大小是唯一决定您原因的因素，那么它就有缺陷。 JavaScript 应该在页面加载后加载，因此在任何一种情况下都不会影响您的页面加载时间。

Here 是性能测试，包括 jQuery 1.7.2、Zepto 1.0rc1 和 jQMobi 1.03。

【参考方案6】：

我认为从未使用 zepto 快速过渡到 web早在 Foundation 4 被构想时，我们就切换到 Zepto（带有 jQ​​uery 选项），因为它的文件更小，加载时间更快。

但随着时间的推移，我们发现较小的文件大小并不能转化为更好的整体性能。当然，Zepto 下载速度很快。但是一旦加载，它就没有jQuery那么快了。许多第三方插件需要 jQuery，而不是 Zepto，这并没有帮助——事实上，我们发现一些第三方 JavaScript 与 Zepto 完全冲突。

维护不同的代码库对我们来说也不是一件容易的事。例如，Zepto 缺乏适当的高度计算功能，导致某些网格计算变得困难。

为了解决这一切，答案就像喜马拉雅的春天一样清晰：Foundation 5 使用 jQuery 2。除了更快的速度和行业接受度之外，jQuery 2 还受益于更好的文档和支持。 jQuery 与 API 兼容。

**

但我们假设 Zepto 会比 jQuery 更快。我们不想 做了两次相同的假设，所以我们测试了 Zepto 与 jQuery 2。 结果：jQuery 2 每秒有更多的操作。这给了基金会 5 更好的性能，为所有人带来更好的体验 用户。

**

最后，我们希望帮助人们更快地设计出出色的产品——而这一次，这意味着为世界上响应速度最快的前端框架本身提供速度提升。

【讨论】：

如果你这么关心性能，你为什么要使用jQuery呢？当然 jQuery 比 Zepto 有更好的性能，但 jQuery 的性能与 VanillaJS 相比很糟糕。基本上，VanillaJS 是 jQuery 的更好和更优越的版本。想象一下，将大量高性能优化函数库打包到一个轻量级包中。这就是 VanillaJS 的强大之处。我强烈建议尝试一下。