String connection

+/+= Operator join

str += "one" + "two";

This is a common way to connect strings , It runs through the following four steps :

1、 Create a temporary string in memory ;

2、 Connected ”onetwo” Assigned to this temporary string ;

3、 Temporary string and str The current value of the connection ;

4、 The result of the connection is assigned to str.

The downstream code can avoid producing temporary strings

str = str + "one" + "two";

The assignment expression is given by str Start as a foundation , Attach it one string at a time , Connect from left to right , So you avoid using temporary strings . If you change the order such as hold str Put it in the middle Then there is no optimization effect . This is related to the way the browser allocates memory when merging strings .

Array item merging

Array.prototype.join Method to combine all the elements of an array into a single string , Receives a parameter as a connector .

var str = "i am people but i very shuai a",
Newstr = "",
Appends = 5000; while(Appends --){
Newstr += str
}

This code connects 5000 A length of 30 String , The following figure for IE7 The time it takes to complete

IE7 5000 The first merger used 226 Milliseconds have a significant impact on performance , How do you optimize it ?

Use array item merging to generate a generic string

var str = "i am people but i very shuai a",
Strs = [],
Newstr = "",
Appends = 5000; while(Appends --){
Strs[Strs.length] = str;
}
Newstr = Strs.join("");

IE7 test result

By avoiding the repeated allocation of memory and copying the increasing string , So the performance improvement is obvious .

String.prototype.concat

Concat Can receive any number of parameters , And attach each parameter to the called string .

str = str.concat(s1);

str = str.concat(s1,s2,s3);

Unfortunately , Use concat It's easier than using + and += Slightly slower , Especially in IE opera and Chrome The slower is more obvious .

Regular expression optimization

How regular expressions work , Understanding the principle helps to better solve all kinds of problems that affect the performance of regularization .

compile : Browsers validate regular expression objects , Then turn it into a native code program ; Assign a regular object to a variable , It can avoid repeated compilation .

Set start position : The starting search position of the target string , It's usually the starting character of a string 、 Or regular lastIndex Property to specify the location ( Limited to with /g Of exec and test)、 Or the next character of the last matching character when returning from the fourth step .

The way browsers optimize regular expression engines is , In this stage, we skip some unnecessary work through early prediction . for example , If a regular expression takes ^ start ,IE and Chrome Usually judge whether it can match at the beginning of the string , Then you can avoid foolishly searching for subsequent locations . Another example is matching. The third letter is x String , A smart way is to find out first x, And then it goes back two characters from the starting position .

Match each regular expression character : Start at the beginning of the string , Check the text and regular patterns one by one , When a particular character fails to match , Go back to where you tried to match , Try other possible paths .

Match success or failure : If there is an exact match in the current string position , The match is successful ; If the current location doesn't have all the possible paths, it doesn't match successfully , Will go back to the second step , Reset the starting position , Start another round of matching … Until the last string is the actual position , Not yet , The match fails .

Understanding backtracking (Backtracking)

Backtracking is an essential part of the matching process , That's why regularity is so powerful , It's also the performance cost of regularization , So how to reduce backtracking is the key to improve regularity . Backtracking usually occurs in the case of branching and repetition :

Branching and backtracking

/h(ello|appy) hippo/.test("hello there, happy hippo");

It starts with h And the starting position of the string h matching , The next branch , From left to right ,(ello|appy) Medium ello First try to match , character string h Back there, too ello, The match is successful , So we continue to match (ello|appy) Space after , Still match successfully , Continue to match after the space in the regular h, The string space is followed by t, Matching failure .

Back to the regular Branch (ello|appy)( This is backtracking ), Try to use appy For the first character of a string h After the character matching , Failure , There are no more options , No more backtracking .

The first start position match failed , The starting position is one bit later , Rematch h… Until the string starts at 14 when , Match to h.

So we started a new round of character matching , Enter the branch (ello|appy) Medium ello, Matching failure .

Back to the regular Branch (ello|appy)( Back again ),appy The match is successful , Exit the branch , Match the following hippo, Match string happy hippo, The match is successful , End match .

Repetition and backtracking

var str = "<p>Para 1.</p><img src='smiley.jpg'><p>Para 2.</p><div>Div.</div>";

/<p>.*<\/p>/i.test(str);

It starts with <p> And the starting position of the string <p> matching , Next is .*(. Match any character other than the newline ,* It's a greedy quantifier , It means repetition 0 Times or times , Match as many times as possible ),.* Matches all the characters that follow up to the end of the string .

Try to match .* hinder <, Failed to match at the end of the string , Then backtrack one character at a time to try to match …, until </div> The first character of is matched successfully , Next, in regular \/ It's also related to / The match is successful , Continue to match... In regular p, Matching failure , return </div>, Keep going back , Until the second paragraph </p>, The match is successful , return <p>Para 1.</p><img src=’smiley.jpg’><p>Para 2.</p>, There are 2 A paragraph and a picture , End match .

Backtracking is out of control

When backtracking got out of control , May cause the browser to feign death for a few seconds 、 A few minutes or more , Let's take the following example ( To match the whole HTML character string ):

/<html>[\s\S]*?<head>[\s\S]*?<\/head>[\s\S]*?<body>[\s\S]*?<\/body>[\s\S]*?<\/html>/

The matching structure is complete html When you file , Everything is all right , But when some tags are missing, the problem arises , If html At the end of the document </html> defect , the last one [\s\S]*? The repetition extends to the end of the string , matching </html> Failure , The regularizer searches forward in turn and remembers the backtracking position for subsequent use , When regular expressions extend to the penultimate [\s\S]*?—— Use it to match the <\/body> The matching one <body>,—— And then continue to look for </body> label , Until the end of the string . When all the steps fail , The third from the bottom [\s\S]*? Will be extended to the end of the string , And so on .

Back to the ultimate solution : Simulated atomic group ( Look ahead + backreferences ):(?=([\s\S]*?<head>))\1

/<html>(?=([\s\S]*?<head>))\1(?=([\s\S]*?<\/head>))\2(?=([\s\S]*?<body>))\3(?=([\s\S]*?<\/body>))\4[\s\S]*?<\/html>/

Atomic group ( Look ahead ) Any backtracking position of is discarded , Avoid the backtracking out of control from the root , But looking forward doesn't consume any characters as part of the global match , Capture group + Back references can be used here to solve this problem , It's important to note that this is the number of back references , It's the one above \1、\2、\3、\4 Corresponding position .

No other details ( Because I can't understand ).

When not to use regular expressions

If it's just a search string , And know in advance which part of the string needs to be tested , Regularization is not the best solution . such as , Check whether a string ends with a semicolon :

/;$/.test(str); Regularization starts with the first character , Test the whole string one by one , See if she's a semicolon , At the end of the string , When the string is long , The more time it takes .

str.charAt(str.length – 1) == “;”; This jumps directly to the last character , Check if it's a semicolon , The string is very small, maybe just a little faster , But for long strings , Length does not affect the time required .

String native methods are fast , such as slice、substr、substring、indexOf、lastIndexOf etc. , They can avoid the performance overhead of regularization .

Remove the leading and trailing whitespace of the string

String.prototype.trim = function() {
var str = this.replace(/^\s+/, ""),
end = str.length - 1,
ws = /\s/;
while (ws.test(str.charAt(end))) {
end--;
}
return str.slice(0, end + 1);
}

This solution uses regularization to remove the white space in the head , Position anchor ^, It will be soon , It's mainly the blank processing of the tail , As mentioned above when not to use regular expressions , Regular is not the best , Here we use the string native method combined with regularization to solve , You can avoid performance being affected by the length of strings and whitespace .

Summary :

When connecting a large number or size of strings , Array item merging is unique in IE7 And earlier versions of reasonable performance methods .

Don't consider IE7 Words , Array item merging is one of the slowest ways to join strings . Recommended + and += Operator instead of .

Backtracking is an essential part of regular expression matching , It's also the low efficiency of regularization .

Runaway backtracking occurs where regularization is supposed to match quickly , However, some special string matching actions lead to slow running and even browser crash . The way to avoid this problem is : Make adjacent resources mutually exclusive , Avoid nested quantifiers matching the same part of the same string many times , Remove unnecessary backtracking by reusing the atomic set of the preview .

Regular expressions are not always the best tool to do the job , Especially when you only search for literal strings .

There are many ways to remove the ending whitespace of a string , But with two simple regular expressions ( One to remove the head, one to remove the tail ) To handle a lot of string content can provide a simple and cross browser method .

High performance JavaScript( Strings and regular expressions ) More articles about

  1. 《 High performance javascript》 The main points and extensions of a Book ( On )

    I received it the other day HTML5 It's from China < High performance javascript> A Book , I plan to use it as a holiday pastime , By the way, I also wrote an article to record some key points in the book . I think this book is worth reading by the front-end friends of middle and low level , There will be a lot of unexpected ...

  2. High performance JavaScript( It's worth seeing )

    As we all know, browsers use single process processing UI Update and JavaScript Running multiple tasks , Only one task can be performed at a time , In this case ,JavaScript How long it takes to run means how long it takes for the user to wait for the browser to respond . ...

  3. 【 Reading notes 】 read 《 High performance JavaScript》

    This book < High performance JavaScript> About JavaScript All aspects of performance optimization , Mainly around the following aspects : 1> Loading order 2> The data access ( For example, what kind of data type is the fastest , What kind of function ...

  4. 《 High performance javascript》 Learning summary

    This article is about learning < High performance javascript>(Nichols C. Zakes Writing ) Some conclusions of , Although the book is out of date , There are a lot of knowledge points that can't be used , But after all, it was the predecessors who explored step by step , Record javascr ...

  5. High performance javascript note

    ----------------------------------------------------------- Chapter one Load and execute ------------------------------ ...

  6. High performance JavaScript Reading notes

    zero . Organizational structure According to the introduction , The author divides the book into four parts : One . Page loading js The best way ( Preparation before development ) Two . improve js Code programming skills ( In development ) 3、 ... and . Build and deploy ( Release ) Four . Post release performance testing and problem tracking ( Online problem optimization ) ...

  7. 《 High performance JavaScript》-- Reading notes

    Chapter one Load and run Delay script defer This property indicates that the script does not affect the construction of the page during execution , The script will be downloaded first, but it will be delayed until the whole page has been parsed . Only for external scripts <script src="j ...

  8. High performance javascript Learning summary (3)-- The data access

    stay JavaScript in , Data storage location can have an important impact on the overall performance of the code . There are four types of data access : Direct measurement , Variable , Array items , Object members .          Direct quantity only represents itself , Not stored in a specific location . JavaScr ...

  9. 《 High performance Javascript》 Summary( Two )

    Chapter four . Algorithm and process control Algorithms And Flow Control reason : The overall structure of the code is one of the determinants of execution speed . A small amount of code doesn't necessarily run fast , A lot of code is not necessarily slow . Performance loss associated with organizational code and specific ...

  10. 《 High performance JavaScript》 Practical guide

    By XFE- Kanyu read < High performance javascript> after , An arrangement and simplification of its contents Load and execute take script The label on the body On the end tag control script Tag number ( every time script analysis ...

Random recommendation

  1. PHP Original video tutorial - Website development novice video tutorial

    PHP Original video tutorial - Website development novice video tutorial Paid apprentices ,, The video is free . This video tutorial , For inexperienced beginners , Get started quickly . The first time I did video, I didn't do it well , Please include . The first part ,HTML Video tutorial ...

  2. use Redis Implement distributed locks

    Redis There's a series of orders , It is characterized by NX ending ,NX yes Not eXists Abbreviation , Such as SETNX Orders should be understood as :SET if Not eXists. This series of commands is very useful , This is about using SETNX To implement distributed locking ...

  3. c#-1 data structure Definition related Interface interaction data Model layer

    1. Time use Nullable<UInt32> Except for the first time DateTime TimeSpan no way . 2. Other elements also use Nullable<UInt32> 3.list Collection data binding classes ...

  4. XCOJ 1168 ( Search for + expect + Gauss elimination )

    Topic link : http://xcacm.hfut.edu.cn/oj/problem.php?id=1168 The main idea of the topic :D Starting point ,E It's the end . Every time I go in a certain direction with equal probability , Ask the expected number of steps to reach the destination . Can't get to the end or the number of steps ...

  5. CSS control LI Line character overflow is replaced by an ellipsis

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Restful API Study Day3 - DRF View

    View One . evolution class GenericView(APIView): """ Encapsulate the configurations and methods that may be used in the view """ queryset ...

  7. div Medium img The way to center vertically , The most simple ! I learned it secretly ,,, Don't say I plagiarize (*^__^*)

    Give Way div Medium img Vertical center , It's easy to be in the middle of the horizontal , use text-align:center; Give Way div in img The vertical center method is actually very simple The key is : display:table-cell;   Let the label have the table's genus ...

  8. @valid annotation

    Today, I found a very useful annotation directly on the code : Entity class domain: @Column(name = "NAME") @NotNull @Size(min = 2,max = 50) pri ...

  9. Such a prosperous Mobile webapp Develop the market : Summarize some of the current mobile technologies web Development Kit

    Write it at the front : Because the popularity of the mobile market drives mobile social networking . Mobile shopping . Mobile Games . Intelligent hardware and other emerging areas . The hardware level of intelligent terminal is higher and higher , Run the web Browser capabilities are also growing , add HTML5\JS\CSS Vigorous development ,Web has ...

  10. jsp Export to Excel

    jsp Template file <%@ page isELIgnored="false" contentType="application/x-msdownload; charse ...