jQuery性能优化的一些参考建议
JQ3.1 文档下载地址:https://pan.baidu.com/s/1c2vMQdy
一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是JQ,在JS中都是必须的
二、如果有多个变量可以使用一个var
eg:var index=0,$main=$(".main");
三、定义jQuery变量是添加$符号
eg:var $main=$(".main");利于代码的阅读性
四、DOM操作请务必记住缓存(cache)
DOM操作是非常耗费资源和性能的,一般大部分人喜欢直接这样:
$(".main").html("结束");
$(".main").show();
更好的是:
var $main=$(".main");
再去操作
五、使用链式操作
上面的可以更简化:
var $main=$(".main");
$main.html("结束").show();
六、精简jQuery代码
尽量把一些代码整合到一起,如下面
$btn.click(function(){
$main.css('width','80%');
$main.css('display','block');
});
应该这样:
$btn.click(function(){
$main.css({
"width":"80%",
"display":"block"
})
});
七、避免使用全局类型的选择器
请勿如下方式书写:$('.something> *');
这样书写更好:$('.something').children();
八、不要叠加多个ID
请勿如下书写:$('#something#children');
这样就够了:$('#children');
九、多用逻辑判断||或者&&来提速
请勿如下书写:
if(!$something) {
$something = $('#something ');
}
这样书写性能更好:
$something=$something|| $('#something');
十、尽量使用更少的代码
与其这样书写:if(string.length> 0){..}
不如这样书写:if(string.length){..}
十一、尽量使用.on方法
如果你使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的。
十二、尽量使用最新版本的jQuery
最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择。
十三、尽量使用原生的Javascript
如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现。
eg:for in
十四、总是从#id选择器来继承
这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。
或者从ID选择器继承来选择多个元素:
eg:$('#main p').hide();
十五、在class前面使用tag
jQuery中第二快的选择器就是tag选择器(如$(‘head')),因为它和直接来自于原生的Javascript方法
getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)
jQuery中class选择器是最慢的,因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为'content'的那个节点
十六、使用子查询
将父对象缓存起来以备将来的使用
十七、 优化选择器以适用Sizzle的“从右至左”模型
自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些:
var $linkContacts = $('.contact-links div.side-wrapper');
十八、 采用find(),而不使用上下文查找
.find()函数的确快些。但是如果一个页面有许多DOM节点时,需要来回查找时,可能需要更多时间:
var $divs = $('#pageBody').find('.testdiv');
二十、 缓存jQuery对象
将你经常用的元素缓存起来:
eg:
var $header = $('#header');
var $divs = header.find('div');
var $forms = header.find('form');
当要进行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>');
}
二十二、 尽管jQuery不会抛出异常,但开发者也应该检查对象
尽管jQuery不会抛出大量的异常给用户,但是开发者也不要依赖于此。jQuery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前,应先检查一下这个对象存不存在。
二十三. 使用直接函数,而不要使用与与之等同的函数
为了获得更好的性能,你应该使用直接函数如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因为后面的几个将会调用$.ajax()。
二十四、 使用jQuery utility函数
不要忘了简单实用的jQuery的utility函数。我最喜欢的是$.isFunction(), $isArray()和$.each()。
二十五、推迟到$(window).load
有时候采用$(window).load()比$(document).ready()更快,因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。
二十六、如果给15个以上的元素加样式时,直接给DOM元素添加style标签
$('<style type="text/css"> div.class { color: red; }</style>')
.appendTo('head');
二十七、压缩成一个主JS文件,将下载次数保持到最少
jQuery性能优化的一些参考建议的更多相关文章
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jquery性能优化的38个建议
一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...
- 必看的 jQuery性能优化的38个建议
一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...
- jQuery:jQuery性能优化28条建议
http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧 博客地址:http://www.extlight.com 一.使用最新版本 jQuery 类库 二.合理使用选择器 # 推荐使用 $("#id" ...
- jQuery性能优化和技巧
jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...
随机推荐
- Transport Layer Protocols
1 End-to-end Protocols(端到端协议) 传输层协议往往是主机对主机(host-to-host)或者说是端到端(end-to-end).通常希望传输层协议可以提供如下service: ...
- C#实现录音录像录屏源码
以前写过两篇录音和录像的文章(实现语音视频录制.在服务器端录制语音视频),最近有朋友问,如果要实现屏幕录制这样的功能,该怎么做了?实际上录屏的原理跟录音.录像是差不多的,如果了解了我前面两篇文章中介绍 ...
- redis之一初识redis
本文主要围绕以下几点进行阐述: 1.什么是redis? 2.为什么要使用redis呢? 3.redis的一些基本配置 4.redis的缺点? 正文: 1.什么是redis? Redis是一款内存高速缓 ...
- first one
我说一句话你就知道我是干什么的 hello world
- 五花八门的CSS
一.颜色 rgba(0, 0, 0, 0.5) rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值.范围从0到1, ...
- Javascript高级编程学习笔记(4)—— JS中的数据类型(2)
接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...
- 分布式控制系统Git学习
git : n. 饭桶,无用的人 github : n. 社交编程及代码托管网站 hub: n. 中心:毂:木片 Git是一个分布式版本控制软件,最初由林纳斯·托瓦兹(Linus Torvalds)创 ...
- 内存管理buddy[原理]
TODO------------------------------------------------------------------------------------------------ ...
- java-null简介
对于每一个Java程序员来说,null肯定是一个让人头痛的东西,连Java的发明者都承认这是一项巨大的设计失误,今天就来总结一下Java中关于null的知识. 1.null不属于任何类型,可以被转换成 ...
- Mac下命令行批量重命名
日常中碰到需要批量修改文件名怎么办?嗯,来终端先 案例:将Users/case目录下所有html文件修改为php文件 步骤: 1.进入目标文件夹 $ cd Users/case 2.执行以下命令 $ ...