- 浏览: 467393 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (288)
- Java (70)
- Web (11)
- JSP (18)
- JavaScript (25)
- JQuery (22)
- HTML (7)
- CSS (2)
- Struts2.X (6)
- Ibatis/Mybatis (6)
- Hibernate (4)
- Spring (8)
- Oracle (23)
- MySql (9)
- Apache (1)
- Tomcat (9)
- Weblogic (2)
- Maven (6)
- Flex (0)
- Junit (2)
- Test (1)
- SVN (6)
- GIS (3)
- Android (1)
- Eclipse (10)
- Thread (3)
- JVM (1)
- Cache (2)
- Design pattern (1)
- Nosql (3)
- Linux (10)
- Hudson/Jenkins (1)
- MQ (1)
- Network (2)
- 生活工作 (5)
- 架构师之路 (6)
- 知识精华荟萃 (9)
- Interview (13)
最新评论
-
276847139:
方法很有效,我的问题就在是在父项目的.classpa ...
手动添加Maven Dependencies -
coosummer:
推荐使用http://buttoncssgenerator.c ...
button css 样式 -
lqz2012:
DBFFileReader是外部框架里面的吧,不是JDK的。楼 ...
java读取dbf文件 -
xudongcsharp:
lx13345 写道java.lang.NoSuchMetho ...
Spring常用错误 -
lx13345:
jar是hibernate3.3GA,ehcache-1.5. ...
Spring常用错误
javaScript是一门解释性的语言,它不像java、C#等程序设计语言,由编译器先进行编译再运行,而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率。
1、减缓代码下载时间:
Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如:
view plain print ?
function showMeTheMoney(){
if (!money){
return false ;
}else {
...
}
}
可优化成:
view plain print ?
function showMeTheMoney(){ if (!money){ return false ;} else {...}}
这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干!
另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如:
view plain print ?
var bSearch = false ;
for ( var i=0;i<aChoices.length&&!bSearch;i++){
if (aChoices[i] == vValue)
bSearch = true ;
}
替换成:
view plain print ?
var bSearch = 0;
for ( var i=0;i<aChoices.length&&!bSearch;i++){
if (aChoices[i] == vValue)
bSearch = 1 ;
}
替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。
代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如:
view plain print ?
if (myValue != undefined){
//...
}
if (myValue != null ){
//...
}
if (myValue != false ){
//...
}
这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下:
view plain print ?
if (!myValue){
//...
}
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如:
view plain print ?
var myArray = new Array();
var myArray = [];
var myObject = new Object();
var myObject = {};
显然、第二行和第四行的代码较为精简、而且也很容易理解。
另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如:
view plain print ?
function AddThreeVarsTogether(firstVar,secondVar,thirdVar){
return (firstVar+secondVar+thirdVar);
}
可优化成:
view plain print ?
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 plain print ?
function First(){
a = "" ; //直接使用变量
}
function Second(){
alert(a);
}
First();
Second();
这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。
3、使用内置函数缩短编译时间
只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写:
view plain print ?
< 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 plain print ?
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 plain print ?
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 plain print ?
var iNum = 365;
var sColor = "yellow" ;
var aMyNum = [8,7,12,3] ;
var oMyDate = new Date();
上面的多个定义可以用var关键字一次性定义、代码如下:
view plain print ?
var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;
同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码:
view plain print ?
var sCar = aCars[i];
i++;
可优化成:
view plain print ?
var sCar = aCars[i++];
6、节约使用DOM
JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。
view plain print ?
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 plain print ?
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://fangyong2006.iteye.com/blog/1125307
1、减缓代码下载时间:
Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如:
view plain print ?
function showMeTheMoney(){
if (!money){
return false ;
}else {
...
}
}
可优化成:
view plain print ?
function showMeTheMoney(){ if (!money){ return false ;} else {...}}
这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干!
另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如:
view plain print ?
var bSearch = false ;
for ( var i=0;i<aChoices.length&&!bSearch;i++){
if (aChoices[i] == vValue)
bSearch = true ;
}
替换成:
view plain print ?
var bSearch = 0;
for ( var i=0;i<aChoices.length&&!bSearch;i++){
if (aChoices[i] == vValue)
bSearch = 1 ;
}
替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。
代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如:
view plain print ?
if (myValue != undefined){
//...
}
if (myValue != null ){
//...
}
if (myValue != false ){
//...
}
这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下:
view plain print ?
if (!myValue){
//...
}
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如:
view plain print ?
var myArray = new Array();
var myArray = [];
var myObject = new Object();
var myObject = {};
显然、第二行和第四行的代码较为精简、而且也很容易理解。
另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如:
view plain print ?
function AddThreeVarsTogether(firstVar,secondVar,thirdVar){
return (firstVar+secondVar+thirdVar);
}
可优化成:
view plain print ?
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 plain print ?
function First(){
a = "" ; //直接使用变量
}
function Second(){
alert(a);
}
First();
Second();
这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。
3、使用内置函数缩短编译时间
只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写:
view plain print ?
< 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 plain print ?
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 plain print ?
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 plain print ?
var iNum = 365;
var sColor = "yellow" ;
var aMyNum = [8,7,12,3] ;
var oMyDate = new Date();
上面的多个定义可以用var关键字一次性定义、代码如下:
view plain print ?
var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;
同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码:
view plain print ?
var sCar = aCars[i];
i++;
可优化成:
view plain print ?
var sCar = aCars[i++];
6、节约使用DOM
JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。
view plain print ?
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 plain print ?
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://fangyong2006.iteye.com/blog/1125307
发表评论
-
javascript转义字符串(Escape Sequence)处理
2012-12-28 11:05 1542转义字符串(Escape Sequence)也称字符实体( ... -
为什么要进行服务器端验证?
2012-08-30 16:59 1237我们通常在页面提交表单时往往在客服端进行脚本验证,但忽略了服务 ... -
json
2012-07-23 22:15 842http://www.json.org/ tool:http ... -
JavaScript中的setTimeout和setInterval的区别
2012-05-11 12:28 1064setTimeout(表达式,延时时间)在执行时,是在载入后延 ... -
滚动动态加载插件lazyload
2012-04-09 16:01 1700插件官网:http://www.appelsiini.net/ ... -
标签云效果
2012-02-16 16:40 1037<div> <h3>标签云效果 ... -
javascript禁止链接<a>跳转
2011-08-22 15:26 2127有时候需要禁止链接: <a href="ja ... -
包含iframe子页面的父窗口跳转
2011-08-20 16:53 2552可以用javaScript解决 在你想控制跳转的页面,比如lo ... -
Javascript keyCode键盘键码值表
2011-05-30 22:15 1088Javascript keyCode键盘键码值表 keyc ... -
JS常用跳转代码
2011-04-07 12:24 1172第一种: <script language=&q ... -
JS正则表达式特殊字符的过滤
2011-03-16 20:48 4885function doValidate(value) { ... -
文本框默认值 点击清空 鼠标移开恢复默认值 效果
2011-03-16 20:10 1680原文出自:http://hi.baidu.com/chunle ... -
(JS特效)鼠标上滚动字体
2011-03-11 09:57 1014<html> <head> < ... -
select下拉框下拉跳转代码
2011-01-20 15:55 992<select name="dh" ... -
js跳转
2011-01-18 10:18 893<script type='text/javascrip ... -
js改变iframe的url
2011-01-18 10:16 3530function FunUrl(Per){ wind ... -
js动态显示时间
2011-01-18 10:10 2045js代码: function getDate(){ ... -
js实现二级联动
2011-01-18 10:07 1070<html> <head> &l ... -
JS实现checkbox单选
2011-01-18 10:05 1397<html> <BODY> ... -
纵向文字排列
2011-01-18 10:00 1306<!DOCTYPE html PUBLIC " ...
相关推荐
javascript、jquery性能优化
JavaScript优化.docx
JavaScript优化方法
JavaScript优化细节
javascript优化 让你更快的了解JS核心内容
javascript内容第六节 事件流 事件委托 懒加载 预加载
前端 web素材 中级进阶
前端 每日代码 中级进阶
javascript性能优化javascript性能优化
Javascript优化技巧(文件瘦身篇)
主要介绍了JavaScript优化专题中Loading and Execution加载和运行的相关资料,感兴趣的小伙伴们可以参考一下
高性能 JavaScript 优化 [高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.文字版
Javascript 性能优化的一点技巧
主要介绍了Javascript优化技巧之短路表达式详细介绍,本文讲解了什么是短路表达式,并给出了一些示例,需要的朋友可以参考下
JavaScript性能优化的小知识总结共23页.pdf.zip
JavaScript 性能优化的小知识总结
很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的性能。 这篇文章主要介绍了浅谈前端网络、JavaScript优化以及开发小技巧,有兴趣的可以了解一下。
野性病毒 基于出色的主题,针对Vim进行了JavaScript优化的深色主题。
用斐波那契记忆优化法优化递归,提高代码运行效率,这个是JavaScript版