javaScript是一门解释性的语言、它不像java、C#等程序设计语言、由编译器先进行编译再运行、而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率。
1、减缓代码下载时间:
Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如:
-
function
showMeTheMoney(){
-
if
(!money){
-
return
false
;
-
}else
{
-
...
-
}
-
}
可优化成:
-
function
showMeTheMoney(){
if
(!money){
return
false
;}
else
{...}}
这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干!
另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如:
-
var
bSearch =
false
;
-
for
(
var
i=0;i<aChoices.length&&!bSearch;i++){
-
if
(aChoices[i] == vValue)
-
bSearch = true
;
-
}
替换成:
-
var
bSearch = 0;
-
for
(
var
i=0;i<aChoices.length&&!bSearch;i++){
-
if
(aChoices[i] == vValue)
-
bSearch = 1 ;
-
}
替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。
代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如:
-
if
(myValue != undefined){
-
-
}
-
-
if
(myValue !=
null
){
-
-
}
-
-
if
(myValue !=
false
){
-
-
}
这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下:
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如:
-
var
myArray =
new
Array();
-
var
myArray = [];
-
var
myObject =
new
Object();
-
var
myObject = {};
显然、第二行和第四行的代码较为精简、而且也很容易理解。
另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如:
-
function
AddThreeVarsTogether(firstVar,secondVar,thirdVar){
-
return
(firstVar+secondVar+thirdVar);
-
}
可优化成:
-
function
A(a,b,c){
return
(a+b+c);}
注意:在进行变量名称替换时、必须十分小心、尤其不推荐使用文本编辑器的"查找"、"替换"功能、因为编辑器不能很好地区分变量名称或者其他代码。例如、希望将变量"tion"全部替换成"io"、很可能导致关键字"function"也被破坏。
对于上面说的这些减少代码体积的方法、有一些很实用的小工具可以自动完成类似的工作、例如ECMAScript Cruncher、JSMin、Online JavaScript Compressor等。
2、合理声明变量
减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。
在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量:
-
function
First(){
-
a = ""
;
-
}
-
function
Second(){
-
alert(a);
-
}
-
First();
-
Second();
这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。
3、使用内置函数缩短编译时间
只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写:
-
<
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之间出现的概率最大、则可以这样安排代码:
-
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 语句、例如上面的代码还可以进一步优化成如下代码:
-
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定义变量时可以一次定义多个、代码如下:
-
var
iNum = 365;
-
var
sColor =
"yellow"
;
-
var
aMyNum = [8,7,12,3] ;
-
var
oMyDate =
new
Date();
上面的多个定义可以用var关键字一次性定义、代码如下:
-
var
iNum = 365, sColor =
"yellow"
, aMyNum = [8,7,12,3],oMyDate =
new
Date() ;
同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码:
-
var
sCar = aCars[i];
-
i++;
可优化成:
6、节约使用DOM
JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。
-
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()、代码如下:
-
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);
分享到:
相关推荐
第三篇讲解的是Javascript的高级技术,主要讲解了Javascript与XML技术、正 则表达式、Ajax基础、Ajax高级应用、Javascript与插件和Javascript的调试与优化等。最后一篇综合案例篇用一个完整的例子讲解了如何使用...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
用 JS 编写的粒子群优化库。适用于RequireJS,来自WebWorker,在node.js或普通浏览器环境中。...walk-critter优化“行走”的小动物——异步目标函数的另一个例子 更多详情、使用方法,请下载后阅读README.md文件
精通JavaScript(中文清晰优化版)(PDF) 讲述了现代JavaScript的所有知识,展现了这门技术将能给网站建设带来如何丰富的体验。《精通JavaScript》言简意赅,扩展了读者视野,并关注于基础且重要的主题——现代...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
针对JavaScript性能的优化。 ———— 推荐。
第2版结合JavaScript和jQuery最新技术,对全书内容进行了更新和优化,使之在技术上更先进,也更易于学习。本书的最大特色就是内容系统且全面:从JavaScript的基本概念,到Web最流行的JavaScript库——jQuery,再到...
1.优化了图片加载机制——CPU效率提升30%以上; 2.优化了JS对象和DOM对象,用完立即回收; 3.优化了程序结构,播放和部分放大对处理器的要求降低了15%左右; 4.优化了界面美观(限于美工有限,汗一个,O(∩_∩)O~)...
在javascript中,typeof 和 instanceof 是用来判断数据类型比较通用的两个方法,这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案。 typeof ——————————————————————...
Collie 是一个 JavaScript 库,用于创建高度优化的 HTML5 动画和游戏。Collie 可以运行在 PC 和手机上,使用 HTML5 Canvas 和 DOM。Collie 能够多线程稳定的处理多个对象,支持很多实用的功能,包括精灵动画和用户...
——Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会...
在本书中,作者给出了14条具体的优化...第10章规则10——精简JavaScript 第11章规则11——避免重定向 第12章规则12——移出重复脚本 第13章规则13——配置ETag 第14章规则14——使AJAX可缓存 第15章析构十大网站 索引
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
PDF优化 ——优化PDF文档,缩小文件大小。 批量创建PDF文件 ——您可以从多文件创建PDF文件,也可以从扫描仪中直接创建PDF文件。 PDF审阅 ——在现有PDF文件中插入注释、高亮、图章等。 设置文档属性信息 ——便于...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
• JavaScript——你将获得忠告:理解Ajax性能、编写高效的JavaScript、创建快速响应的应用程序、无阻塞加载脚本等。 • 网络——你将学到:跨域共享资源、无损压缩图片大小,以及使用块编码加快网页渲染。 •...
JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第...
项目介绍 ... @nuxt/image —— 图片加载优化 @tailwindcss/typography —— 排版优化 @tailwindcss/aspect-ratio —— 图片排版优化 markdown-it/hightlight.js —— markdown 解析,代码高亮