JavaScript代码优化(下载时间和执行速度优化)

JavaScript代码的速度被分红两部分:下载时间和执行速度。javascript

下载时间 

Web浏览器下载的是js源码,所以全部长变量名和注释都回包含在内。这个因素会增长下载时间。1160是一个TCP-IP包中的字节数。最好能将每一个javascript文件都保持在1160字节如下以得到最优的下载时间。 
   因为这个缘由,要删除注释、删除制表符和空格、删除全部的换行、将长变量名缩短。 
遵循这4条比较困难。所以用外部程序(ECMAScript Cruncher)来帮助咱们。
java

要运行ESC,必使用Windows系统,打开一个控制台窗口,而后使用如下格式的命令:json

cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile1.js [inputfile2.js]数组

 第一部分,cscript,是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序自己。而后是压缩级别,一个0到4的数值。-ow选项表示下一个参数是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件,能够有多个文件(多个文件在优化后后会按顺序放到输出文件中)。浏览器

0 —— 不改变脚本,要将多个文件拿到单个文件中时用用。函数

1 —— 删除全部的注释。性能

2 —— 除等级1外,再删除额外的制表符和空格。优化

3 —— 除等级2外,再删除换行。 spa

4 —— 除等级3外,再进行变量名替换。.net

ESC擅长把变量名替换成无心义的名称,它还具备必定的智能,进行私有对象先进性和方法名的替换(由名称先后加上两个下划线表示),因此私有特性和方法依然保持其私有性。

ESC不会更改构造函数名、公用属性和公用方法名,因此无需担忧。但要注意的是若是某个JavaScript引用了另外一个文件中的构造函数,4级优化会把对构造函数的引用替换成无心义的名称。解决方法是将两个文件合成一个文件,这样就会保持构造函数的名称。

  其余减小字节数的方法还有几个。 

     1.由于在javascript语言中 true等于1,false等于0。所以,脚本包含的字面变量true均可以用1来替换,而false能够用0来替换。 
例如:
 

Js代码   收藏代码
  1. var bFound = false;  
  2. for (var i = 0; i < aTest.length && !bFound; i++) {  
  3.     if (aTest[i] == vTest) {  
  4.         bFounde = true;  
  5.     }  
  6. }  
  7. var bFound = 0;  
  8. for (var i = 0; i < aTest.length && !bFound; i++) {  
  9.     if (aTest[i] == vTest) {  
  10.         bFounde = 1;  
  11.     }  
  12. }  

 这两段代码运行方式彻底相同,然后者节省了7个字节。 
       2.缩短否认检测 
       代码中经常会出现检测某个值是否知足条件。而大部分做的判断某个变量是否为undefined 、null 、false。能够用逻辑非来简化判断。例如

Js代码   收藏代码
  1. if (oTest != undefined) {  
  2.   //do someting  
  3. }  
  4. if (oTest != null) {  
  5.  //do someting   
  6. }  
  7. if (oTest != false) {  
  8.   //do someting   
  9. }   
Js代码   收藏代码
  1.   

以上代码能够替换成

Js代码   收藏代码
  1. if (!oTest) {   
  2. //do something   
  3. }   

为何能够替换呢?由于逻辑非操做在遇到undefined 、null 、false时返回true这样作能够节省不少字节。 
        3.定义数组、对象时候的技巧 

Js代码   收藏代码
  1. var oTest = new Array;  
  2. var oTest = [];  
Js代码   收藏代码
  1. var oTest = new Object;  
  2. var oTest = {};  

 是等价的

执行时间

    咱们能够作一些简单的事情提升javascript性能。我以为也是编写javascript的一些技巧。 
        1.关注范围 
        书中的范围我理解为做用域。 
        在javascript中默认的范围是window。在window范围中建立的变量旨在页面从浏览器卸载后才会销毁。在函数中建立的变量只在函数中的范围内有效。函数执行后就销毁。在引用变量时,javascript解释程序在最近的范围内查找,若是没有救灾上一层次中查找。直到window范围。若是window中也找不到。则出现错误。本地范围内的变量比全局变量执行起来要更快。 
提升javascript执行速度能够有下面几种方法 
          A.使用局部变量。 
          在函数中老是用var来定义变量。若是直接使用变量而不在函数中定义,则变量会建立在window范围内。也就是说执行函数遇到该变量时,javascirpt程序就会按层次到最上层才会查找到该变量。 
不要这样: 

Js代码   收藏代码
  1. function xxx() {  
  2.     name = "abc";  
  3.     alert(name);  
  4. }  

               B. 避免with语句 
             范围越小执行速度越快。

Js代码   收藏代码
  1. alert(document.title);  
  2. alert(document.body.tagName);  
  3. alert(document.location);  

 

 


能够替换成

Js代码   收藏代码
  1. with (document) {  
  2.     alert(title);  
  3.     alert(body.tagName);  
  4.     alert(location);  
  5. }    

这的确缩短了程序的长度,可是减小代码不能弥补损失的性能。为何呢? 
由于:使用with语句时要强制解释程序不只要在范围内查找局部变量。还强制检测每一个变量及指定的对象,看其是否为特性。由于也能够在函数中定义变量title或者location。 

           2.Javascript陷阱 

            A. 避免多字符串用+号链接 
            多字符串链接最好用StringBuffer对象。该对象封装了Array用join()方法进行链接字符串。 
            B.优先使用内置方法 
Js提供了至关丰富的内置方法能够充分利用 
            C.存储经常使用的值 
屡次使用同一个值时,能够将其存储在局部变量中提升访问速度。
 

          3.减小语句数量 
          例如:

 Js代码  收藏代码

  1. var iFive = 5;  
  2. var sColor = "blue";   

能够替换成

Js代码   收藏代码
  1. var iFive = 5, sColor = "blue";   
  2. //另外  
  3. var sName = aValues[i];  
  4. i++;   
  5. //能够替换成   
  6. var sName = aValues[i++];  

另外能够用json来代替对象定义。

           4.节约使用DOM 

           DOM处理算是javascript中最耗时的操做之一。解决这个问题的方法是尽量避免对DOM文档中的元素直接进行DOM操做。 这里要学会使用文档碎片对象即document.createDocumentFragment()。 

相关文章
相关标签/搜索