建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 建站指南 > 建站经验 >

Web网站前端优化策略总结(3)

时间:2010-05-19 23:45来源: 作者: 点击:
二、代码级优化 1. Javascript (1). DOM DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点: a. HTML Collection 在
 

 

  二、代码级优化

  1. Javascript

  (1). DOM

  DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点:

  a. HTML Collection

  在脚本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。

  因此,当你需要遍历HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将length属性、成员保存到局部变量后再使用局部变量。

  b. Reflow & Repaint

  除了上面一点之外,DOM操作还需要考虑浏览器的Reflow和Repaint,因为这些都是需要消耗资源的。

  (2). 慎用with

  with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境,将obj放在了其作用域链的最前端,在with代码块中访问非局部变量是都是先从obj上开始查找,如果没有再依次按作用域链向上查找,因此使用with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的,过长的作用域链会导致查找性能下降。因此,除非你能肯定在with代码中只访问obj中的属性,否则慎用with,替代的可以使用局部变量缓存需要访问的属性。

  (3). 避免使用eval和Function

  每次 eval 或 Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢100倍以上。

  eval函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。

  Function 构造函数比eval略好,因为使用此代码不会影响周围代码;但其速度仍很慢。此外,使用eval和Function也不利于Javascript压缩工具执行压缩。

  (4). 减少作用域链查找

  前文谈到了作用域链查找问题,这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。

 

  1. 低效率的写法:     
  2. //全局变量    
  3. var globalVar = 1;    
  4. function myCallback(info){    
  5. forvar i = 100000; i--;){    
  6. //每次访问globalVar都需要查找到作用域链最顶端,本例中需要访问100000次  globalVar += i;       
  7. }    
  8. }  

 

  1. 更高效的写法:    
  2.  //全局变量    
  3. var globalVar = 1;    
  4. function myCallback(info){      /  
  5. /局部变量缓存全局变量        
  6. var localVar = globalVar;  
  7.       forvar i = 100000; i--;){   
  8.     //访问局部变量是最快的       
  9. localVar += i;        
  10. }     
  11.    //本例中只需要访问2次全局变量     
  12.    globalVar = localVar;    
  13.  }  

  此外,要减少作用域链查找还应该减少闭包的使用。

  (5). 数据访问

  Javascript中的数据访问包括直接量(字符串、正则表达式)、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:

  a. 对任何对象属性的访问超过1次

  b. 对任何数组成员的访问次数超过1次

  另外,还应当尽可能的减少对对象以及数组深度查找。

  (6). 字符串拼接

  在Javascript中使用"+"号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的join方法,即将需要拼接的字符串放在数组中最后调用其join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容