jQuery性能优化技巧分析

本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下：

一、使用最新版本的jQuery类库

jQuery新版本会较上个版本进行Bug修复和一些优化，不过需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。

二、使用合适的选择器

jQuery选择器性能最佳到最差方式如下：

id选择器，如$('#id', context)
标签选择器，如$('p', context)
class选择器，如$('.class', context)
属性选择器，如$('[attribute=value]', context)
伪类选择器，如$(':hidden', context)

补充及注意事项:

尽量给选择器指定上下文context，可以缩小定位元素的范围
避免id重复修饰id，错误代码：var $el = $('#list #item1')
避免标签或class修饰id，错误代码： var $el = $('ul #item1')
如果使用属性选择器，尽量指定所属的标签选择器，这样可以加快访问速度，正确代码:var $el = $('a[title="link"]')

三、缓存对象

下面是性能不好的方式：

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

说明:jQuery会在创建每个选择器的过程中，查找DOM，消耗时间与性能。

比较好的方式：

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

说明:永远不要让相同的选择器在你的代码里出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环中，例如for()，while()或者$.each()中处理节点时，下面有个实例值得大家注意:

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

说明:循环添加li节点100次，这种操作消耗的性能不低，所以更好的方式是将要添加的节点在插入DOM树之前全部创建好，再一次性添加到DOM树中。更好的方式：

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

五、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。在性能方面，建议使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。

另外注意：检查长度是一个检查jQuery对象是否存在的方式。

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

六、事件代理

每一个JavaScript事件(如click,mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时，这点会很有用。

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

说明:这种方式，如果有100个li，要绑定100个事件。显然，不科学，性能损耗很多。

更好的方式是：只需向li的父节点ul绑定一次事件，然后通过event.target获取到点击的当前元素。

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

七、将你的代码转化成jQuery插件

如果每次都花时间去写类似的jQuery代码，那么可以考虑将这部分类似的代码变成插件，它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码。

八、使用Javascript数组join()来拼接字符串

处理长字符串的时候，使用join()方法有助于优化性能。

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

九、合理利用HTML5的data属性

HTML5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data()方法，有效的利用HTML5的属性，来自动得到数据。

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

十、尽量使用原生的JavaScript方法

如：

$(this).css('color': 'blue');

优化成：

this.style.color = 'blue';

如：

$('<p></p>');

优化成:

$(document.createElement('p'));

十一、压缩JavaScript

使用压缩工具压缩JavaScript文件。
发布项目时，应使用“压缩版”JavaScript文件。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery代码优化 事件委托篇

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一

  • jQuery代码优化 遍历篇

    了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能.本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题. jQuery对象栈 jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中.而每个jQuery对象都有三个属性:context.selector和prevObject,其中的prevObject属性就指向这个对象栈中的

  • JQuery性能优化的几点建议

    针对jquery性能优化这个主题,想必大家都有所了解.下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考. 一.选择器性能优化建议 1. 总是从#id选择器来继承:这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了: 2. 在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$('head')),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用tag来修饰cla

  • Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解. 首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈.其次,jquery的优化与web优化中的某些方法是一样的. a.压缩js.使用代码压缩技术,减小文件体积.(使用jsmin.YUI Compressor等). b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.把事件注册上提到父节点上,这 样就不需要为每

  • 优化Jquery,提升网页加载速度

    总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法. 复制代码 代码如下: <div id="content"><form method=&

  • jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的二.请使用一个var来定义变量如果你使用多个变量的话,请如下方式定义: 复制代码 代码如下: var page = 0,   $loading = $('#loading'),   $body = $('body'); 不要给每一

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • JQuery教学之性能优化

    jQuery是一款非常优秀的javascript框架,当我们使用到jQuery后就再也不想回到javascript时冗长的代码,那么jQuery的优化就摆在了我们的面前.那么我们优化JQuery应该从那些方面入手呢? 1.使用最新版本的jQuery 新版本相对于旧版本会做性能上的改进,还有就是添加新功能. 2.选择器的使用 我们通常会使用id选择器.class选择器.元素选择器.伪类选择器和元素选择器.在使用时我的建议是最好使用id选择器,其次是class选择器>元素选择器>Element选择

  • jQuery性能优化技巧分析

    本文较为详细分析了jQuery性能优化技巧.分享给大家供大家参考.具体分析如下: 一.使用最新版本的jQuery类库 jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 二.使用合适的选择器 jQuery选择器性能最佳到最差方式如下: id选择器,如$('#id', context) 标签选择器,如$('p', context) class选择器,如$('.class', context) 属性选择器,如

  • 提高jQuery性能优化的技巧

    下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说

  • Python 代码性能优化技巧分享

    Python 代码性能优化技巧分享

    如何进行 Python 性能优化,是本文探讨的主要问题.本文会涉及常见的代码优化方法,性能优化工具的使用以及如何诊断代码的性能瓶颈等内容,希望可以给 Python 开发人员一定的参考. Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 80% 的工作量.优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率. 改进算法,选择合适的数据结构 一个

  • php导入大量数据到mysql性能优化技巧

    本文实例讲述了php导入大量数据到mysql性能优化技巧.分享给大家供大家参考.具体分析如下: 在mysql中我们结合php把一些文件导入到mysql中,这里就来分享一下我对15000条记录进行导入时分析与优化,需要的朋友可以参考一下. 之前有几篇文章,说了最近tiandi在帮朋友做一个小项目,用于统计电话号码的,每次按需求从数据库里随机生成打包的电话号码,然后不停地让人打这些电话号码推销产品(小小鄙视一下这样的行为).但是朋友要求帮忙,咱也不能不帮啊,是吧.程序两个星期前已经做好,测试完毕交工

  • Java性能优化技巧汇总

    本文实例汇总了Java性能优化技巧.分享给大家供大家参考.具体分析如下: 这里参考了些书籍,网络资源整理出来,适合于大多数Java应用 在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1.尽量使用final修饰符. 带有final修饰符的类是不可派生的.在JAVA核心API中,有许多应用final的例子,例如java.lang.String.为String类指定final防止了使用者覆盖length()方法.另外,如

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

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

  • 值得收藏的20个Linux服务器性能优化技巧

    值得收藏的20个Linux服务器性能优化技巧

    Linux是一种开源操作系统,它支持各种硬件平台,Linux服务器全球知名,它和Windows之间最主要的差异在于,Linux服务器默认情况下一般不提供GUI(图形用户界面),而是命令行界面,它的主要目的是高效处理非交互式进程,响应时间并不是那么重要,相反,能够长时间处理高负载才是最关键的.Linux高可用服务器集群解决方案让IT系统管理员可以从容应对许多常见的硬件和软件故障,允许多台计算机一起工作,为关键服务正常运行提供保障,系统管理员可以不中断服务执行维护和升级. Linux服务器有各种用途

  • MySQL性能优化技巧分享

    MySQL性能优化 在互联网公司MySQL的使用非常广泛,大家经常会有MySQL性能优化方面的需求.整理了一些在MySQL优化方面的实用技巧. Schema与数据类型优化 整数通常是标识列最好的选择,因为它们很快并且可以使用AUTO_INCREMENT 完全"随机"的字符串(如:MD5().SHA1()或者UUID()等产生的字符串)会任意分布在很大的空间内,会导致INSERT以及一些SELECT语句变的很慢 如果希望查询执行得快速且并发性好,单个查询最好不要做太多的关联查询(互联网公

  • Vue.js九个性能优化技巧(值得收藏)

    Vue.js九个性能优化技巧(值得收藏)

    目录 Functional components Child component splitting Local variables Reuse DOM with v-show KeepAlive Deferred features Time slicing Non-reactive data Virtual scrolling 总结 参考资料 这篇文章主要参考了 Vue.js 核心成员Guillaume Chau在 19 年美国的 Vue conf 分享的主题:9 Performance se

  • vue项目中一定会用到的性能优化技巧

    vue项目中一定会用到的性能优化技巧

    目录 引言 性能优化标准 Lighthouse 通用常规优化手段 通用性能优化分析 FCP(First Contentful Paint) LCP(Largest Contentful Paint) SpeedIndex(速度指数) 排查性能瓶颈 分析包内容 利用chorme devtool 的代码覆盖率 针对vue 的特殊优化 图片懒加载 虚拟滚动 vue 中的函数式组件 利用v-show .KeepAlive 复用dom 分批渲染组件 最后 引言 提起性能优化 很多人眼前浮现的面试经验是不是

随机推荐