公司新闻当前位置:天恒娱乐 > 公司新闻 > >

天恒娱乐官网:JavaScript 高效运行代码分析

  

[JavaScript,高效]JavaScript 高效运行代码分析

  

作者 Mark 'Tarquin' Wilton-Jones · 2006年11月2日  

  

本文翻译自 Efficient JavaScript  

  

原译文地址   

  

传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能。但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大。而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要。

  

  

对于桌面应用程序,通常使用编译器将源代码转换为二进制程序。编译器可以花费大量时间优化最终二进制程序的效率。Web 应用程序则不同。因为Web应用程序需要运行在不同的浏览器、平台和架构中,不可能事先完全编译。浏览器在获得脚本后要执行解释和编译工作。用户要求不仅要求网页能快速的载入,而且要求最终 Web 应用程序执行的效果要和桌面应用程序的一样流畅。Web 应用程序应能运行在多种设备上,从普通的桌面电脑到手机。

  

  

浏览器并不很擅长此项工作。虽然 Opera 有着当前最快的脚本引擎,但浏览器有不可避免的局限性,这时就需要 Web 开发者的帮助。Web开发者提高 Web 应用程序的性能的方法很多而且也很简单,如只需要将一种循环变成另一种、将组合样式分解成三个或者只添加实际需要的脚本。

  

  

本文从 ECMAScript/JavaScript, DOM, 和页面载入方面分别介绍几种简单的能提高 Web 应用程序性能的方法。

  

  

目录

  

ECMAScript

  
      
  1. 避免使用 evalFunction 构造函数  
        
    1. 重写 eval  
    2. 如果你需要函数,那就用函数
      
  2. 避免使用 with  
  3. 不要在影响性能的关键函数中使用 try-catch-finally  
  4. 分隔 evalwith  
  5. 避免使用全局变量  
  6. 注意隐式对象转换  
  7. 在关键函数中避免 for-in  
  8. 优化 string 合并  
  9. 基本运算符比函数调用更快  
  10. setTimeout()setInterval()传送函数名,而不要传送字符串
  

DOM

  
      
  1. 重绘和 reflow  
        
    1. 减少 reflow 次数  
    2. 最小化 reflow 影响
      
  2. 修改 DOM 树  
  3. 修改不可见元素  
  4. 测量大小  
  5. 一次修改多个样式值  
  6. 用流畅性换取速度  
  7. 避免搜索大量节点  
  8. 使用 XPath 提高速度  
  9. 避免在遍历 DOM 时修改 DOM  
  10. 使用变量保存 DOM 值
  

页面载入

  
      
  1. 避免保存来自其他文档的引用  
  2. 快速历史浏览  
  3. 使用 XMLHttpRequest  
  4. 动态创建 SCRIPT 元素  
  5. location.replace() 控制历史项
  

ECMAScript

  

避免使用 evalFunction 构造函数

  

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

  

  

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

  

  

Function 构造函数比 eval 略好,因为使用此代码不会影响周围代码;但其速度仍很慢。

  

  

重写 eval

  

eval 不仅效率低下,而且绝大部分情况下完全没有使用的必要。很多情况下使用 eval 是因为信息以字符串形式提供,开发者误认为只有 eval 能使用此信息。下例是一个典型的错误:  

代码如下:
function getProperty(oString) { var oReference; eval('oReference = test.prop.'+oString); return oReference; }
  

下面的代码执行完全相同的函数,但没有使用 eval:  

代码如下:
function getProperty(oString) { return test.prop[oString]; }
  

在 Opera 9, Firefox, 和 Internet Explorer 中后者比前者快95%,在 Safari 中快85%。(注意此比较中不含函数本身调用时间。)   (责任编辑:admin)

上一篇:js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰

下一篇:没有了

推荐内容