优化javaScript代码,提高执行效率
今天看完书,总结了一下可以如何优化 JavaScript 。
1.合并js文件
为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件。跟十个5k的js文件相比,合并成一个50k的文件更好。虽然代码总字节数没变,却避免了多个HTTP请求造成的开销。每个请求都会在客户端和服务器两边有个建立和消除的过程,导致请求和响应header带来开销,还有服务器端更多的进程和线程资源消耗(可能还有为压缩内容耗费的cpu时间)。除了HTTP请求,并发问题也很重要。默认情况下,在使用持久连接(persistent connections)时,ie和firefox在同一域名内只会同时下载两个资源。这就意味着,在我们等待下载2个js文件的同时,将无法下载图片资源。也就是说,这段时间内用户在页面上看不到图片。
(这个方法有缺点:把所有资源一起打包,将强制用户一次下载完所有资源,造成某些用户不必要的开销)
2、减缓代码下载时间:
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){
- //...
- }
这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下:
- if(!myValue){
- //...
- }
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 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等。
3、合理声明变量
减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。
在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量:
- function First(){
- a = "" ; //直接使用变量
- }
- function Second(){
- alert(a);
- }
- First();
- Second();
这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。
4、使用内置函数缩短编译时间
只要可能、应当尽量使用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>
运行的结果:在IE上使用定义的方法耗时2156ms,使用内置方法为750ms; 在firefox浏览器上,使用定义的方法耗时3625ms,使用内置方法为766ms;
5、合理书写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语句的编写。
6、最小化语句数量
脚本找哦个的语句越少执行的时间就越短、而且代码的体积也会相应减少。例如使用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++;
可优化成:
- var sCar = aCars[i++];
7、节约使用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代码,提高执行效率相关推荐
- 浅谈代码的执行效率(4):汇编优化
终于谈到这个话题了,首先声明我不是汇编优化的高手,甚至于我知道的所有关于汇编优化的内容,仅仅来自于学校的课程.书本及当年做过的一些简单练习.换句话说,我了解的东西只能算是一些原则,甚至也有一些&quo ...
- 优化JavaScript代码
我google一下,已有人翻译了此文.感觉比我翻译的要好!是译言站翻译的 见www.yeeyan.com/articles/view/92135/47626/dz 原文见:http://code.go ...
- 浅谈代码的执行效率(2):编译器的威力
在上一篇文章中,我主要表达了这样一个观点:影响程序效率的关键之一是算法,而算法的选择与优化,和是否多一个赋值少一个判断的关系不大.关于算法的选择,我谈到其理论上的复杂度,并不直接反映出效率.因为在实际 ...
- 浅谈代码的执行效率(2):编译器的威力 [摘自赵劼老师的博客]
在上一篇文章中,我主要表达了这样一个观点:影响程序效率的关键之一是算法,而算法的选择与优化,和是否多一个赋值少一个判断的关系不大.关于算法的选择,我谈到其理论上的复杂度,并不直接反映出效率.因为在实际 ...
- 并行算法 Parallel Algorithm -- 提高执行效率
文章目录 1. 并行排序 2. 并行查找 3. 并行字符串匹配 4. 并行搜索 5. 总结 时间复杂度是衡量算法执行效率的一种标准.但是,时间复杂度 != 性能.即便在不降低时间复杂度的情况下,也可以 ...
- 浅谈代码的执行效率(3):缓存与局部性
在前两篇文章里,我们讨论了程序性能的两个方面,一是算法(广义的算法,即解决问题的方法),二是编译器.通过这两个方面,我想表达的意思是,一段程序的执行效率,是很难从表面现象得出结论的,至少从一些简单的层 ...
- js 延迟几秒执行ifarme_延时加载JavaScript代码提高速度_javascript技巧 -
...值: none 0 e1. 利用animation属性实现循环间的延时执行实例教程简介:先来介绍一下animation定义和用法,animation 属性是一个简写属性,用于设置六个动画属性:2 ...
- 掌握这35 个小细节,助你有效提升 Java 代码的执行效率!
点击蓝色"程序猿DD"关注我 回复"资源"获取独家整理的学习资料! 作者:萌小Q 来源:https://www.cnblogs.com/Qian123/p/60 ...
- 浅谈代码的执行效率(1):算法是关键
前一段时间在博客园里看到这样一篇文章,那位兄弟谈到程序效率的关键是"简短".他说,"程序越简短,其可执行代码就越少,就越有效率",而在编写程序的时候," ...
最新文章
- 深度|2030年8亿人会失业!图解机器人如何取代你的工作
- 调试器定位变量的原理
- 高仿百思不得姐项目开发(粗略笔记,后期规范排版和更新)
- 前端学习(3325):Mdn说闭包
- 南京航空航天大学2020数据结构课设
- java语言设计论文_(C)论文(JAVA语言考试系统的设计与实现)
- (转)RabbitMQ学习之路由(java)
- [FFmpeg] Ubuntu 16.04 安装 FFmpeg
- VSCode 扩展中出现严重漏洞,可导致供应链攻击
- css 下划线_css学习
- Modelbuilder进阶教程
- 定时执行失败原因分析
- [Erlang脚印 0004] gen_server
- C#通过XElement写入XML文件
- Jaunt和Dolby联手,为VR视频带来更带感的全景声场体验
- 14.13. wireless
- python word库_Python|利用第三方库编辑word的基本操作
- 计算机操作系统在线阅读,计算机操作系统 孙雅如.pdf
- 毕业设计记录(二):基于VUE框架与ECharts和Axios技术结合的Web移动高校实验室管理系统设计与实现
- seata(二) 分布式事务框架seata1.3 AT及XA模式实例演示
热门文章
- php向页面中添加数据_PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码...
- Python解密2021年最新富豪榜,马云居然连前三都没进
- mysql用binlog恢复数据_mysql 利用 binlog 恢复数据
- Namomo Test Round 1的B Hat[概率题:详解]
- 计算机及网络应用基础思维导图_思维导图在生物教学中的应用
- php数独游戏开发,使用vue如何开发数独游戏
- php正则判断不规范字符串,php学习_第9章_字符串处理与正则表达式
- 深入jvm虚拟机第4版_深入JVM虚拟机,阿里架构师直言,这份文档真的是JVM最深解读...
- 【数据结构】堆,大根堆,小根堆,优先队列 详解
- 蓝桥杯省赛最短路径-模板