JavaScript 小函数积累及性能优化
获取值的类型:
var toString = Object.prototype.toString; function getType(o) { return toString.call(o).slice(8,-1); }
document.write(getType(null)); document.writeln("<br/>"); document.write(getType(undefined));
输出:
定义一个 log 方法,让它可以代理 console.log 方法,常见的解决方法是:
function log() { var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console, args); }
重复定时器
setTimeout(function () { var div=document.getElementById("myDiv"); left=parent(div.style.left)+5; div.left=left+"px"; if(left<200){ setTimeout(arguments.callee,50); } });
js
访问全局变量总是比访问局部变量慢,因为需要遍历作用域链,只要减少花费在作用域链上的时间,就能增加脚本的整体性能。
1.可能优化脚本性能最重要的就是注意全局查找
2.避免使用with语句
例子:
function update() { var imgs=document.getElementBuTagName("img"); for(var i=0;len=imgs.length,i<len;i++) { imgs[i].title=document.title+" image "+i; } var msg=document.getElementById("msg"); msg.innerHTML="Update Complete" }
优化后:(现在函数只执行一次全局查找速度更快)
function update() { var doc=document; var imgs=doc.getElementBuTagName("img"); for(var i=0;len=imgs.length,i<len;i++) { imgs[i].title=doc.title+" image "+i; } var msg=doc.getElementById("msg"); msg.innerHTML="Update Complete" }
对循环的优化
for(var i=0;i<values.length;i++) { process(values[i]); }
优化1,后值循环
for(var i=values.length-1;i>=0;i--) { process(values[i]); }
优化2,后侧循环:
var i=values.length-1; if(i>-1) { do{ procrss(values[i]); }while(--i>=0); }
js优化要注意的其他事项:
- 原生方法较快
- switch语句较快
- 位运算符较快
多个变量声明:
var count=5; var color="blue"; var values=[1,2,3]; var now=new Date();
使用单个var声明比多个var声明快很多。
var count=5, color="blue", values=[1,2,3], now=new Date();
插入迭代值:
var name=values[i]; i++;
优化为:
var name=values[i++];
使用数组和对象字面量:
var values=new Array(); values[0]=123; values[1]=456; values[2]=789; var person=new Object(); person.age=29; person.name="zhang"; person.say=function(){ alert(this.name); }
优化:
var values=[123,456,789]; var person={ name:"zhang", age:29, say:function(){ alert(this.name); } };