高效率JavaScript代码的编写技巧

让复杂的JavaScript应用更有执行效率
服务器君一共花费了223.233 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

使用DocumentFragment优化多次append

添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面。该做法可以减少页面渲染dom元素的次数。经IE和FX下测试,在append1000个元素时,效率能提高10%-30%,FX下提升较为明显。

前:

for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el);
}

后:

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

通过模板元素clone,替代createElement

通过一个模板dom对象cloneNode,效率比直接创建element高。性能提高不明显,约为10%左右。在低于100个元素create和append操作时,没有优势。

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);    
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName('p')[0];
for (var i = 0; i < 1000; i++) {
    var el = pEl.cloneNode(false);
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

使用一次innerHTML赋值代替构建dom元素

根据数据构建列表样式的时候,使用设置列表容器innerHTML的方式,比构建dom元素并append到页面中的方式,效率有数量级上的提高。

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

使用firstChild和nextSibling代替childNodes遍历dom元素

约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。

var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
……
}
var node = element.firstChild;
while (node) {
……
node = node.nextSibling;
}

使用Array做为StringBuffer,代替字符串拼接的操作

IE在对字符串拼接的时候,会创建临时的String对象;经测试,在IE下,当拼接的字符串越来越大时,运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化;经测试,在Fx下,使用Array的join方式执行时间约为直接字符串拼接的1.4倍。

var now = new Date();
var str = '';
for (var i = 0; i < 10000; i++) {
    str += '123456789123456789';
}
alert(new Date() - now);
var now = new Date();
var strBuffer = [];
for (var i = 0; i < 10000; i++) {
    strBuffer.push('123456789123456789');
}
var str = strBuffer.join('');
alert(new Date() - now);

将循环控制量保存到局部变量

对数组和列表对象的遍历时,提前将length保存到局部变量中,避免在循环的每一步重复取值。

var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
    ……
}
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {
    ……
}

顺序无关的遍历时,用while替代for

该方法可以减少局部变量的使用。比起效率优化,更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑。

var arr = [1,2,3,4,5,6,7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
    sum += arr[i];
}    
var arr = [1,2,3,4,5,6,7];
var sum = 0, l = arr.length;
while (l--) {
    sum += arr[l];
}

使用三目运算符替代条件分支

if (a > b) {
num = a;
} else {
num = b;
}
num = a > b ? a : b;

需要不断执行的时候,优先考虑使用setInterval

setTimeout每一次都会初始化一个定时器。setInterval只会在开始的时候初始化一个定时器。

var timeoutTimes = 0;
function timeout () {
    timeoutTimes++;
    if (timeoutTimes < 10) {
        setTimeout(timeout, 10);
    }
}
timeout();
var intervalTimes = 0;
function interval () {
    intervalTimes++;
    if (intervalTimes >= 10) {
        clearInterval(interv);
    }
}
var interv = setInterval(interval, 10);

使用function而不是string

如果把字符串作为setTimeout和setInterval的参数,浏览器会先用这个字符串构建一个function。

var num = 0;
setTimeout('num++', 10);
var num = 0;
function addNum () {
    num++;
}
setTimeout(addNum, 10);

重复使用的调用结果,事先保存到局部变量

避免多次取值的调用开销。

var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;

使用直接量

var a = new Array(param,param,...) -> var a = []
var foo = new Object() -> var foo = {}
var reg = new RegExp() -> var reg = /.../

避免使用with

with虽然可以缩短代码量,但是会在运行时构造一个新的scope。OperaDev上还有这样的解释,使用with语句会使得解释器无法在语法解析阶段对代码进行优化。对此说法,无法验证。

with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

巧用||和&&布尔运算符

function eventHandler (e) {
if(!e) e = window.event;
}
function eventHandler (e) {
e = e || window.event;
}

还有下面的例子:

if (myobj) {
doSomething(myobj);
}
myobj && doSomething(myobj);

类型转换

数字转换成字符串,应用"" + 1,性能上:("" +) > String() > .toString() > new String();

浮点数转换成整型,不使用parseInt(), parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,建议使用Math.floor()或者Math.round()。

对于自定义的对象,推荐显式调用toString()。内部操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String。

循环引用

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。

简单的循环引用:

var el = document.getElementById('MyElement');
var func = function () {…}
el.func = func;
func.element = el; 

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

function init() {
    var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

置空dom对象

function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
el = null;
}
init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。如果我们需要将dom对象返回,可以用如下方法:

function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {……}
    return el;
}
init();
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
try{
return el;
} finally {
    el = null;
}
}
init();

构造新的context:

function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {……}
}
init();
function elClickHandler() {……}
function init() {
    var el = document.getElementById('MyElement');
    el.onclick = elClickHandler;
}
init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

通过javascript创建的dom对象,必须append到页面中

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

	function create () {
        var gc = document.getElementById('GC');
        for (var i = 0; i < 5000 ; i++)
        {
            var el = document.createElement('div');
            el.innerHTML = "test";
            //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化
            gc.appendChild(el);
        }
    }

释放dom元素占用的内存

将dom元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。

在rich应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的dom元素使用的内存。

释放javascript对象

在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。

对象:obj = null,对象属性:delete obj.myproperty。

数组item:使用数组的splice方法释放数组中不用的item。

避免string的隐式装箱

对string的方法调用,比如'xxx'.length,浏览器会进行一个隐式的装箱操作,将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时,采用如下写法:

var myString = new String('Hello World');

本文地址:http://www.nowamagic.net/librarys/veda/detail/363,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/363

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《深入理解计算机系统(原书第2版)》 布莱恩特(Randal E.Bryant) (作者), 奥哈拉伦(David R.O'Hallaron) (作者), 龚奕利 (译者), 雷迎春 (译者)

《深入理解计算机系统》从程序员的视角详细阐述计算机系统的本质概念,并展示这些概念如何实实在在地影响应用程序的正确性、性能和实用性。全书共12章,主要内容包括信息的表示和处理、程序的机器级表示、处理器体系结构、优化程序性能、存储器层次结构、链接、异常控制流、虚拟存储器、系统级I/O、网络编程、并发编程等。书中提供子大量的例子和练习题,并给出部分答案,有助于读者加深对正文所述概念和知识的理解。

更多计算机宝库...