jQuery优化

1.简介
jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题。文章就以jQuery为例,为大家提供了10个有效提升jQuery性能的小技巧。

2. 合并、最小化脚本

大部分浏览器都不能同时处理多个脚本文件,所以它们都是排队加载——加载时间也相应地延长了。考虑到你网站的每个页面都会加载这些脚本,你应该考虑
把它们放到单个文件中,然后利用压缩工具(比如Dean Edwards的这款)把它们最小化。更小的文件无疑将带来更快的加载速度。

引自YUI
compressor,一款jQuery官方推荐的压缩脚本的工具:JavaScript和CSS压缩的目的是在保持脚本的执行性能的同时,减少数据传递
的字节数(可以通过减小原始文件,也可以利用gzip。大多数产品级的网络服务器都把gzip作为HTTP协议的一部分)。

3. 用for替代each

原生函数总是比辅助组件更快。如果遇到需要遍历对象的情况(如从远程接收的JSON对象),你最好重写你的(JSON)对象为一个数组,数组的循环处理要容易些。利用Firebug,我们能测定每个函数的执行时间。

  1. var array = new Array ();
  2. for (var i = 0; i < 10000; i++) {
  3.  
  4. array[i] = 0;
  5.  
  6. }
  7.  
  8. console.time('native'); //原生for函数
  9. var l = array.length;
  10.  
  11. for (var i = 0; i < l; i++) {
  12.  
  13. array[i] = i;
  14.  
  15. }
  16.  
  17. console.timeEnd('native');
  18. console.time('jquery'); //jQuery的each方法
  19. $.each(array, function(i) {
  20.  
  21. array[i] = i;
  22.  
  23. });
  24. console.timeEnd('jquery');

结果显示原生代码只需2毫秒就做到的事,利用jQuery的each方法需要26毫秒。而且这还只是我在本机上测试一个基本上啥也没做的函数的结果,当遇到更复杂的情况,例如设置css属性或DOM操作时,时间差异肯定更大。

4. 用ID替代class选择器

利用ID选择对象要好得多,因为这时jQuery会使用浏览器的原生函数getElementByID()来获取对象,查询速度很快。因此,比起利用那些方便的css选择技巧,使用更为复杂的选择器也是值得的(jQuery也为我们提供了复杂选择器)。

你也可以手工书写自己的选择器(其实比你想象中简单),或者为你想要选择的元素指定一个有ID的容器。

  1. //下例创建一个列表并且填充条目内容
  2. //然后每个条目都被选择一次
  3. //首先使用class选择
  4. console.time('class');
  5. var list = $('#list');
  6. var items = '<ul>';
  7. for (i =0; i < 1000; i++) {
  8.  
  9. items += '<li>item</li>';
  10.  
  11. }
  12.  
  13. items += '</ul>';
  14. list.html(items);
  15. for (i = 0; i < 1000; i++) {
  16. var s = $('.item' + i);
  17.  
  18. }
  19. console.timeEnd('class');
  20.  
  21. //然后利用ID选择
  22. console.time('id');
  23. var list = $('#list');
  24. var items = '<ul>';
  25. for (i = 0; i < 1000; i++) {
  26. items += '<li id="item' + i + '">item</li>';
  27.  
  28. }
  29.  
  30. items += '</ul>';
  31. list.html(items);
  32. for (i = 0; i < 1000; i++) {
  33.  
  34. var s = $('#item' + i);
  35.  
  36. }
  37. console.timeEnd('id');

上面的例子很好地说明了不同选择方式之间的显著性能差异。请看下图,利用class来做选择,时间无限增大,甚至超过了五秒

5. 给选择器指定前后文

如果你一定要利用class来指定目标,至少为选择器指定上下文,以免jQuery费精力去遍历整个DOM文档,与其这样写:

$('.class').css ('color' '#123456');

也就是说:

$('.class', '#class-container').css ('color', '#123456');

这样做要快得多,因为它不用遍历整个DOM。只要找到#class-container就好了。

6. 建立缓存

不要犯不断重新选择同一个东西的错误。你应该把你要处理的元素缓存为一个变量。更不要在一个循环里重复选择同一个元素!这样做十分影响速度!

  1. $('#item').css('color', '#123456');
  2. $('#item').html('hello');
  3. $('#item').css('background-color', '#ffffff');
  4.  
  5. // 这样写更好
  6. $('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
  7.  
  8. // 甚至这样
  9. var item = $('#item');
  10. item.css('color', '#123456');
  11. item.html('hello');
  12. item.css('background-color', '#ffffff');
  13.  
  14. // 遇到循环,这样做非常不好
  15. console.time('no cache');
  16.  
  17. for (var i = 0; i < 1000; i++) {
  18.  
  19. $('#list').append(i);
  20.  
  21. }
  22.  
  23. console.timeEnd('no cache');
  24.  
  25. // 下面这样要好得多
  26. console.time('cache');
  27. var item = $('#list');
  28. for (var i = 0; i < 1000; i++) {
  29.  
  30. item.append (i);
  31.  
  32. }
  33.  
  34. console.timeEnd('cache');

即使是相对较短的迭代,缓存的效果还是很明显的。

7. 避免DOM操作

DOM操作应该越少越好,因为诸如prepend(),append(),after()的插入动作都很费时。上面的例子如果用html()会更快:

  1. var list = '';
  2. for (var i = 0; i < 1000; i++) {
  3.  
  4. list += '<li>' + i + '</li>';
  5.  
  6. }
  7.  
  8. $('#list').html (list);

8. 避免使用concat(),利用join()处理长字串

听起来可能挺奇怪,不过这样做真的能提升速度,尤其是当连接特别长的字串时。先建立一个数组,放入你想要串联的东西。join()方法比字符串的concat()函数要快得多。

  1. var array = [];
  2. for (var i = 0; i <= 10000; i++) {
  3.  
  4. array[i] = '<li>' + i + '</li>';
  5.  
  6. }
  7.  
  8. $('#list').html(array.join (''));

9. 返回false值

您可能已经注意到,如果函数执行后不返回false,你就会被跳转到页面顶部。如果页面较长,这种反应是很烦人的。所以,与其这样:

  1. $('#item').click(function() {
  2.  
  3. // stuff here
  4.  
  5. });

一句:

  1. $('#item').click(function() {
  2.  
  3. // stuff here
  4.  
  5. return false;
  6. );

10. 研究

这条建议并不直接提升函数的执行速度,不过如果你肯花时间在这上面,研究研究这些小抄和参考文档,你将来定能节约很多时间。

新手必看的jQuery优化笔记十则的更多相关文章

  1. 一些必看的jQuery导航插件和教程

    导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格.本文列举 ...

  2. 新手必看】Highcharts的100个基础问答

    新手必看]Highcharts的100个基础问答 2014-12-2 10:59| 发布者: Mr.Zhang| 查看: 2749| 评论: 3|来自: Highcharts中文论坛   摘要: 1. ...

  3. k8s新手必看

    转载自https://juejin.im/post/6844903840139968520 Kubernetes零基础快速入门!初学者必看! 起源 Kubernetes 源自于 google 内部的服 ...

  4. 新手必看,史上最全的iOS开发教程集锦,没有之一!

    最近大火的iPhone XS Max和iPhone XS,不知道有没有同学已经下手了呢?一万三的价位确实让很多人望而却步啊.据说为了赢得中国的用户,专门出了双卡双待的,可想而知中国市场这块“肥肉”人人 ...

  5. 必看的 jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...

  6. jquery tips简易使用方法 新手必看

    使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器   记得引入jquery $(".beg-pu ...

  7. Mac新手必看教程—让你离熟练操作mac只差十分钟

    本文收录于:风云社区(提供各类mac软件资源下载) 本文源自:什么值得买 无论轻薄办公本.还是赶超台式性能的游戏本,关注#笔记本攻略#栏目,解决笔记本电脑从选购到使用的各种问题. 引子 大部分用户接触 ...

  8. 简单几步,教你学会PHP,新手必看!

    学习php的方法,学东西,永远不要妄想有速成这一说,告诉你了一个方式,但是缺少努力这一环节,那也是白搭.掌握好的学习方法非常必要,看看这篇如何学习PHP培训的方法,在此提醒一下大家,PHP不像别的科目 ...

  9. C# 利用委托事件进行窗体间的传值(新手必看)

    引言: 窗体间传值是每个学习WinForm新手的常见问题,最初级的方法就是 在窗体中先获取到要接受值窗体.然后通过.得到某个空间或者属性,直接赋值,这个需要接收放的窗体属性或者空间必须是public ...

随机推荐

  1. 操作html标签之找到标签

    引入 丰富多彩的html标签构成了网页.例如p,div,li,ul,a......…….它们都有自己默认的样式,且各不一样,例如h1标签就比p标签的margin要大一些.我们学习css的目的是为了改变 ...

  2. linux下snprintf和sprinf很少被提及的区别

    函数原型:int snprintf(char *dest, size_t size, const char *fmt, ...);函数说明: snprintf函数中的第二个参数,size的解释:siz ...

  3. Java学习笔记--泛型

    一个泛型类就是具有一个或者多个类型变量的类. 我们可以只关注泛型,而不会为数据存储的细节而烦恼 . java泛型(一).泛型的基本介绍和使用 http://blog.csdn.net/lonelyro ...

  4. SpringMVC–SSH -- RESTful -- JSR303

    最近在使用SpringMVC+MyBatis感觉用起来效果很好.我不太明白SpringMVC和SSH的关系,遂搜索了一下.原来使用SpringMVC之后,可以替代之前的SSH这种开发模式. 附上知乎链 ...

  5. 转载收藏之用 - 微信公众平台开发教程(五):使用Senparc.Weixin.MP SDK

    Senparc.Weixin.MP SDK已经涵盖了微信5.0的所有公共API,以及2013年10月29日升级之后大部分实用的接口. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:ht ...

  6. HttpAsyncClient 的简单使用

    下载地址:http://hc.apache.org/downloads.cgi 在NetBeans中导入以下jar文件: 1:一次请求: public static void oneReuest(){ ...

  7. MySQL表复制

    http://www.2cto.com/database/201202/120259.html http://www.cnblogs.com/sunss/archive/2010/10/08/1845 ...

  8. Linux Shell Scripting Tutorial (LSST) v2.0

    http://bash.cyberciti.biz/wiki/index.php?title=Main_Page

  9. Microsoft Certification List

    Exam Title Files 70-178 Microsoft Project 2010, Managing Projects 16 70-243 Administering and Deploy ...

  10. hdu3095-Eleven puzzle(双向搜索+哈希)

    Partychen invents a new game named “Eleven Puzzle” .Just like the classic game “Eight Puzzle”,but th ...