Javascript编码之性能篇.ppt

Javascript 编码之性能篇 By JK 2010-12-07 JS代码本身的追求 本PPT忽略略大的设计方面的问题，只说编码细节。 可读性。----风格统一规范。 易使用。----接口明确易用。 用户群。----用法太多，是好是坏？ 扩展性。----功能添加是不可避免的事。 健壮/独立。----少受干扰。 效率好。----初始化效率/运行效率 代码量。 可压缩比。 易拆分。 …… 没冲突就尽量追求完美，如果有冲突就需要权衡。 80分就够用的话，追求完美时也考虑下成本。 跟性能相关的有哪些指标 最终需求：满足用户在速度上的体验需求 Load代码快（代码量/初始化运行） Load不快的话，可以异步load 代码运行得快 不快的话，可以用流畅代替快速（例如动画） 运算资源统筹处理，某些代码适度lazy处理或预处理。 占用较少内存，谨防内存泄漏。 对于核心公用代码，尽量考虑各种恶劣的应用情况。 先一起学习一下一篇文章 JavaScript 高效运行代码分析 中文： /node/207 英文： /articles/view/efficient-javascript/ JS代码里有哪些东东? 语法/排版符号：空格、回车、点号、括号、分号、逗号等。 语法字：var、function、if、else、for、while、break、return、try等 运算符：算术/逻辑/位/赋值运算符、delete、typeof、void、instanceof、new、in 数据类型常量 变量 “.” ”()” 函数 表达式 语句 注释与hack代码 还有哪些东西没看到？ ECMA Javascript的原理与机制 字符串转函数机制：eval、new Function、setTimeout、setInterval 原型链 作用域链 内存资源回收机制 浏览器对Javascript的差异实现 s+=‘aaa’ ? arr.join(‘’) array.push(o) ? arr[i] = o 不同浏览器的Window/Dom 浏览器的重新渲染机制 gsetter的陷阱：如innerHTML 有没有了解代码所依赖的框架 如何优化css selector的写法 框架所提供的方法的效率成本…… 纯JS代码量化性能估计 忽略差异 常量：1 运算符：1 （除字符串的+外，其它的忽略差异） 字符“+”运算：2 + n （n视字符串长度与浏览器而定） 变量：1 + 2*n （n为作用域链深度） “.aaa”：1 + 2*n （n为aaa的隐含深度） （小心getter的坑，如a.innerHTML，它可不只1） 函数运行：4 + n （n视情况决定） 内部函数：2 + n （n视情况决定）（内部函数指浏览器实现的，例如Array的toString/push等） 以上为IE下的粗估值。 用运算符替代变量 var a=1; a=a+1; a+=1; //用”+=“代替”=a+” a++; //用“++”代替”+=1” 减少“.”数 function test1(){ var a={name:jk}; for(var i=0;i5000;i++){ ;;;;;;;;;; } } function test2(){ var a={name:jk}; var a_name=; for(var i=0;i5000;i++){ a_name;a_name;a_name;a_name;a_name;a_name;a_name;a_name;a_name;a_name; } } 前者中，循环里每次都多一些点。所以会慢。 同样的原因： var arr=[1,2,3,4,5,6]; for(var i=0;iarr.length;i++); //慢 for(var i=0,len=arr.length;ilen;i++); //快 减少“.”数—之二 function test1(){ var attrs={value:1, readOnly:false, maxLength:3}; for(var i in attrs){ document.getElementById(‘aaa’)[i]=attrs[i]; } } function test2(){ var attrs={value:1, readOnly:false, maxLength:3}; var el=document.getElementById(‘aaa’); for(var i in attrs){ el[i]=attrs[i]; } } 如果点后的是一个方法，就更值得减少点的次数了。 降低.aa