jQuery 代码编写优化

最新推荐文章于 2018-09-23 09:15:28 发布

MuGuiLin

最新推荐文章于 2018-09-23 09:15:28 发布

阅读量398

点赞数

分类专栏： jQuery 文章标签： jQuery 代码编写优化代码优化

本文链接：https://blog.csdn.net/muguli2008/article/details/77062670

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

jQuery是Web前端中应用最广泛之一，但在书写 jquery 的时候，为了书写代码方便，往往忽略了程序执行过程中，给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢，甚至无法运行等问题。

因此有必要对自己书写的 jquery 代码进行优化，以达到更快捷、更流畅的运行效果。

1 ，总是从 ID 选择器开始继承

在 jQuery 中最快的选择器是 ID 选择器，因为它直接来自于 JavaScript 的 getElementById() 方法。
例如有一段 HTML 代码：

如果采用下面的选择器，那么效率是低效的。
var traffic_button = $(“#content .button”);

因为  button  已经有  ID  了，我们可以直接使用  ID  选择器。如下所示：
var traffic_button = $(“#traffic_button”);
当然   这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到  DOM  遍历和循环，
为了提高性能，建议从最近的  ID  开始继承。
如下所示：
var traffic_lights = $(“#traffic_light input”);

2 、请使用一个 var 来定义变量

如果你使用多个变量的话，请如下方式定义：

. 代码如下 :

Var page = 0,

$myid = “”,

$loading = $('#loading'),

$body = $('body');

不要给每一个变量都添加一个 var 关键字

3 、使用链式操作

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

$('#loading') . attr('class', 'blues')

$('#loading') . fadeOut();

上面例子，可以写的更简洁一些：

$('#loading').html(' 完毕 ').attr('class', 'blues').fadeOut();

4 、精简 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'});
});

5 、多用逻辑判断 || 或者 && 来提速

如下书写：

if(!$something) {
$something = $('#something ');
}

这样书写性能更好：

$something = $something || $('#something');

6 ，将 jQuery 对象缓存起来

（1）把 jQuery 对象缓存起来就是要告诉我们要养成将 jQuery 对象缓存进变量的习惯。
如下代码：

$("#traffic_light input.on").bind("click", function(){ });

$("#traffic_light input.on").css("border", "1px dashed yellow");

$("#traffic_light input.on").css("background-color", "orange");

$("#traffic_light input.on").fadeIn("slow");

这样书写性能更好：

var $active_light = $("#traffic_light input.on");

$active_light.bind("click", function(){ });

$active_light.css("border", "1px dashed yellow");

$active_light.css("background-color", "orange");

$active_light.fadeIn("slow");

记住，永远不要让相同的选择器在你的代码里出现多次 .

（2）如果打算在其他函数中使用 jQuery 对象，那必须把它们缓存到全局环境中。

在全局范围定义一个对象 ( 例如 : window 对象 )

window.$my = {

head : $("head"),

traffic_light : $("#traffic_light"),

traffic_button : $("#traffic_button")

};

引用存储的结果并操作它们

function do_something(){

var script = document.createElement("script");

$my.head.append(script);

// 当你在函数内部操作是 , 可以继续将查询存入全局对象中去 .

$my.cool_results = $("#some_ul li");

$my.other_results = $("#some_table td");

// 将全局函数作为一个普通的 jquery 对象去使用 . 也可以在其他函数中使用它

$my.other_results.css("border-color", "red");

$my.traffic_light.css("border-color", "green");

}

7 ，推迟到 $(window).load

jQuery  对于开发者来说有一个很诱人的东西  ,  可以把任何东西挂到  $(document).ready  下。
尽管  $(document).rady  确实很有用，   它可以在页面渲染时，其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态，很有可能就是  $(document).ready  函数引起的。
你可以通过将  jQuery  函数绑定到  $(window).load  事件的方法来减少页面载入时的  cpu  使用率。
它会在所有的  html(  包括  iframe)  被下载完成后执行。
一些特效的功能，例如拖放  ,  视觉特效和动画  ,  预载入隐藏图像等等，都是适合这种技术的场合。