【Web前端】jQuery界面优化

浏览数：30 / 时间：2015年06月09日

随着互联网的发展，网站的前端界面会越来越重要，它关注的是用户的直接体验。市场上同类型的网站越来越多，一个比其他同类网站更流畅、优雅的界面能让用户摈弃你的竞争对手。所以，让自己的网站前端运行的更快、界面更优美成为了一个重要的话题。从而，前端界面优化技术也成为了优秀前端开发人员必备的技能，这是核心竞争力。

今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术，这些优化技术需要我们深入理解JavaScript以及Web浏览器中DOM与JavaScript引擎关系。

减少DOM操作

DOM，全称Document Object Model，文档对象模型，是W3C组织推荐的处理的可扩展标识语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，即其可以处理XML和HTML文档。DOM可被JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

所以，在JavaScript代码里，我们可能会经常使用DOM操作，但这样，也导致我们需要从JavaScript引擎跨越到DOM，这种操作的代价很昂贵。所以我们如果需要在js中用到DOM，应尽量减少DOM的操作。

如下面一个示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="x1"></div>
<div id="x2"></div>
<div id="x3"></div>
</body>
</html>
<script>
//=========================================
//频繁使用DOM
var date = new Date();
var start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
    document.getElementById("x1").innerHTML = ""+end - start;
}

//=========================================
//使用变量取得DOM引用
var x2 = document.getElementById("x2");
date = new Date();
start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
    x2.innerHTML = ""+end - start;
}

//==========================================
//最后只使用一次DOM
date = new Date();
start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
}
document.getElementById("x3").innerHTML = end - start;

</script>

上述代码运行后的结果是：
187
170
16

可以看出，最后只使用一次DOM操作会比直接一次次使用DOM快很多。在jQuery里面，$(selector)就是DOM操作。

使用detach剥离DOM元素

改进DOM操作的相关方法里还可以通过先剥离要操作的元素，然后等操作完成后再将元素重新插入文档。

下面是示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="x1"></div>
<div id="x2"></div>
<div id="x3"></div>
</body>
</html>
<script src="../jQuery/jquery-1.11.2.min.js"></script>
<script>
//=========================================
//不剥离元素
var date = new Date();
var start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
    var str = "x1:"+new String(end - start);
    $("#x1").html(str);
}

//=========================================
//使用detach剥离元素
var x2 = $("#x2").detach();
date = new Date();
start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
    var str = "x2:"+new String(end - start);
    x2.html(str);
}
//将被剥离的元素重新插入
$("body").append(x2);

//========================================
//最后一次性赋值
date = new Date();
start = date.getTime();
for(var i=0;i<10000;i++){
    date = new Date();
    end = date.getTime();
}
var str = "x3:"+new String(end - start);
$("#x3").html(str);

</script>

上述示例的结果是：
x1:670
x3:13
x2:509

可以看出剥离元素的确比直接使用要快上一点，但再次插入文档时，相对位置就改变了，这点可以通过CSS样式解决。另外，我们同时可以看出直接使用document比起jQuery的$要快上很多。

大量的循环操作时尽量使用for循环

for循环会比jQuery的$.each和Array.forEach要快上很多，所以在循环的次数很大的情况下，我们应该选择for循环来让页面运转更快，在小循环次数时，可以使用另两个来使得编程便利一点。

使用局部变量缓存对象

使用局部变量可以缩短查找对象的时间和jQuery根据选择器查找的次数，可以在变量名称前加上一个$表明这是一个jQuery对象。

var $this = $(this);
var $hello = $("#hello");
$hello.button();

性能要求高的时候跳过jQuery方法

从前面我们写过的两个例子可以看出，使用核心JavaScript方法和属性将比jQuery更快。所以，如果网站的性能要求高的话，可以考虑直接使用javaScript里的方法或者DOM操作。

DRY，请勿编写重复代码

在jQuery中，我们可以使用匿名函数，这虽然给了我们极大的便利，但也使得我们经常会编写重复的代码，不利于维护和更新。所以，我们应尽量整合功能一样或者相近的代码。

如示例：

//通过选择器来整合功能一样的代码
$("#hello,#world").click(function(){
        alert("Hello World");
});

function sayHello(){ alert("Hello World");}
//通过注册同一个函数来整合重复代码
$("hello").click(sayHello);
$("world").click(sayHello);