See www.yeeyan.com/articles/view/92135/47626/dz
See the original: http://code.google .com / intl / zh-CN / speed / articles / optimizing-javascript.html
wrong place, please point it out ! I hope useful for you!
JavaScript code optimization (Optimizing JavaScript code)
client-side scripting to make your applications more dynamic, but the browser interprets the script will bring low efficiency, performance, different clients are different. Let's discuss some tips and best practices to optimize your JavaScript code
string (Working with string)
string connection IE6 and IE7 will affect garbage collection even though these issues have been resolved in IE8 -. efficiency connection string in IE8 and other non-IE browsers (such as chrome ) If there is a slight increase on most of your user community using IE6,7, you should be prepared given attention String manner of construction..
look at the following examples:
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
?
';
Try instead join connection:
var
veryLongMessage
=
2
['This is a
long
string that due to our strict line length limit of',3
maxCharsPerLine,4
' characters per line must be wrapped. ',5
percentWhoDislike,6
'
%
of engineers dislike
this
rule. The line length limit is
for
',7
' style purposes, but we don't want it to have a performance impact.',8
' So the question is how should we
do
the wrapping
?
'9
].join(); 10
Similarly, in cycle and / or by connecting the conditional statement is very inefficient to construct a string below an example of the error:
var
fibonacciStr
=
'First
20
Fibonacci Numbers';
for
(
var
i
=
0
; i
<
20
; i
++
)
{
fibonacciStr += i + ' = ' + fibonacci(i) + '';
}
The right way is as follows:
var
strBuilder
=
['First
20
fibonacci numbers:'];
for
(
var
i
=
0
; i
<
20
; i
++
)
{ strBuilder.push(i, ' = ', fibonacci(i)); }
var
fibonacciStr
=
strBuilder.join('');
By generating a string helper function (Building strings with portions coming from helper
functions) to construct a long string by the string passed to a function generator, to avoid temporary String result.
For example, assume that the function need buildMenuItemHtml_ character string (literal) and variables constructed String, String using the constructor is internal rather than used as follows:
var
strBuilder
=
[];
for
(
var
i
=
0
, length
=
menuItems.length; i
<
length; i
++
)
{ strBuilder.push(this.buildMenuItemHtml_(menuItems[i])); }
var
menuHtml
=
strBuilder.join();
Recommended as follows:
var
strBuilder
=
[];
for
(
var
i
=
0
, length
=
menuItems.length; i
<
length; i
++
)
{ this.buildMenuItem_(menuItems[i], strBuilder); }
var
menuHtml
=
strBuilder.join();
The method defined in class (Defining class methods)
The following code is inefficient, generated once every baz.Bar object is generated for it and a method of closure.
baz.Bar
=
function () { // constructor, constructor body the this .foo = function () { // method, Method body } ; }
Recommended way:
baz.Bar
=
function
()
{ // 构造函数,constructor body }
; baz.Bar.prototype.foo
=
function
()
{ //方法, method body }
;
这种方式,不管有多少个baz.Bar对象生成,仅仅只建立一个方法foo且没有产生闭包.
初始化实例变量(Initializing instance variables)
在原型(prototype)上用值类型[value type](而不是引用类型[reference type])声明或初始化实例变量.这避免了在每次调用构造函数时运行不必要的初始化代码.(有些情况下是不能这样做的:实例变量的初始值依赖于构造参数或是在构造时的其它状态的变量(some other state at time of construction))
例子:
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';
避开闭包的陷阱(Avoiding pitfalls with closures)
闭包是JavaScript的一个强大且有用的特色;但是它有几个缺点:
1,它们是常见的内存泄漏源
2,生成闭包明显的比生成不是闭包的内部函数慢,比调用静态函数更慢.例如
function
setupAlertTimeout()
{ var msg = 'Message to alert'; window.setTimeout(function() { alert(msg); }, 100); }
上面比下面的写法要慢:(上面的代码产生了闭包)
function
setupAlertTimeout()
{ window.setTimeout(function() { var msg = 'Message to alert'; alert(msg); }, 100); }
上面比下面的写法要慢:
function
alertMsg()
{ var msg = 'Message to alert'; alert(msg);}
function
setupAlertTimeout()
{ window.setTimeout(alertMsg, 100);}
3,它们增加了变量的作用域(scope chain)的层次.当浏览器解析属性的时候,将会检查所有层次的作用域.见下面的例子:
var
a
=
'a';
function
createFunctionWithClosure()
{ var b = 'b'; return function () { var c = 'c'; a; b; c; };}
var
f
=
createFunctionWithClosure();f();
当执行f方法的时候,引用a比引用b慢,引用b比引用c慢.
IE中闭包更多信息可以查看 IE+JScript Performance Recommendations Part 3: JavaScript Code inefficiencies
避免用with(Avoiding with)
在你代码中避免用with.它对性能有负面影响,因为它修改了作用域,在其它作用域查找变量的开销很大.
避免浏览器的内存泄露(Avoiding browser memory leaks)
内存泄露是web应用程序普遍存在的问题,它会产生巨大的性能危害(hit).随着浏览器内存使用增加,你的web应用程序,用户系统其它部分操作,将变的慢起来.大部分web应用程序的内存泄露是因为在 JavaScript脚本和Dom之间生成了循环引用(例如:javascript脚本和IE com结构之间,javascript脚本和Firefox xpcom结构之间)
下面是避免内存泄漏一些经验法则：
使用事件系统关联事件处理函数(Use an event system for attaching event handlers)
大部分的循环引用模式[DOM 元素-->事件处理函数(event handler)-->闭包(closure scope)-->DOM元素].为了避免这个问题,可以用经过充分测试事件系统(event system)来关联事件处理函数(event handlers),例如:Google doctype,Dojo,JQuery
另外,在IE中使用用内联事件函数(inline event handlers)会导致另一种的类型的泄露.这不是通常的循环引用类型的泄露,而是由内部临时匿名脚本对象产生的泄露．详细信息,请看文章"DOM insertin Order Leak Model"和例子JavaScript Kit tutorial.
避免扩展(expando)属性
扩展(expando)属性是把任意JavaScript的属性附加的到DOM元素上,这是循环引用产生的根源．你可以不产生内存泄露来扩展(expando)属性,但是这是很容易产生内存泄露的．泄露模式是［DOM元素-->扩展(via expando)-->中间对象(intermediary object)-->DOM元素］.最好是避免使用用它们．如果你用到它们,仅可使用原始类型(primitive types)作为值．如果不是原始类型,当扩展(expando)属性不在使用的时候,要把它置为空．可以参考文章"Circular References"
转载于:https://www.cnblogs.com/boiledwater4tom/archive/2009/12/14/1624171.html