Home > Developer > JavaScript
Remember when you are ignorant of the basics of JavaScript, there are rumors that "with statement is inefficient, if not necessary, do not use the statement", and ECMAScript 5 Strict mode is prohibited using the WITH statement, So I've always had a crush on the with statement.
Today, I know that there is a topic that says, "What do you think is quite a B-grid", and then someone posts this code:
With (document) with (body) with (InsertBefore (createelement ("script"), FirstChild) setattribute ("Exparams", " Category=&userid=68497352&aplus&yunid= ", id =" Tb-beacon-aplus ", src = (location >" https "? "//s": "//a") + ". Tbcdn.cn/s/aplus_v2.js")
Code Dismantling:
With (document)
with (InsertBefore (createelement ("script"), FirstChild)
setattribute (" Exparams "," category=&userid=68497352&aplus&yunid= ",
id =" Tb-beacon-aplus ",
src = (location > "https"? "//s": "//a") + ". Tbcdn.cn/s/aplus_v2.js"
)
and take it apart.
var script = document.createelement ("script");
Document.body.insertBefore (script, document.body.firstChild);
Script.setattribute ("Exparams", "category=&userid=68497352&aplus&yunid=",
script.id = " Tb-beacon-aplus ",
script.src = (Location >" https "? "//s": "//a") + ". Tbcdn.cn/s/aplus_v2.js"
);
Because in JavaScript, you can give a function a lot of useless parameters.
Therefore, the last sentence can be fully understood as:
Script.id = "Tb-beacon-aplus";
SCRIPT.SRC = (Location > "https"? "//s": "//a") + ". Tbcdn.cn/s/aplus_v2.js";
Script.setattribute ("Exparams", "category=&userid=68497352&aplus&yunid=");
If the assignment is not a standard attribute, it is not written into the tag's attribute, so a separate assignment allows the loaded external script to read the additional parameters here.
It is said to be Taobao home, curiosity dictates, decisively ran to Taobao looked, there is a picture of the truth:
Taobao such a big project is generally very efficient, incredibly inefficient use of the legendary code?
We try to use normal code to achieve the above function:
var s = document.createelement ("script");
S.setattribute ("Exparams", "category=&userid=68497352&aplus&yunid=");
S.setattribute ("src", (location> "https"?) S ":"//a ") +". Tbcdn.cn/s/aplus_v2.js ");
S.id= "Tb-beacon-aplus";
Document.body.insertBefore (S,document.body.firstchild)
This is the simplest code I can write, of course, you can try as setattribute as Taobao code, but the result will hurt you very much!!! After my test, he did that with more than 3 parameters. Setting node properties is only valid under the WITH statement, and the properties set by the third and subsequent parameters can only be HTML standard properties. I do not know the reason, Daniel is willing to teach it?
After code compression, Taobao code 224 bytes, I wrote 264 bytes of code.
I have come to the conclusion that: large sites cherish bytes such as gold, especially such as Taobao daily traffic huge site, in order to save traffic (although only a few bytes, multiplied by a large number of visits after the result is quite amazing) and a slight sacrifice of the user code to run the efficiency is completely worth. What's more, with the efficiency of the browser code implementation today, with statement efficiency is really so low?
Hold on to a heart of exploration (a little excited at the moment.) ) and did the following code tests,
HTML code:
<!doctype html>
With statement to get Div#data value
var now = +new Date;
for (Var i=0;i<1000000;i++) {with
(document) with (getElementById ("one")) getattribute ("Data")
}
Console.log (New Date-now)
General code gets the data value of the Div#one
var now = +new Date;
for (Var i=0;i<1000000;i++) {
document.getElementById ("one"). getattribute ("Data")
}
Console.log (New Date-now)
The code that gets the property value is cycled 100W times, the output run time, the test browser is Chrome 35 and IE 11:
Statement: Who special said I was IE black, I and who anxious!!!
| Chrome 35 | Unit of Value: MS | ||||||||||||
| 1th time | 2nd time | 3rd time | 4th time | 5th time | 6th time | 7th time | 8th Time | 9th time | 10th time | Average | 10W Secondary Difference value | One-time difference | |
| General Code | 1362 | 1358 | 1379 | 1377 | 1372 | 1411 | 1371 | 1341 | 125W | 1339 | 1366.6 | 888.7 | 0.89μs |
| IE 11 | Unit: MS | ||||||||||||
| 1th time | 2nd time | 3rd time | 4th time | 5th time | 6th time | 7th time | 8th Time | 9th time | 10th time | Average | 10W Secondary Difference value | One-time difference | |
| Normal situation | 2352 | 2332 | 2321 | 2347 | 2342 | 2339 | 2365 | 2373 | 2353 | 2343 | 2346.7 | 861.7 | 0.86μs |
Because of the impact of other software operations and the sequence of the two code runs, the results may not be very rigorous, but personally think it will not affect our conclusion: the WITHstatement in the case is not nested very complex, compared to the general code of the effect of execution efficiency is negligible.
I think the main reason for disabling the WITH statement in the strict mode of ECMAScript 5 is that the WITH statement makes the relationship between the object and the method and the property more ambiguous, which is not conducive to JavaScript getting closer to object-oriented programming.
Cloud-dwelling Community small addendum: Although there is a B-grid, but whether it is easy to read or consider the purpose of performance, many sites are still in the normal way to load.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
