Detailed analysis of JS in the use of Try catch on the performance impact of code running

Source: Internet
Author: User
Tags closure try catch

Objective

has not been to study the effect of Try catch on the performance of the code, but has been stuck in the sense of the recent meeting to exchange learning, someone raised the relevant questions. By the end of the week, it was just a study.

Method of capturing a script error on the front line:

Window. Jstracker=window. jstracker| | [];
try{
Your code
}catch (e) {
Jstracker.push (e);
THROWE;//recommends that the error be thrown again to prevent the test from discovering an exception
}

Design Experiment Mode

The simple design is the contrast experiment.

Blank group 1:[10 million times for data modulo without try catch]

<! Doctypehtml>
<title>1 without trycatch time consuming </title>
<script>
!function () {
No try catch is time-consuming
Vart=newdate ();
Time consuming code starts
for (vari=0;i<100000000;i++) {
varp=i%2;
}
End of time-consuming code
document.write (Newdate () –t);
}();
</script>
<body>
</body>

Reference Group 2:[The time-consuming code with a try, inline time consuming code]

<! Doctypehtml>
<titl E>2 the time consuming of inline code in try </title>
<script>
!function () {
//time consuming for inline code in a try
Vart=newdate ();
try{
//Time consuming code start
for (vari=0;i<100000000;i++) {
varp=i%2;
}
//Time-consuming code end
thrownewerror ();
}catch (e) {
}
document.write (newdate () –t);
} ();
</script>
<body>
</body>

Reference Group 3:[The time-consuming code with a try, enclosing the time consuming code]

<! Doctypehtml>
<title>3 in TR The time consuming situation of inline code in Y </title>
<script>
!function () {
funct Ionrun () {
//Time consuming code start
for (vari=0;i<100000000;i++) {
varp=i%2 ;
}
//Time consuming code end
}
//time consuming for inline code in try
Vart=newdate ();
try{
Run ();
Thrownewerror ();
}catch (e) {
}
document.write (newdate () –t);
} ();
</script>
<body>
</body>

Reference Group 4:[surround time-consuming code with catch, inline time consuming code]

<! Doctypehtml>
<titl E>4 the time to inline code in a catch </title>
<script>
!function () {
//time consuming to inline code in a catch
Vart=newdate ();
try{
thrownewerror ();
}catch (e) {
//Time-consuming code start
for (vari=0;i<100000000;i++) {
varp=i%2;
}
//Time-consuming code closure
}
document.write (n Ewdate () –t);
} ();
</script>
<body>
</body>

Reference group 5:[to surround time-consuming code with catch, outer time consuming code]

<! Doctypehtml>
<title>5 at CA Tch of inline code in the!function </title>
<script>
() {
Fun Ctionrun () {
//Time consuming code start
for (vari=0;i<100000000;i++) {
varp=i %2
}
//Time-consuming code closure
}
//The time consuming situation of inline code in catch
vart=newdate ();
try{
thrownewerror ();
}catch (e) {
run ();
}
document.write (newdate () –t);
} ();
</script>
<body>
</body>

Run results (only Chrome is selected as an example)

- Do not use Try-catch Time consuming in TRY, inline code Time consuming in TRY, external code Time consuming in CATCH, inline code Time consuming in CATCH, external code
Chrome51 98.2 1026.9 107.7 1028.5 105.9

Give a summary

The use of Try catch is the same as the code performance consumption in the try or in catch.

The performance cost to pay attention to is not to cram too much code in a try catch (declaring too many variables), preferably, all the code to be executed is placed in another function, executed by invoking this function.

For 2nd, you can view the interpretation of Try catch in ECMA, and the JS engine copies the current lexical environment when the code enters a try catch, which is actually all the variables under the current scope.

Suggestions

Try catch in a relatively clean scope when you use Try catch, and as much as possible in a try catch statement with as few variables as you can, preferably through a function call.

Explanation of the phenomena in the experiment

During the test, there was a doubt that the following two snippets of code ran in Chrome 44 with a very large gap, with an empty try catch averaging 850ms, plus the previous one: 140ms.

!function () {
//No try catch time consuming
Vart=newdate ();
//Time consuming code start
for (vari=0;i<100000000;i++) {
VarP =i%2;
}
//Time-consuming code end
document.write (newdate () –t);
try{
}catch (e) {
}
}();
!function () {
//No try catch is time-consuming
vart=newdate ();
//Time consuming code start
for (vari=0;i<100000000;i++) {
VarP =i%2;
}
//Time-consuming code end
document.write (newdate () –t);
} ();

But the reason is simple.

Just change the code so that the time is down:

!function () {
!function () {
No try catch is time-consuming
Vart=newdate ();
Time consuming code starts
for (vari=0;i<100000000;i++) {
varp=i%2;
}
End of time-consuming code
document.write (Newdate () –t);
}();
try{
}catch (e) {
}
}();

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.