`
123003473
  • 浏览: 1061402 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

javaScript——优化[转载]

 
阅读更多
javaScript是一门解释性的语言、它不像java、C#等程序设计语言、由编译器先进行编译再运行、而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率。

        1、减缓代码下载时间：

        Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如： 

01.function showMeTheMoney(){  
02.        if(!money){  
03.                return false;  
04.        }else{  
05.                ...  
06.        }  
07.}

可优化成： 
view plaincopy to clipboardprint?
01.function showMeTheMoney(){if(!money){return false;}else{...}}


这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干！

        另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如： 


view plaincopy to clipboardprint?
01.var bSearch = false;  
02.        for(var i=0;i<aChoices.length&&!bSearch;i++){  
03.            if(aChoices[i] == vValue)  
04.                bSearch = true ;  
05.        }  
var bSearch = false;
		for(var i=0;i<aChoices.length&&!bSearch;i++){
			if(aChoices[i] == vValue)
				bSearch = true ;
		}

替换成： 


view plaincopy to clipboardprint?
01.var bSearch = 0;  
02.        for(var i=0;i<aChoices.length&&!bSearch;i++){  
03.            if(aChoices[i] == vValue)  
04.                bSearch = 1 ;  
05.        }  
var bSearch = 0;
		for(var i=0;i<aChoices.length&&!bSearch;i++){
			if(aChoices[i] == vValue)
				bSearch = 1 ;
		}

        替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。

        代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如： 


view plaincopy to clipboardprint?
01.if(myValue != undefined){  
02.            //...   
03.        }  
04.          
05.        if(myValue !=null){  
06.            //...   
07.        }  
08.          
09.        if(myValue != false){  
10.            //...   
11.        }  
if(myValue != undefined){
			//...
		}
		
		if(myValue !=null){
			//...
		}
		
		if(myValue != false){
			//...
		}
     
  这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下： 


view plaincopy to clipboardprint?
01.if(!myValue){  
02.            //...   
03.        }  
if(!myValue){
			//...
		}
      
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如： 


view plaincopy to clipboardprint?
01.var myArray = new Array();  
02.        var myArray = [];  
03.        var myObject = new Object();  
04.        var myObject = {};  
var myArray = new Array();
		var myArray = [];
		var myObject = new Object();
		var myObject = {};
    
   显然、第二行和第四行的代码较为精简、而且也很容易理解。

        另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如： 


view plaincopy to clipboardprint?
01.function AddThreeVarsTogether(firstVar,secondVar,thirdVar){  
02.            return (firstVar+secondVar+thirdVar);  
03.        }  
function AddThreeVarsTogether(firstVar,secondVar,thirdVar){
			return (firstVar+secondVar+thirdVar);
		}

可优化成： 


view plaincopy to clipboardprint?
01.function A(a,b,c){return (a+b+c);}  
function A(a,b,c){return (a+b+c);}

        注意：在进行变量名称替换时、必须十分小心、尤其不推荐使用文本编辑器的"查找"、"替换"功能、因为编辑器不能很好地区分变量名称或者其他代码。例如、希望将变量"tion"全部替换成"io"、很可能导致关键字"function"也被破坏。

        对于上面说的这些减少代码体积的方法、有一些很实用的小工具可以自动完成类似的工作、例如ECMAScript Cruncher、JSMin、Online JavaScript Compressor等。

        2、合理声明变量

        减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。

        在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量： 


view plaincopy to clipboardprint?
01.function First(){  
02.            a = "" ;   //直接使用变量   
03.        }  
04.        function Second(){  
05.            alert(a);  
06.        }  
07.        First();  
08.        Second();  
function First(){
			a = "" ;   //直接使用变量
		}
		function Second(){
			alert(a);
		}
		First();
		Second();
  
     这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。

       


        3、使用内置函数缩短编译时间

        只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写： 


view plaincopy to clipboardprint?
01.<html>  
02.  <head>  
03.    <base href="<%=basePath%>">  
04.    <title>内置函数</title>  
05.    <meta http-equiv="pragma" content="no-cache">  
06.    <meta http-equiv="cache-control" content="no-cache">  
07.    <meta http-equiv="expires" content="0">      
08.    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
09.    <meta http-equiv="description" content="This is my page">  
10.    <script type="text/javascript">  
11.        function myPower(iNum,n){  
12.            var iResult = iNum ;  
13.            for(var i=0;i<n;i++)  
14.                iResult *= iNum ;  
15.            return iResult;  
16.        }  
17.        var myDate1 = new Date();  
18.        for(var i=0;i<150000;i++){  
19.            myPower(7,8);  //自定义方法  
20.        }  
21.        var myDate2 = new Date();  
22.        document.write(myDate2 - myDate1);  
23.        document.write("<br/>");  
24.        myDate1 = new Date();  
25.        for(var i=0;i<150000;i++){  
26.            Math.pow(7,8);  //采用系统内置方法  
27.        }  
28.        myDate2 = new Date();  
29.        document.write(myDate2 - myDate1);  
30.    </script>  
31.  </head>  
32.  <body>  
33.  </body>  
34.</html>  
<html>
  <head>
    <base href="<%=basePath%>">
    <title>内置函数</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">
		function myPower(iNum,n){
			var iResult = iNum ;
			for(var i=0;i<n;i++)
				iResult *= iNum ;
			return iResult;
		}
		var myDate1 = new Date();
		for(var i=0;i<150000;i++){
			myPower(7,8);  //自定义方法
		}
		var myDate2 = new Date();
		document.write(myDate2 - myDate1);
		document.write("<br/>");
		myDate1 = new Date();
		for(var i=0;i<150000;i++){
			Math.pow(7,8);  //采用系统内置方法
		}
		myDate2 = new Date();
		document.write(myDate2 - myDate1);
	</script>
  </head>
  <body>
  </body>
</html>
    
   我运行的结果是、自定义方法用了15、内置方法用了1(不同的计算机运行速度会有差别)、这样就能看出、系统内置的方法要快很多。

       


        4、合理书写if语句。

        if语句恐怕是所有代码中使用最频繁的、然而很可惜的是它的执行效率并不是很高。在用if语句和多个else语句时、一定要把最有可能的情况放在第一个、然后是可能性第二的、依此类推。例如预计某个数值在0~100之间出现的概率最大、则可以这样安排代码： 


view plaincopy to clipboardprint?
01.if(iNum>0&&iNum <100){  
02.            alert("在0和100之间");  
03.        }else if(iNum>99&&iNum<200){  
04.            alert("在100和200之间");  
05.        }else if(iNum>199&&iNum<300){  
06.            alert("在200和300之间");  
07.        }else{  
08.            alert("小于等于0或者大于等于300");  
09.        }  
if(iNum>0&&iNum <100){
			alert("在0和100之间");
		}else if(iNum>99&&iNum<200){
			alert("在100和200之间");
		}else if(iNum>199&&iNum<300){
			alert("在200和300之间");
		}else{
			alert("小于等于0或者大于等于300");
		}
 
      总是将出现概率最多的情况放在前面、这样就减少了进行多次测试后才能遇到正确条件的情况。当然也要尽可能减少使用else if 语句、例如上面的代码还可以进一步优化成如下代码： 


view plaincopy to clipboardprint?
01.if(iNum>0){  
02.            if(iNum<100){  
03.                alert("在0和100之间");  
04.            }else{  
05.                if(iNum<200){  
06.                    alert("在100和200之间");  
07.                }else{  
08.                    if(iNum<300){  
09.                        alert("在200和300之间");  
10.                    }else{  
11.                        alert("大于等于300");  
12.                    }  
13.                }  
14.            }  
15.        }else{  
16.            alert("小于等于0");  
17.        }  
if(iNum>0){
			if(iNum<100){
				alert("在0和100之间");
			}else{
				if(iNum<200){
					alert("在100和200之间");
				}else{
					if(iNum<300){
						alert("在200和300之间");
					}else{
						alert("大于等于300");
					}
				}
			}
		}else{
			alert("小于等于0");
		}
    
   上面的代码看起来比较复杂、但因为考虑了很多代码潜在的判断问题、执行问题、因此执行速度要较前面的代码快。

        另外、通常当超过两种情况时、最好能够使用switch语句。经常用switch语句代替if语句、可令执行速度快甚至10倍。另外、由于case语句可以使用任何类型、也大大方便switch语句的编写。




        5、最小化语句数量

        脚本找哦个的语句越少执行的时间就越短、而且代码的体积也会相应减少。例如使用var定义变量时可以一次定义多个、代码如下： 


view plaincopy to clipboardprint?
01.var iNum = 365;  
02.        var sColor = "yellow";  
03.        var aMyNum = [8,7,12,3] ;  
04.        var oMyDate = new Date();  
var iNum = 365;
		var sColor = "yellow";
		var aMyNum = [8,7,12,3] ;
		var oMyDate = new Date();

       上面的多个定义可以用var关键字一次性定义、代码如下： 


view plaincopy to clipboardprint?
01.var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;  
var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;
      
同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码： 


view plaincopy to clipboardprint?
01.var sCar = aCars[i];  
02.        i++;  
var sCar = aCars[i];
		i++;
     
  可优化成： 


view plaincopy to clipboardprint?
01.var sCar = aCars[i++];  
var sCar = aCars[i++];
       


        6、节约使用DOM

        JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。 


view plaincopy to clipboardprint?
01.var oUl = document.getElementById("ulItem");  
02.        for(var i=0;i<10;i++){  
03.            var oLi = document.createElement("li");  
04.            oUl.appendChild(oLi);  
05.            oLi.appendChild(document.createTextNode("Item "+i));  
06.        }  
var oUl = document.getElementById("ulItem");
		for(var i=0;i<10;i++){
			var oLi = document.createElement("li");
			oUl.appendChild(oLi);
			oLi.appendChild(document.createTextNode("Item "+i));
		}
     
   以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。

        通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment()、代码如下： 


view plaincopy to clipboardprint?
01.var oUl = document.getElementById("ulItem");  
02.        var oTemp = document.createDocumentFragment();  
03.        for(var i=0;i<10;i++){  
04.            var oLi = document.createElement("li");  
05.            oLi.appendChild(document.createTextNode("Item "+i));  
06.            oTemp.appendChild(oLi);  
07.        }  
08.        oUl.appendChild(oTemp);  
var oUl = document.getElementById("ulItem");
		var oTemp = document.createDocumentFragment();
		for(var i=0;i<10;i++){
			var oLi = document.createElement("li");
			oLi.appendChild(document.createTextNode("Item "+i));
			oTemp.appendChild(oLi);
		}
		oUl.appendChild(oTemp);

[转载]http://blog.csdn.net/hzw2312/article/details/6596965
分享到：
| JavaScript中isNaN函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    初识JavaScript———（1）！！！.md

    初识JavaScript———（1）！！！.md

    精通JavaScript ——动态网页(实例版)详尽实例

    本书“精通JavaScript ——动态网页(实例版)”旨在通过详尽的实例帮助读者深入理解和熟练掌握JavaScript的核心概念和应用。 首先，我们从基础开始，JavaScript是一种解释型、面向对象的弱类型脚本语言。它的灵活性...

    JavaScript——学习笔记

    JavaScript基础

    JavaScript——DOM

    JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。DOM允许开发者通过JavaScript或...

    走进javascript——不起眼的基础，值和分号

    JavaScript是一种广泛应用于网页开发的编程语言，其基础语法中的变量值和分号使用是编写有效JavaScript代码的基础。了解这些基础知识对于编写可读性强、运行稳定的JavaScript代码至关重要。 首先，理解JavaScript中...

    JavaScript例子——计算

    在这个"JavaScript例子——计算"中，我们可能会看到如何利用JavaScript进行各种计算操作。博客链接指向了作者fuhao9611在iteye上的一个博客条目，尽管具体内容无法直接复制到这里，但我们可以基于常见的JavaScript...

    利用JavaScript实现图片标注——SearchMapIdentityTask

    8. **性能优化**：对于大型地图，处理大量标注时需要注意性能问题。可能需要使用分块加载、懒加载或空间索引等策略。 9. **源码分析**：既然提到“源码”，意味着我们可能需要阅读和理解`SearchMapIdentityTask`的...

    JavaScript网页开发——体验式学习教程.pdf

    这份"JavaScript网页开发——体验式学习教程.pdf"提供了一个深入理解JavaScript语法和实践的平台，帮助初学者和有一定基础的开发者提升技能。 教程首先会介绍JavaScript的基础知识，包括变量、数据类型（如字符串、...

    学习资源——JavaScript

    在标题“学习资源——JavaScript”与描述“点点滴滴，记录JavaScript的开头引用的应用”中，我们可以理解到这份文档旨在分享JavaScript的一些基本应用实例，特别是关于如何引入（import）或链接(link)外部资源。...

    JavaScript凌厉开发——Ext详解与实践_源码清单

    JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单

    浅谈JavaScript 库———jQuery, ExtJs 的对比研究

    ### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA（Rich Internet Applications）技术的普及，JavaScript作为一种前端开发的重要工具，逐渐占据了重要的地位。它不再仅仅是用于...

    javaScript全面分析——中文版

    JavaScript全面分析——中文版是为想要快速理解和掌握JavaScript编程语言的学者精心编写的教程。JavaScript是一种广泛应用于Web开发的脚本语言，它在浏览器端运行，为网页添加交互性，使得用户界面更加生动活泼。本...

    众妙之门——JavaScript与jQuery技术精粹

    《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine，其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分，第一部分阐述JavaScript的实战经验，共7章，内容涉及...

    JavaScript实战手册——第七版代码

    《JavaScript实战手册——第七版代码》是一本专为JavaScript开发者准备的实践指南，它涵盖了从基础到高级的各种JavaScript编程技术。这本书的代码示例旨在帮助读者深入理解语言机制，并提升在实际项目中的应用能力。...

    javascript实战——01（ 图灵系列）

    javascript实战 图灵系列 分成四个压缩包，用好压解压，这是第一个

    《javascript》——event对象与事件

    《JavaScript》——Event 对象与事件 Event 对象是 JavaScript 中的一个基本概念，它代表了用户与 Web 页面的交互行为，例如点击、鼠标移动、键盘输入等。Event 对象的属性和方法可以帮助开发者更好地处理用户的...

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...

    javascript实战——2 图灵系列

    javascript实战 图灵系列 这是第二卷

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...

    react pro——————————

    react pro——————————

Magicbox
Global site tag (gtag.js) - Google Analytics