当前位置: 澳门新濠3559 > 服务器运维 > 正文

我们应该先将对象缓存进一个变量然后再操作

时间:2019-12-26 07:51来源:服务器运维
将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示:复制代码 代码如下: var myLength =myArray.length; for (var i

将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 复制代码 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个。 复制代码 代码如下: // 别这样 $.each(reallyLongArray, function { var newLI = '

' + item + '

'; $.append; //较好的做法 var frag = document.createDocumentFragment(); $.each(reallyLongArray, function { var newLI = '

' + item + '

澳门新濠3559,'; frag.appendChild; $[0].appendChild里用$的选择器,会有多次遍历查找dom元素,效率极低用document.createDocumentFragment()来减少页面的DOM结构改变的次数、刷新的次数 // 或者这样 var myHtml = ''; $.each(myArray, function { html += '

' + item + '

'; }); $.html; 保持简洁风格 复制代码 代码如下: // 不理想 if ($ventfade.data != 'showing') { $ventfade.stop(); } if ($venthover.data != 'showing') { $venthover.stop(); } if ($spans.data != 'showing') { $spans.stop(); } // 较好的 var elems = [$ventfade, $venthover, $spans]; $.each { if != 'showing') { v.stop 慎用匿名函数 匿名函数的约束到处都是一种痛苦。他们难以调试,维护,测试或重用。相反,我们可以使用对象封装,将那些处理和回调函数组织并通过命名管理起来。 复制代码 代码如下: // 不要这样 $.ready {... $.click { $.slideUp; }); $.load(url + ' #unicorns', function; // 较好的 var PI = { onReady: function.click; $.load(url + ' #unicorns', PI.unicornCb); }, candyMtn: function.slideUp; }, slideCb: function() {... }, unicornCb: function() {... } } $.ready; 优化选择器 节点选择和DOM操作, 根据给定的ID匹配一个元素总是使用#id去寻找element 复制代码 代码如下: // 非常快 $('#container div.robotarm'); // 超级快 $.find;使用$.fn.find方法更快一些,因为第一个选择器是无须经过选择器引擎处理,在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法,这是非常快,因为它是原产于浏览器。如果你需要选择多个元素,这必然会涉及到DOM遍历和循环,为了提高性能,建议从最近的ID开始继承。 具体指定选择器的右侧部分应该尽可能具体,左侧则不需要那么具体。 复制代码 代码如下: // 未优化 $; // 优化后 $;如果可以,尽量在选择器靠右侧的部分使用tag.class,而左侧只有tag或者只有.class。 避免过度的具体 复制代码 代码如下: $('.data table.attendees td.gonzalez'); // 不写中间的会更好 $;清爽的DOM结构也有助于改善选择器的性能,选择器引擎可以少跑几层去寻觅那个元素了。 避免使用无定向通配符选择器 复制代码 代码如下: $; // 极慢 $.children(); // 快很多 $; // 无定向搜索 $; // 同上 $('.gender input:radio'); // 这样 好很多 使用事件委派 事件委派允许你为一个容器元素绑定一个事件处理程序,而不需给容器内每个元素都去绑定。jQuery提供$.fn.live和$.fn.delegate。如果可能的话,你应该使用$.fn.delegate而不是$.fn.live,因为它省去了不必要的选择需要,其明确的情况下,减少了大约80 % 的开销。除了有性能提升的好处,事件委派也使你在往容器里添加新元素时无需重新绑定事件,因为已经有了。 通过事件委派一次绑定多种事件,以减少事件冗余 复制代码 代码如下: // 不好的 $.click; // 较好的: event delegation with $.fn.live $.live; // 最优的: $.fn.delegate $.delegate('li.trigger', 'click', handlerFn); 移除元素 DOM操作是慢的,你应该尽量避免去操作它。jQuery在1.4版引入了 $.fn.detach从DOM中去掉所有匹配的元素。 复制代码 代码如下: var $table = $; var $parent = table.parent; // ... 添加大量的行到表格中 $parent.append和.remove保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。 当大量元素修改CSS,应该使用样式表 如果你在用$.fn.css给多于20个元素修改CSS,考虑一下添加一个style标签,这样可以速度可以提升60 % 。 复制代码 代码如下: // 多于20个 明显慢 $.css; $('

').appendTo; 使用$.data而不是$.fn.data将$.data应用于DOM元素比直接调用jQuery选择结果的$.fn.data要快上10倍.虽然,这要先确定你是理解DOM元素与jQuery选择结果之间的区别的。 复制代码 代码如下: // 常用 $.data; // 快十倍 $.data; 别费时间在空白的选择结果上了 jQuery将不会告诉你,如果你想运行的代码在一个空选择上,它会继续运行,好像没有什么错。影响性能。 复制代码 代码如下: //太遭了,执行了三个方法后才意识到里面是空的 $.slideUp(); // 较好 var $mySelection = $; if { mySelection.slideUp(); } // 最佳: add a doOnce plugin jQuery.fn.doOnce = function { this.length && func.apply; return this; } $.doOnce { // make it ajax! o/ });这层保护是适用于jQuery UI widget,因为即使操作的元素为空其开销也不少。 定义变量 变量可以定义一个声明而不是几个 复制代码 代码如下: // 老套写法 var test = 1; var test2 = function() {... }; var test3 = test2; // 新 var test = 1, test2 = function() {... }, test3 = test2;在自动执行的函数,变量的定义可以完全省掉。 {... }); 条件判断 复制代码 代码如下: // 旧方法 if (type == 'foo' || type == 'bar') {... } // 好方法 if $/.test {... } // 查找对象 if [type]) {... } 作者:曾祥展 出处:学无止境 (

编辑:服务器运维 本文来源:我们应该先将对象缓存进一个变量然后再操作

关键词: