JavaScript代码最好的写法

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

Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内。这个因素会增加下载时间。1160是一个TCP-IP包中的字节数。最好能将每个javascript文件都保持在1160字节以下以获得最优的下载时间。

由于这个原因,要删除注释、删除制表符和空格、删除所有的换行、将长变量名缩短。 遵循这4条比较困难。因此用外部程序(ECMAScript Cruncher)来帮助我们。

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

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外,再删除换行。

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

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

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

====================================

其他减少字节数的方法还有几个。      1.因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。 例如:

var bFound = false; for (var i = 0; i < aTest.length && !bFound; i++) { if (aTest[i] == vTest) {   bFounde = true; } }

var bFound = 0; for (var i = 0; i < aTest.length && !bFound; i++) { if (aTest[i] == vTest) {   bFounde = 1; } }

2.缩短否定检测

if (oTest != undefined) {   //do someting } if (oTest != null) { //do someting } if (oTest != false) {   //do someting }

可以替换成

if (!oTest) { //do something }

3.减少语句数量 var iFive = 5; var sColor = "blue";

可以为

var iFive = 5, sColor = "blue";

var sName = aValues[i]; i++; //可以替换成 var sName = aValues[i++];

◆字符串的使用

在IE6和IE7中因字符串级联导致的主要问题是垃圾回收性能,虽然这些问题在IE8中已经得到解决,但如果你的用户大部分仍然在使用IE或IE7,你就得格外注意这个问题了。看一个例子先:

var veryLongMessage = "This is a long string that due to our strict line length limit of" + maxCharsPerLine + " characters per line must be wrapped. " + percentWhoDislike + "% of engineers dislike this rule. The line length limit is for " + " style purposes, but we don't want it to have a performance impact." + " So the question is how should we do the wrapping?";

可以使用连接代替级联:

var veryLongMessage = ["This is a long string that due to our strict line length limit of", maxCharsPerLine, " characters per line must be wrapped. ", percentWhoDislike, "% of engineers dislike this rule. The line length limit is for ", " style purposes, but we don't want it to have a performance impact.", " So the question is how should we do the wrapping?"].join();

◆与此类似,在条件语句中使用级别也是很低效的,错误的做法:

var fibonacciStr = "First 20 Fibonacci Numbers "; for (var i = 0; i < 20; i++) { fibonacciStr += i + " = " + fibonacci(i) + " "; }

最好的方法是:

var strBuilder = ["First 20 fibonacci numbers:"]; for (var i = 0; i < 20; i++) { strBuilder.push(i, " = ", fibonacci(i)," "); } var fibonacciStr = strBuilder.join("");

◆定义类函数

下面的函数是低效的,因为每次构造baz.Bar的实例时,会创建一个新的函数和闭包:

baz.Bar = function () {

// constructor body this.foo = function () {

// method body }; };

正确的方法是:

baz.Bar = function () {

// constructor body this.foo = function () {

// method body }; }; baz.Bar = function () {

// constructor body }; baz.Bar.prototype.foo = function () {

// method body };

使用这个方法时,无论baz.Bar构造了多少个实例,都只会为foo创建一个函数,而且不会创建闭包。

◆初始化实例变量

使用实例变量值类型初始值初始化实例变量声明,如数值、布尔值、空值、未定义或字符串,这样可以避免每次调用构造器时运行不必要的初始化代码。还是来看一个例子:

foo.Bar = function () { this.prop1_ = 4; this.prop2_ = true; this.prop3_ = []; this.prop4_ = "blah"; };

可以代替为:

foo.Bar = function () { this.prop3_ = []; }; foo.Bar.prototype.prop1_ = 4; foo.Bar.prototype.prop2_ = true; foo.Bar.prototype.prop4_ = "blah";

◆避免使用with

避免在代码中使用with,它会影响到性能,因为它修改了范围链,因此需要花费更多时间到其它范围去查找。

◆尽可能避免使用全局变量和函数. 全局的变量和函数其实等价于 window 对象的属性/方法, 访问速度自然会慢.

var myvar = 0; // 336ms window.myvar = 0; // 2383ms

var myfunc = function(){} // 3515ms window.myfunc = function(){} // 10151ms

◆尽量避免用 new 操作符创建函数. 可能通过 new 创建的函数还需要额外地对函数内容字符串进行解析操作.

function f(){}; // 277ms var f  = function(){} // 3085ms var f = new Function("") // 13275ms

◆尽量避免使用 eval() 执行代码. 原因同 new 创建函数的操作.

var myfunc = function(){} // 3408ms eval("var myfunc = function(){}"); // 9140ms

◆少使用 new 操作符创建数组. 原因同 new 创建函数的操作. 特别在有大量数据时更为明显

a = [1, 2, 3]; // 4360ms a = new Array(1, 2, 3); // 5000ms

◆尽量避免使用 push() 和 pop() 处理数组数据.

a[i] = value; // 1270ms a.push(value); // 3240ms

◆使用对象代替数组存储数据对性能略有影响. 也许是因为 Javascript 的数组是个带有扩展方法和属性的对象, 而不像 VBScript 那样是单纯的数据结构.

a[i] = value; // 1270ms obj[property] = value; // 960ms

◆使用 ++ 代替 x = x+1 和 +=. 事实上 ++ 并不比 + 和 += 快很多, 但是在大量的操作时就会体现出其优势. 而 + 和 += 几乎没有性能差别. 同理对 -- 和 - 以及 -= 适用.

x++; // 378ms x = x+1; // 406ms x += 1; // 406ms

◆使用局部变量缓存对象属性和函数指针 例如在遍历数组时缓存数组长度, 事实上获取 Javascript 的数组长度等于调用一个方法函数(大部分Javascript 引擎是这样实现的). 如果对 HTML DOM 进行操作, 那么优化的效果会非常明显.

for(var i=0;i<arr.length;i++){ ... } // 162ms

var length = arr.length; for(var i=0;i<length;i++){ ... } // 156ms

或者使用局部变量缓存一个外部函数(具体效果视代码复杂度而定). 如果代码块中要多次调用一个外部函数或变量, 那么缓存的效果会非常明显.

function test(){ ... } function run1(){  test(); } function run2(){  var t = test;  t(); }
run1(); // 98ms run2(); // 80ms

转自:http://jiangzhengjun.javaeye.com/

转载于:https://www.cnblogs.com/Garden-blog/archive/2011/12/14/2287834.html

js的最好写法(转)相关推荐

  1. js的规范写法ES5(自己以后按照这样写)

    1.引号的使用,单引号' ' 优先(如果不是引号嵌套,不要使用双引号) 正常情况:console.log('hello there')        双引号转码: $("<div cl ...

  2. mysql语句在node.js中的写法

    总结一下mysql语句在node.js中的各种写法,参考了npm网站mysql模块给的实例. 查询 select //1 db.query('select * from tuanshang_users ...

  3. js原生ajax写法

    博主在大二做数据库课设时,接触的js. 边学边做,当时还没接触ajax,所以在遇到每次请求地址都会刷新这个问题时, 博主干了你们绝对想不到的事:在页面里用了很多"隐形"的frame ...

  4. 某网站JS的变态写法/诺禾

    工作中需要查看一些网站的JS语句,打心眼里对这种语法充满了鄙夷,优雅跟它没关系,一些烂写法很难读懂,简直就是反人类,太变态了. 下面举个小例子,因为篇幅原因,就复制了一小段,看看你能看懂多少? (wi ...

  5. react styled-components插件完成独立组件css样式(js重构css写法)

    1.安装cnpm install styled-components --save2.创建js文件,写全局样式import {createGlobalStyle} from 'styled-compo ...

  6. 一段js面向对象的写法

    paper.js 文件中的内容 var PaperListPage = {}; PaperListPage.TimeOutID = null; PaperListPage.REPORTTYPE = 2 ...

  7. JavaScript(JS)的习惯写法总结

    //取整 parseInt(a,10); //Before Math.floor(a); //Before a>>0; //Before ~~a; //After a|0; //After ...

  8. js日期格式化写法及获取当前日期年月日、上一月

    1. 获取日期年月日 var date = new Date();//中国标准时间var year = date.getFullYear();//获取完整的年份(4位)var month = date ...

  9. html特殊字符的html,js,css写法汇总

    http://www.cnblogs.com/starof/p/4718550.html

最新文章

  1. C#委托(匿名函数)的各种变形写法
  2. Git 忽略一些文件不加入版本控制
  3. ifelse语句是否必须以else结尾?
  4. div置于页面底部_网易内部PPT模板有点丑,如何花最少的时间提高页面颜值?
  5. WPF XAML 为项目设置全局样式
  6. java linkedlist实例_Java Linkedlist原理及实例详解
  7. 【转】如何从SharePoint Content DB中查询List数据***
  8. 老款诺基亚java都市恋爱养成,被“10年前的手机”刷屏了?都是青春和故事啊
  9. git多项目管理模式_Git十年,一项开放商业模式倡议以及更多新闻
  10. WPF中嵌套charts图表查询数据
  11. 一文详解 Java 的几把 JVM 级锁
  12. chinese-ocr自然场景下不定长文字识别(ctpn + densenet)
  13. iOS开发之NSURLSession/NSURLConnection HTTP load failed 的解决办法
  14. 【原创翻译】文本编辑器
  15. javascript函数传参方式
  16. html 获取浏览器宽高,js获取浏览器高度与宽度的方法
  17. 内存spd规范_CL14真香,聊聊内存条时序到底是什么?
  18. mac安装chromedriver谷歌浏览器驱动
  19. 原创科幻短篇《Bug》
  20. Linux 定时器 setitimer

热门文章

  1. 自动售饮料机逻辑电路的设计
  2. 玩转ChatGPT:制作思维导图
  3. 手摸手教你开发一个postcss插件自动计算vw
  4. 配置maven从自己的私服下载jar包nexus、maven私服仓库(二)
  5. geek软件是干什么的_Geek Uninstaller,专业工具
  6. Android应用源码航空订票软件客户端
  7. 计算机办公自动化取证,办公自动化技术基础
  8. 2020年 我对数据行业的思考 | 特邀专栏
  9. TWS当前发展和趋势浅析
  10. android webView淘宝口令跳转重定向的问题探索和解决