当前位置:首页 > 技术资料

网站SEO优化JavaScript优化总结

JavaScript优化直接影响网站SEO优化效果,要注意以下几点:


1、避免全局查找
在一个函数中尽量将全局对象存储为局部变量来查找,因为访问局部变量的数要更快一些。
function(){
alert(window.location.href+window.location.host);
}
修改为:
funciton(){
var location=window.location;
alert(location.href+location.host);
}
 
2、定时器
如果针对的是不断运行的代码,不应该使用setTimeout,而应该使用setInterval。因为setTimeout每一次都会初始化一个定时器。而setInterval只会在开始的时候初始化一个定时器。
var timeoutTimes=0;
function timeout(){
      timeoutTimes++;
      if(timeoutTimes<10){
           setTimeout(timeout,10);
      }
}
修改为:
var intervalTimes=0;
function interval(){
      intervalTimes++;
      if(intervalTimes>=10){
           clearInterval(interval)''
      }
}
var interval = setInterval(interval,10);
 
3、字符串连接
如果需要连接多个字符串,应该少使用+=:

s+=a;s+=b;s+=c;
修改为:
s+=a+b+c;
而如果是收集字符串,比如多次对同一个字符进行+=操作的话,最好使用一个缓存,使用js数组来收集,最后join方法连接起来。
var buf=[];
for(var i=0;i<100;i++){
      buf.push(i.toString());
}
var all=buf.join("");
 
4、避免with语句
和函数类似,with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度。犹豫额外的作用域链的查找,在with语句中执行的代码肯定会比外面执行的低吗要慢,在能不使用with语句的时候,尽量不要使用with语句。
with(a,b,c,d){
      property1=1;
      property2=2;
}
修改为:
var obj=a.b.c.d;
obj.property1=1;
obj.property2=2;
 
5、数字转为字符串
一般用“”+1来将数字转为字符串,虽然看起来比较丑一点,但事实上这个效率最高。
(“”+1)>String()>.toString()>new String()
 
6、浮点数转化为整型
很多人喜欢使用pareseInt(),其实parseInt()是用于将字符串转为数字,而不是浮点数和整型之间的转换。我们应该使用的是Math.floor()或Math.round();
 
7、多个类型声明
所有变量可以使用单个var语句来声明,这样就是组合在一起的语句,以减少整个脚本的执行时间。
var   A=1,
       B=2,
       C=3;
 
8、使用直接量
var aTest=new Array();//var aTest=[]
var aTest=new Object();//var aTest={}
var reg=new RegExp();//var reg=/ /;
创建具有特殊性的一般对象,也可以使用字面量。
var oFruit=new O();
oFruit.color="red";
oFruit.name="apple";
应改为
varoFruit={color:"red",name:'apple'}
 
9、使用DocumentFragment优化多次的append
一旦需要跟新DOM,请考虑使用文档碎片来构建结构,然后再添加到现有的文档中。
for(var i=0;i<1000;i++){
      varel=document.createElement('p');
      el.innerHTML=i;
      document.body.append(el);
}
应该改为
varfrag=document.createDocumentFragment();
for(var i=0;i<1000,i++){
      varel=document.createElement('p');
      el.innerHTML=i;
      frag.append(el);
}
document.body.appendChild(frag);
 
10、使用一次innerHTML复制代替构建dom元素。
对于大的dom更改,使用innerHTML要比使用标准的dom方法创建同样的dom结构快的多。
varfrag=document.createDocumentFragment();
for(var i=0;i<1000;i++){
      varel=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("");
 
11、使用firstChild和nextSibling代替childNodes遍历dom元素。
var nodes=element.childNodes;
for(var i=0,l=nodes.length;i<l;i++){
      varnode=nodes[i];
}
应该改为
var node=element.firstChild;
while(node){
      node.node.nextSibling;
}
 
12、删除dom节点
删除dom节点之前,一定要删除注册在该节点上的事件,不管是observe方式还是用attachEvent方式注册的事件。否则将会产生无法回收的内存。另外,removeChild和innerHTML=‘’两者之间尽量选择后者,因为在内存泄漏工具中监测的结果是用removeChild无法有效的释放dom节点。
 
13、简化终止条件
由于每次循环过程,都会计算终止条件。所以必须保证他尽可能的快。也就是避免属性查找或其他操作。最好是将循环控制量保存到局部变量中,也就是说对数组或列表对象遍历的时候,提前将length保存到局部变量中,避免循环的每一步重复取值。
varlist=document.getElementsByTagName('p');
for(var i=0;i<list.length;i++){
 
}
应该改为
for(var i=0,l=list.length;i<l;i++){
     
}
 
14、使用后测试循环
在js中,我们使用for(;;),while(),for(in)三种循环。for(in)的效率极差。因为他需要查询散列键,只要可以,就应该尽量少用。
for(;;)和while循环,while优于for(;;),可能for(;;)结构问题,需要经常的跳转。do..while更好。
 
15、尽量少用eval函数
使用eval函数相当于在运行时,再次调用解释引擎对内容进行运行,需要消耗大量时间,而且使用eval带来的安全性问题也是不容忽视的。
 
16、不要给setTimeout或setInterval传递字符串参数。
var num=0;
setTimeout(num++,10);
应该改为
var num=0;
function addNum(){
      num++;
}
setTimeout(addNum,10);
 
17、缩短否定检测
if(oTest!="#ff0000"){}
if(oTest!=null){}
if(oTest!=false){}
以上都不太好
if(!oTest){这个比较好}
 
18、可以用三目运算符替换条件分支,可以提高效率。