jquery代码优化,想到一条在随时更新。。。

我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度

咱们细谈:

1.总是使用#id去寻找element.   jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素    

选择多个元素的时候,我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失, 总是使用最近的父ID去寻找。  var traffic_lights = $('#traffic_light input')

2、在Classes前面使用Tags ,jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

总是在一个Class前面加上一个tag名字(记得从一个ID传下来)  var active_light = $('#traffic_light input.on');   在查找的类名称前面加标签,可以减少DOM查询遍历

3、缓存jQuery对象

养成保存jQuery对象到一个变量上(就像上面的例子)的习惯,首现保存jQuery变量到一个本地变量后,再继续你的操作,jquery采用链式编程:例如

var $active_light = $('#traffic_light input.on');
 
$active_light.bind('click', function(){...})
 
 .css('border', '3px dashed yellow')
 
 .css('background-color', 'orange')
 
 .fadeIn('slow');
 
4.使用子查询

我们可以利用子查询缓存active和inactive lights以便后面的操作。 在父元素下查找子元素。find(),,children()

var $traffic_light = $('#traffic_light'),
 
$active_light = $traffic_light.find('input.on'),
 
$inactive_lights = $traffic_light.find('input.off');
5.、限制直接对DOM操作

例如:我们在进行遍历循环的时候,不能在循环内部每次循环都进行字符串的拼接,或者追加元素,而是在全部循环以后,直接一次性进行追加等操作

字符串拼接特别耗费性能,能不用就不用,哈哈哈

6.事件委托(时间冒泡)

每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次,而且可以计算出是哪一个节点触发了事件,而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如,假如我们要开发 一个包含很多input的大型form,当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的:、

$('#myList).bind('click', function(e){
 
 var target = e.target, // e.target grabs the node that triggered the event.
 
  $target = $(target); // wraps the node in a jQuery object
 
 if (target.nodeName === 'LI') {
 
  $target.addClass('clicked');  // do stuff
 
 }
 
});

7、遵从$(windows).load

有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用,它在页面呈现时发生,虽然其它对象还在下载中。如果你发现你的页面在下载中停顿,就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率,它是在所有HTML(包括iframe内容)都下载完以后才 去调用所有对象的

8.压缩JS

虽然和jQuery无关,但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势,这对开发者来讲是必不可少的,但对普通用户来 讲没有任何关系。不用什么借口,是时候把JS压缩纳入我们的工作流程中来了。注释你的代码,在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验,它可以安全的把JavaScript压缩的尽可能小,而不会多占用CPU。

posted @ 2018-03-18 13:59  前端大佬李嘉诚  阅读(124)  评论(0编辑  收藏  举报