是否有 jQuery 替代方案来构建更快的网站
我们即将开始重新设计我们的网站,并正在探索提高性能的所有选项。该网站的 javascript 加载广告相当多,因此我们需要真正精简我们使用的 javascript。
你们中有人有我可以探索的更轻量框架或更高效框架的经验吗?或者您可以向我指出任何资源吗? YUI 看起来是一个有趣的概念……加载程序是否正在愤怒地进行测试?有什么好处吗?
任何想法将不胜感激。
干杯。
编辑:抱歉,我不清楚。目前该网站的性能相当不错,我们不是因为性能问题而重新设计,而是因为品牌重塑。我们只是想借此机会回顾最佳实践。
We are about to commence a redesign of our site and are exploring all options in improving performance. The site is fairly heavy in javascript loaded adverts, therefore we need to be really lean with the javascript we use.
Do any of you have any experience of lighter frameworks or more efficient frameworks that I could explore? Or any resources that you could point me toward? YUI looks like an interesting concept … has the loader being tested in anger? ANy good?
Any thoughts would be appreciated.
Cheers.
edit: Sorry, I wasn't clear. The sites performance currently is pretty good, we are not redesigning due to performance issues, it is due to a rebrand. We just wanted to take the opportunity to review best practices.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
jQuery 1.4.2 是精简并且平均。您将很难找到更快或更轻量的东西。
作为示例,这里是一个来自 mootools 的名为 slickspeed 的框架测试。它测试框架在 DOM 中查找元素的能力。正在测试的jQuery版本是1.2.6。根据您的浏览器,jQuery 的性能非常好。在我的 Chrome 浏览器中,jQuery 以 20 毫秒的总时间击败了所有其他浏览器。
自 1.2 版本以来,jQuery 在优化和速度方面有了惊人的改进,尤其是 1.4 版本。
也就是说,框架并不会让你编码得更好。您可以使用任何框架(包括 jQuery)编写一些非常慢的脚本。
然而,如果您编写优化的代码,jQuery 的速度可能会快到您甚至不会注意到。
Pointy 上面的评论很到位。这些人整天所做的就是担心如何表现得更好。所以它非常优化。
附录
这是来自 jQuery 的博客:
所以你就这样吧。
jQuery 1.4.2 is lean and mean. You'll be hard pressed finding something faster or more lightweight.
As an example, here is a framework test called slickspeed from mootools. It tests a framework's ability at finding elements in the DOM. The version of jQuery being tested is 1.2.6. Depending on your browser, jQuery performs exceptionally well. In my Chrome browser, jQuery beat all the others with a total time of 20 milliseconds.
And since version 1.2, jQuery has had astounding improvements in optimization and speed, especially with 1.4.
That said, a framework isn't going to make you code better. You can write some seriously slow scripts using any framework, including jQuery.
If, however, you write optimized code, jQuery can be so fast you don't even notice.
Pointy's comment above is spot on. All these guys do all day is worry about how to perform better. So it's pretty optimized.
addendum
This is from jQuery's blog:
So take that as you will.
对于较大的应用程序,我更喜欢 YUI3,并且几乎任何“按需加载”都可以提供好处:)
我同意,速度减慢主要源于您实现应用程序的方式,恕我直言,这是 YUI 的好处之一,它自然而然地发挥作用走向更加模块化的实施。
使用 yui 加载器引入页面元素小部件样式可以实现良好的代码重用(和缓存),并让用户更快地看到“某些内容”。
但它并不能真正解决你的 JS 广告问题,为此,你能做的最好的事情就是尽可能将其加载到页面底部附近,也许还可以看看广告服务器有哪些加载选项。
回复:斯蒂芬的评论
好吧,紧密循环的原始速度有时有意义,有时则没有。还有用于比较的实现的问题,Ejohns 版本中发布的 YUI3 代码与 jQuery 代码相比看起来确实很简单,请查看第一个代码。相对而言,jQuery 从字符串添加几乎完整的 DOM 元素,而 YUI3 则经历了各种麻烦。
对于了解 YUI3 的人编写的版本,请查看 http://yuilibrary .com/~msweeney/yui-tests/taskspeed/ 没有显示最新的 jquery,但它的 YUI3 总体速度比我的 Chrome 中的 jquery 1.3.2 快约 4 倍。
更新
http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ yui3 的 jquery 用户体验。
I prefer YUI3 for larger apps and just about anywhere that 'load on demand' can offer benefits :)
I agree that slowdowns mostly stem from how you implement your app, which is one of the benefits, imho, of YUI, it lends itself naturally towards more modular implementations.
Using the yui loader to bring in page elements widget style allows for good code reuse (and caching) as well letting the user see 'something' quicker.
It won't really solve your JS ad issues though, for that, the best thing you can do is load it as near the bottom of the page as possible, and perhaps look at what loading options the adservers have.
Re: Stephen's comment
Well, raw speed for tight loops are sometimes meaningful, sometimes not. There is also the issue of the implementations used for the comparison, the YUI3 code posted in Ejohns version looks positively gimped compared to the jQuery code, look fx at the first one. Where jQuery adds almost the complete DOM element from a string while YUI3 is going thru all kinds of hoops, relatively speaking.
For a version that is written by someone who knows YUI3 have a look at http://yuilibrary.com/~msweeney/yui-tests/taskspeed/ the newest jquery isn't represented, but it does have YUI3 as ~4 times faster overall than jquery 1.3.2 in my Chrome.
Update
http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ a jquery users experience of yui3.
也许最好的起点不是问什么框架可以提供帮助,而是问为什么您当前的网站性能不佳。我会从 Yahoo 的 YSlow 和 Dynatrace ajax 版本等工具开始。 Dynatrace 很好,因为它会指出导致页面变慢的 javascript/dom manip 内容。不过,您需要使用的不仅仅是两个性能工具,因为它们对于如何提高页面速度都有自己的想法。一旦你把它写下来,我就会进入一个论坛并指出你的 X 存在性能问题以及我能做些什么来解决。
Probably the best place to start off is not to ask what frameworks can help but why your current site has bad performance. I would start off with tools like Yahoo's YSlow and also Dynatrace ajax edition. Dynatrace is nice because it will point out javascript/dom manip stuff that make your pages slow. You will want to use more than just two performance tools though since they all pretty much have their own idea's on what makes a page fast. Once you have that down then I would come into a forum and state that your having performance issues with X and what can I do to fix.
steam.js 是世界上最小、最快的 JavaScript 库
http://vaporjs.com/
vapor.js is the world's smallest and fastest javascript library
http://vaporjs.com/
我认为你应该看看 zepto.js
http://zeptojs.com/
这篇文章为你提供了一些建议移植你的jquery代码
http://blog.pamelafox .org/2012/03/porting-jquery-plugins-to-zepto-tips.html
I think you should have a look at zepto.js
http://zeptojs.com/
this article gives you some advices for porting your jquery code
http://blog.pamelafox.org/2012/03/porting-jquery-plugins-to-zepto-tips.html
如果编码正确的话,jQuery 是非常轻量级的。听起来您使用的框架不是问题,但要么a)为什么您编写的JavaScript执行缓慢,要么b)为什么您一开始就使用这么多缓慢加载的广告。
但如果您确实想研究其他框架,这里有一个方便的比较图表:JavaScript 框架比较
jQuery is plenty lightweight if coded properly. It sounds like which framework you are using is not the problem, but either a) why the javascript your writing is performing slowly, or b) why you are using so many slow loading ads to begin with.
But if you really want to look into other frameworks, here's a handy comparison chart: Comparison of JavaScript Frameworks
我刚刚使用 jquery 和 jquery UI (http://jqueryui.com/) 与 c# 混合为我们公司编写了一个内部应用程序。我发现它非常精简且快速 - 没有任何问题。
jquery ui 可以轻松地为网站设置主题...
并且通过添加其他组件(如 blockui、jgrowl 等),您应该能够做任何您想做的事情!
I just wrote an internal app for our company using jquery and jquery UI (http://jqueryui.com/), mixed in with c#. I found it to be extremely lean and fast - no problems whatsoever.
the jquery ui makes it easy to theme the website...
and by adding other components like blockui, jgrowl, etc you should be able to do anything you want!
Sprint 是一个小型、快速的替代方案。
查看存储库,了解一些函数的基准测试,与最新版本的 jQuery 和 Zepto 进行比较。
Sprint is a tiny, fast alternative.
Check out the repo for benchmarks on a few functions, compared with recent versions of jQuery and Zepto.