jQuery性能优化

最新推荐文章于 2021-07-18 14:49:15 发布

农家开发者

最新推荐文章于 2021-07-18 14:49:15 发布

阅读量365

点赞数

文章标签： jquery javascript function button list object

之前，我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，如果使用不当，有可能影响整个网页的响应速度，下面列举11个更有效的使用jQuery库： 1、总是使用#id去寻找element. 在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。选择单个元素

选择button的性能不好的一种方式： var traffic_button = $('#content .button'); 取而代之的是直接选择button: var traffic_button = $('#traffic_button'); 选择多个元素在我们讨论选择多个元素的时候，我们真正需要知道的是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');注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如，它会因为去循环所有的

元素去寻找ID为content的

，而导致很慢。 var content = $('div#content');按照同样的思路，从多个ID传下来是冗余的。 var traffic_light = $('#content #traffic_light'); 3、缓存jQuery对象养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样做： $('#traffic_light input.on).bind('click', function(){...}); $('#traffic_light input.on).css('border', '3px dashed yellow'); $('#traffic_light input.on).css('background-color', 'orange'); $('#traffic_light input.on).fadeIn('slow'); 取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。 var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}); $active_light.css('border', '3px dashed yellow'); $active_light.css('background-color', 'orange'); $active_light.fadeIn('slow'); 提示：使用$前辍表示我们的本地变量是一个jQuery包集。记住，不要在你的应该程序里出现一次以上的jQuery重复的选择操作。额外提示：延迟存储jQuery对象结果。如果你想在你的程序的其它地方使用jQuery结果对象（result object(s)），或者你的函数要执行多次，要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象，就可以在其它的函数里引用它。 // Define an object in the global scope (i.e. the window object) window.$my ={ // Initialize all the queries you want to use more than once head : $('head'), traffic_light : $('#traffic_light'), traffic_button : $('#traffic_button')}; function do_something(){ // Now you can reference the stored results and manipulate them var script = document.createElement('script'); $my.head.append(script); // When working inside functions, continue to save jQuery results // to your global container. $my.cool_results = $('#some_ul li'); $my.other_results = $('#some_table td'); // Use the global functions as you would a normal jQuery result $my.other_results.css('border-color', 'red'); $my.traffic_light.css('border-color', 'green'); } 4、更好的利用链前面的例子也可以这样写： var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}) .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow'); 这样可以让我们写更少的代码，使JavaScript更轻量。 5、使用子查询 jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

例如，我们可以利用子查询缓存active和inactive lights以便后面的操作。 var $traffic_light = $('#traffic_light'), $active_light = $traffic_light.find('input.on'), $inactive_lights = $traffic_light.find('input.off'); 提示：可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。 6、限制直接对DOM操作 DOM操作的基本做法是在内存中创建DOM结构，然后再更新DOM结构。这不是jQuery最好的做法，但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。例如，如果你需要动态创建一列元素，不要这样做： var top_100_list = [...], // assume this has 100 unique strings $mylist = $('#mylist'); // jQuery selects our

element for (var i=0, l=top_100_list.length; i ' + top_100_list[i] + ''); } 取而代之，我们希望在插入DOM结构之前先在一个字符串里创建一套元素。代码 var top_100_list = [...], // assume this has 100 unique strings $mylist = $('#mylist'), // jQuery selects our
- element top_100_li = ""; // This will store our list items for (var i=0, l=top_100_list.length; i element top_100_ul = '
  - '; // This will store our entire unordered list for (var i=0, l=top_100_list.length; i