一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:
$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的

二、请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:

.代码如下:

varpage = 0,
   $loading = $('#loading'),
   $body = $('body');

不要给每一个变量都添加一个var关键字,除非你有严重的强迫症

三、定义jQuery变量是添加$符号
申明或者定义变量的时候,请记住如果你定义的是jQuery的变量,请添加一个$符号到变量前,如下:

.代码如下:

var$loading = $('#loading');

这里定义成这样的好处在于,你可以有效的提示自己或者其它阅读你代码的用户,这是一个jQuery的变量。

四、DOM操作请务必记住缓存(cache)
在jQuery代码开发中,我们常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:

.代码如下:

$('#loading').html('完毕');
$('#loading').fadeOut();

代码没有任何问题,你也可以正常运行出结果,但是这里注意你每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如果你需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:

.代码如下:

var$loading = $('#loading');
$loading.html('完毕');$loading.fadeOut();

这样性能会更好。

五、使用链式操作
上面那个例子,我们可以写的更简洁一些:

.代码如下:

var $loading = $('#loading');
$loading.html('完毕').fadeOut();

六、精简jQuery代码
尽量把一些代码都整合到一起,请勿这样编码:

.代码如下:

// !!反面人物
$button.click(function(){
    $target.css('width','50%');
    $target.css('border','1px solid #202020');
    $target.css('color','#fff');
});

应该这样书写:

.代码如下:

$button.click(function(){
    $target.css({'width':'50%','border':'1px solid#202020','color':'#fff'});
});

七、避免使用全局类型的选择器
请勿如下方式书写:$('.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来实现。

十四、总是从#id选择器来继承
这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

.代码如下:

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

或者从ID选择器继承来选择多个元素:

.代码如下:

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

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

.代码如下:

varreceiveNewsletter = $('#nslForm input.on');

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

.代码如下:

varcontent = $('div#content'); // 非常慢,不要使用

用ID来修饰ID也是画蛇添足:

.代码如下:

vartraffic_light = $('#content #traffic_light'); // 非常慢,不要使用

十六、使用子查询
将父对象缓存起来以备将来的使用

.代码如下:

varheader = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);

十七、 优化选择器以适用Sizzle的“从右至左”模型
自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些:

.代码如下:

varlinkContacts = $('.contact-links div.side-wrapper');

而不要使用

.代码如下:

varlinkContacts = $('a.contact-links .side-wrapper');

十八、 采用find(),而不使用上下文查找
.find()函数的确快些。但是如果一个页面有许多DOM节点时,需要来回查找时,可能需要更多时间:

.代码如下:

vardivs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The besttime
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

十九、 编写属于你的选择器
如果你经常在代码中使用选择器,那么扩展jQuery的$.expr[':']对象吧,编写你自己的选择器。下面的例子中,我创建了一个abovethefold选择器,用来选择不可见的元素:

.代码如下:

$.extend($.expr[':'],{
 abovethefold: function(el) {
  return $(el).offset().top < $(window).scrollTop() +$(window).height();
 }
});
var nonVisibleElements = $('div:abovethefold'); // 选择元素

二十、 缓存jQuery对象
将你经常用的元素缓存起来:

.代码如下:

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

当要进行DOM插入时,将所有元素封装成一个元素

(PHP开发、web前端、UI设计、VR开发专业培训机构--V客学院知识分享!)

jquery性能优化建议-上篇的更多相关文章

  1. Jquery学习笔记--性能优化建议

    一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 1 $('#content').hide(); 或 ...

  2. jQuery性能优化的28个建议

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...

  3. jQuery:jQuery性能优化28条建议

    http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...

  4. 28个jQuery性能优化的建议

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...

  5. jquery性能优化的十种方法

    jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...

  6. jQuery性能优化指南(转载)

    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...

  7. jQuery 性能优化技巧

    原文地址:jQuery 性能优化技巧 博客地址:http://www.extlight.com 一.使用最新版本 jQuery 类库 二.合理使用选择器 # 推荐使用 $("#id" ...

  8. jQuery性能优化和技巧

    jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...

  9. Yahoo! 35条网站性能优化建议

    Yahoo! 35条网站性能优化建议 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客 ...

随机推荐

  1. RGBD动作识别的多视图层融合模型

    摘要 基于视觉的动作识别在实践中遇到了不同的挑战,包括从任何角度识别主题,实时处理数据以及在现实环境中提供隐私.甚至识别基于配置文件的人类动作(基于视觉的动作识别的一个子集),在计算机视觉中也是一个巨 ...

  2. 仅用CSS几步实现赛博朋克2077风格视觉效果

    背景 文章开始之前先简单了解下什么是 赛博朋克,以及什么是 赛博朋克2077. 赛博朋克(Cyberpunk)是"控制论.神经机械学"与"朋克"的结合词,背景大 ...

  3. 密码学系列之:feistel cipher

    密码学系列之:feistel cipher 简介 feistel cipher也叫做Luby–Rackoff分组密码,是用来构建分组加密算法的对称结构.它是由德籍密码学家Horst Feistel在I ...

  4. Mysql数据库值的添加、修改、删除及清空

    3.MySQL数据管理 第一种方式:不太建议,看起来复杂些 -- 学生表的 gradeid 字段,要去引用 年级表的 gradeid -- 定义外键key -- 给这个外键添加约束,(执行引用),RE ...

  5. 记一次项目中解决 -- 并发减库存超卖问题过程(Java)

    起因:项目中要做预约功能,首先每天的余票都是有上限的,自然不能出现超卖的情况 基于我们项目是单体分布式的springcloud部署,我想了下 第一种方法,直接mysql加行锁,要update这条库存数 ...

  6. 一款基于SpringBoot+SpringSecurity的后台管理系统,强烈推荐

    简介 Base Admin一套简单通用的后台管理系统,主要功能有:权限管理.菜单管理.用户管理,系统设置.实时日志,API加密,以及登录用户修改密码.配置个性菜单等. 技术栈 前端:Layui 后端: ...

  7. 十亿级流量下,我与Redis时延小突刺的战斗史

    一.背景 某一日收到上游调用方的反馈,提供的某一个Dubbo接口,每天在固定的时间点被短时间熔断,抛出的异常信息为提供方dubbo线程池被耗尽.当前dubbo接口日请求量18亿次,报错请求94W/天, ...

  8. VBS脚本编程(5)——过程与函数

    过程是构成程序的一个模块,往往用来完成一个相对独立的功能.过程可以使程序更清. Sub过程与Function函数的区别: Sub没有返回值,Function有返回值: Sub不能放在表达式中,Func ...

  9. 剖析虚幻渲染体系(06)- UE5特辑Part 1(特性和Nanite)

    目录 6.1 本篇概述 6.1.1 本篇内容 6.1.2 基础概念 6.2 UE5新特性 6.2.1 UE5编辑器 6.2.1.1 下载编辑器及资源 6.2.1.2 启动示例工程 6.2.1.3 编辑 ...

  10. SpringCloud入门及创建分布式项目

    1.了解微服务 1.1 什么是微服务 微服务是一种架构风格 一个应用拆分为一组小型服务 每个服务运行在自己的进程内,也就是可独立部署和升级 服务之间使用轻量级HTTP交互 服务围绕业务功能拆分 可以由 ...