Another example of JavaScript code optimization

Source: Internet
Author: User

Today, I received Article 8th from programmers and read Mr Yang Jianhua's example of javaspt PT code optimization ". Read it carefully and feel that the optimization is not complete. So I wrote an article to discuss Mr Yang's example. The original example can be found on Mr Yang's blog:
Http://prowyh.spaces.live.com/blog/cns! Eaaa8ab356f88ea0! 403. Entry

I. Create a Regular Expression Code
---
The creation code is redundant:
VaR fnre =/functor _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {12} /I;
VaR objre =/object _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {12} $/I;
VaR objre_r =/Radio _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-z] {12} _ r/I;
VaR objre_a =/object _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {12} _ A/I;
VaR objre_m =/Radio _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-z] {12} _ m/I;
VaR objre_d =/Radio _ [0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-z] {12} _ d/I;

Read it carefully. It is actually a guid with the prefix and suffix. Can it be written as follows:
VaR guid = '([0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {12 }) ';
VaR fnre = new Regexp ('(functor _)' + guid, 'I ');
VaR objre = new Regexp ('(object _)' + guid + '$', 'I ');
VaR objre_r = new Regexp ('(Radio _)' + guid + '_ (r)', 'I ');
VaR objre_a = new Regexp ('(object _)' + guid + '_ (a)', 'I ');
VaR objre_m = new Regexp ('(Radio _)' + guid + '_ (m)', 'I ');
VaR objre_d = new Regexp ('(Radio _)' + guid + '_ (d)', 'I ');

The string join operation seems to be used here. However, variable declaration only performs operations once, which has no effect on efficiency. It is readable and easy to modify.
Read note that the Group '()' in the regular expression is used here, which will be useful later.

Ii. Grouping in Regular Expressions
---
The Code always passes through
Aryalist [_ match [0]. Split ("_") [1] = "_";
In this form, GUID is separated from the match. However, if the group above is used, this operation is unnecessary. Easy to use
Aryalist [_ match [2] = "_";
The result is displayed.

3. Pay attention to the time consumed by DOM reference.
---
In the code, the members of the DOM object are continuously accessed in a loop. However, it is time-consuming to access members of the DOM object. More specifically, each member
It is encapsulated by COM components, so the efficiency is poor. So the following code:
Else if (_ match = _ obj. Name. Match (objre_m ))! = NULL ){
}
Else if (_ match = _ obj. Name. Match (objre_d ))! = NULL ){
}
It should be changed:
VaR name = _ obj. Name;
Else if (_ match =Name. Match(Objre_m ))! = NULL ){
}
Else if (_ match =Name. Match(Objre_d ))! = NULL ){
}

4. Overly complex logic
---
The code is too dependent on the programming experience of other languages, ignoring the characteristics of JavaScript itself. Therefore, the implementation logic is quite satisfactory, but it is difficult
And complex. For example, if... else if... is used in a loop. This part of optimization is provided separately later.

5. From the perspective of stringbuilder () interface, the degree of optimization is insufficient.
---
The article mentions that stringbuilder is an efficient object for string construction. I noticed that its usage is:
Objectlistex. append (_ ID + ":" + _ r + ":" + _ A + ":" + _ m + ":" + _ d + ";");
It can be said that the optimization of this object is not enough. Because a string parameter is input here, and the input parameter is connected using a string,
Efficiency improvement is limited.
If stringbuilder uses array. Join to concatenate strings, it is better to allow multiple
Parameters. For example:
Objectlistex. append = function (){
This. Push. Apply (this, arguments );
}
Objectlistex. tostring = function (){
Return this. Join ('');
}
Then, the above example can be written:
Objectlistex. append (_ id, ":", _ r, ":", _ A, ":", _ m, ":", _ d ,";");
This avoids redundant string join operations.

6. New optimized version
---
// Optimized version
VaR functorlistex = new stringbuilder ();
VaR objectlistex = new stringbuilder ();

VaR coll = Document. getelementsbytagname ("input ");
 
// Regular Expression for matching
VaR guid = '([0-9a-za-z] {8}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {4}-[0-9a-za-z] {12 }) ';
VaR fnre = new Regexp ('(functor _)' + guid, 'I ');
VaR objre = new Regexp ('(object _)' + guid + '$', 'I ');
VaR objre_r = new Regexp ('(Radio _)' + guid + '_ (r)', 'I ');
VaR objre_a = new Regexp ('(object _)' + guid + '_ (a)', 'I ');
VaR objre_m = new Regexp ('(Radio _)' + guid + '_ (m)', 'I ');
VaR objre_d = new Regexp ('(Radio _)' + guid + '_ (d)', 'I ');

// Helper data structures used by optimized algorithm
VaR aryobjlist = new array ();
VaR aryrlist = new array ();
VaR aryalist = new array ();
VaR arymlist = new array ();
VaR arydlist = new array ();

VaR arylist = {
R: aryrlist,
A: aryalist,
M: arymlist,
D: arydlist
}

// One pass scan to traverse the nodes collection (Coll) to build functorlistex
// And Intermediate arrays
For (VAR I = 0, IMAX = Coll. length; I <IMAX; I ++ ){
VaR _ OBJ = Coll [I];
If (! _ Obj. Checked) continue; // <-- faster detection
If (_ obj. type! = "Checkbox" & _ obj. type! = "Radio") continue;

VaR id = _ obj. ID, name = _ obj. Name;
VaR _ match = ID. Match (fnre) | Name. Match (objre_r) | ID. Match (objre_a) |
Name. Match (objre_m) | Name. Match (objre_d) | ID. Match (objre );

If (! _ Match) continue;

VaR tag = _ match [3], tag2 = tag + '_', guid = _ match [2];
Switch (TAG ){
'A': arylist [tag] [guid] = tag2; break;

'R', 'M', 'D ':
Arylist [tag] [guid] = tag2 + _ obj. value; break;

Default:
If (_ match [1] = 'functor _'){
Functorlistex. append (guid ,";")
}
Else {// For _ match [1] = 'object _'
Aryobjlist. Push (guid)
}
}
}

// Further process to build objectlistex from the Intermediate arrays
For (VAR I = 0, IMAX = aryobjlist. length; I <IMAX; I ++ ){
VaR id = aryobjlist [I];
VaR r = aryrlist [ID] | "";
VaR A = aryalist [ID] | "";
VaR M = arymlist [ID] | "";
VaR d = arydlist [ID] | "";

Objectlistex. append (ID, ":", R, ":", a, ":", M, ":", D ,";");
}

7. Small Optimization
---
I thought about it just now. In fact, the switch in the above Code is still awkward. The following is a small Optimization for compaction:
Switch (_ match [1] + tag ){
'Functor _ undefined': functorlistex. append (guid, ";"); break;

'Object _ undefined': aryobjlist. Push (guid); break;

'Object _ a': arylist [tag] [guid] = tag2; break;

Default: // For R, M, d
Arylist [tag] [guid] = tag2 + _ obj. value;
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.