jQuery性能优化28条建议你值得借鉴


Posted in Javascript onFebruary 16, 2013

jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景。
一、选择器性能优化建议
1. 总是从#id选择器来继承
这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

$('#content').hide();

或者从ID选择器继承来选择多个元素:
$('#content p').hide();

2. 在class前面使用tag
jQuery中第二快的选择器就是tag选择器(如$(‘head')),因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)
var receiveNewsletter = $('#nslForm input.on');

jQuery中class选择器是最慢的,因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为'content'的那个节点:
var content = $('div#content'); // 非常慢,不要使用

用ID来修饰ID也是画蛇添足:
var traffic_light = $('#content #traffic_light'); // 非常慢,不要使用

3. 使用子查询
将父对象缓存起来以备将来的使用
var header = $('#header'); 
var menu = header.find('.menu'); 
// 或者 
var menu = $('.menu', header);

4. 优化选择器以适用Sizzle的“从右至左”模型
自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些:
var linkContacts = $('.contact-links div.side-wrapper');

而不要使用
var linkContacts = $('a.contact-links .side-wrapper');

5. 采用find(),而不使用上下文查找
.find()函数的确快些。但是如果一个页面有许多DOM节点时,需要来回查找时,可能需要更多时间:
var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6 
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time 
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

6. 利用强大的链式操作
采用jQuery的链式操作比缓存选择器更有效:
$('li.menu-item').click(function () {alert('test click');}) 
.css('display', 'block') 
.css('color', 'red') 
fadeTo(2, 0.7);

7. 编写属于你的选择器
如果你经常在代码中使用选择器,那么扩展jQuery的$.expr[':']对象吧,编写你自己的选择器。下面的例子中,我创建了一个abovethefold选择器,用来选择不可见的元素:
$.extend($.expr[':'], { 
abovethefold: function(el) { 
return $(el).offset().top < $(window).scrollTop() + $(window).height(); 
} 
}); 
var nonVisibleElements = $('div:abovethefold'); // 选择元素

二、优化DOM操作建议
8. 缓存jQuery对象
将你经常用的元素缓存起来:
var header = $('#header'); 
var divs = header.find('div'); 
var forms = header.find('form');

9. 当要进行DOM插入时,将所有元素封装成一个元素
直接的DOM操作很慢。尽可能少的去更改HTML结构。
var menu = '<ul id="menu">'; 
for (var i = 1; i < 100; i++) { 
menu += '<li>' + i + '</li>'; 
} 
menu += '</ul>'; 
$('#header').prepend(menu); 
// 千万不要这样做: 
$('#header').prepend('<ul id="menu"></ul>'); 
for (var i = 1; i < 100; i++) { 
$('#menu').append('<li>' + i + '</li>'); 
}

10. 尽管jQuery不会抛出异常,但开发者也应该检查对象
尽管jQuery不会抛出大量的异常给用户,但是开发者也不要依赖于此。jQuery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前,应先检查一下这个对象存不存在。
11. 使用直接函数,而不要使用与与之等同的函数
为了获得更好的性能,你应该使用直接函数如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因为后面的几个将会调用$.ajax()。
12. 缓存jQuery结果,以备后来使用
你经常会获得一个javasript应用对象——你可以用App.来保存你经常选择的对象,以备将来使用:
App.hiddenDivs = $('div.hidden'); 
// 之后在你的应用中调用: 
App.hiddenDivs.find('span');

13. 采用jQuery的内部函数data()来存储状态
不要忘了采用.data()函数来存储信息:
$('#head').data('name', 'value'); 
// 之后在你的应用中调用: 
$('#head').data('name');

14. 使用jQuery utility函数
不要忘了简单实用的jQuery的utility函数。我最喜欢的是$.isFunction(), $isArray()和$.each()。
15. 为HTML块添加“JS”的class
当jQuery载入之后,首先给HTML添加一个叫”JS”的class
$('HTML').addClass('JS');

只有当用户启用JavaScript的时候,你才能添加CSS样式。例如:
/* 在css中 */ 
.JS #myDiv{display:none;}

所以当JavaScript启用的时候,你可以将整个HTML内容隐藏起来,用jQuery来实现你想实现的(譬如:收起某些面板或当用户点击它们时展开)。而当Javascript没有启用的时候,浏览器呈现所有的内容,搜索引擎爬虫也会勾去所有内容。我将来会更多的使用这个技巧。
三、关于优化事件性能的建议
16. 推迟到$(window).load
有时候采用$(window).load()比$(document).ready()更快,因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。
17. 使用Event Delegation
当你在一个容器中有许多节点,你想对所有的节点都绑定一个事件,delegation很适合这样的应用场景。使用Delegation,我们仅需要在父级绑定事件,然后查看哪个子节点(目标节点)触发了事件。当你有一个很多数据的table的时候,你想对td节点设置事件,这就变得很方便。先获得table,然后为所有的td节点设置delegation事件:
$("table").delegate("td", "hover", function(){ 
$(this).toggleClass("hover"); 
});

18. 使用ready事件的简写
如果你想压缩js插件,节约每一个字节,你应该避免使用$(document).onready()
// 也不要使用 
$(document).ready(function (){ 
// 代码 
}); 
// 你可以如此简写: 
$(function (){ 
// 代码 
});

四、测试jQuery
19. jQuery单元测试
测试JavaSript代码最好的方法就是人来测试。但你可以使用一些自动化的工具如Selenium,Funcunit,QUit,QMock来测试你的代码(尤其是插件)。我想在另外一个专题来讨论这个话题因为实在有太多要说的了。
20. 标准化你的jQuery代码
经常标准化你的代码,看看哪个查询比较慢,然后替换它。你可以用Firebug控制台。你也可以使用jQuery的快捷函数来使测试变得更容易些:
// 在Firebug控制台记录数据的快捷方式 
$.l($('div'));

// 获取UNIX时间戳 
$.time();

// 在Firebug记录执行代码时间 
$.lt(); 
$('div'); 
$.lt();

// 将代码块放在一个for循环中测试执行时间 
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6

五、其他常用jQuery性能优化建议
21. 使用最新版本的jQuery
最新的版本往往是最好的。更换了版本后,不要忘记测试你的代码。有时候也不是完全向后兼容的。
22. 使用HMTL5
新的HTML5标准带来的是更轻巧的DOM结构。更轻巧的结构意味着使用jQuery需要更少的遍历,以及更优良的载入性能。所以如果可能的话请使用HTML5。
23. 如果给15个以上的元素加样式时,直接给DOM元素添加style标签
要给少数的元素加样式,最好的方法就是使用jQuey的css()函数。然而更15个以上的较多的元素添加样式时,直接给DOM添加style 标签更有效些。这个方法可以避免在代码中使用硬编码(hard code)。
$('<style type="text/css"> div.class { color: red; } </style>') 
.appendTo('head');

24. 避免载入多余的代码
将Javascript代码放在不同的文件中是个好的方法,仅在需要的时候载入它们。这样你不会载入不必要的代码和选择器。也便于管理代码。
25. 压缩成一个主JS文件,将下载次数保持到最少
当你已经确定了哪些文件是应该被载入的,那么将它们打包成一个文件。用一些开源的工具可以自动帮你完成,如使用Minify(和你的后端代码集成)或者使用JSCompressor,YUI Compressor 或 Dean Edwards JS packer等在线工具可以为你压缩文件。我最喜欢的是JSCompressor。
26. 需要的时候使用原生的Javasript
使用jQuery是个很棒的事情,但是不要忘了它也是Javascript的一个框架。所以你可以在jQuery代码有必要的时候也使用原生的Javascript函数,这样能获得更好的性能。
27. 从Google载入jQuery框架
当你的应用正式上线的时候,请从Google CDN载入jQuery,因为用户可以从最近的地方获取代码。这样你可以减少服务器请求,而用户如果浏览其他网站,而它也使用Google CDN的jQuery时,浏览器就会立即从缓存中调出jQuery代码。
// 链接特定版本的压缩代码 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

28. 缓慢载入内容不仅能提高载入速度,也能提高SEO优化 (Lazy load content for speed and SEO benefits)
使用Ajax来载入你的网站吧,这样可以节约服务器端载入时间。你可以从一个常见的侧边栏widget开始。
Javascript 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 #Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 #Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 #Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 #Javascript
jquery 选择器引擎sizzle浅析
Feb 06 #Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
You might like
thinkPHP分页功能实例详解
2017/05/05 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
vue2.0全局组件之pdf详解
2017/06/26 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
pycharm的python_stubs问题
2020/04/08 Python
浅析python实现动态规划背包问题
2020/12/31 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
好媳妇事迹材料
2014/12/24 职场文书
道歉短信大全
2015/05/12 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
团拜会主持词
2015/07/04 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
redis连接被拒绝的解决方案
2021/04/12 Redis
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏