Libraries: Performance vs. Native JS, librariesnative
Link: http://codepen.io/doughensel/blog/10-libraries
Hypothesis:
When we extract code into a reusable block, it will hinder the code performance. In addition to using native DOM elements. A js library always forces the browser to find a reference to a piece of code to execute the action that should have been executed, that is, the JS library always performs the action by referencing the object. For this performance comparison, I ran a quick performance test with several different codes and recorded the changes in the results.
Note: The tool used: hardware: MacBook Pro: OS X Browser: Google Chrome, Safari, and FireFox
Code/test scenario window. onload = function () {var counter = 0;
Var timerAverage = 0;
Function runTest () {var timerEnd;
Var timer = new Date ();
For (var I = 0, x = 99999; I <= x; I ++) {/** test case **/} timerEnd = new Date ()-timer;
Console. log (timerEnd + 'ms ');
Counter ++;
TimerAverage + = timerEnd;
If (counter <100) {runTest ();} else {console. log ('average time: '+ (timerAverage/counter) + 'ms ');}}
// Execute the test function
RunTest ();
} Quickly browse the basic test code: the window. onload event will be triggered after all the DOM is loaded. The runTest () function is a code block that traces the running time and executes traversal.
Test scenario 1: Native JavaScript
Window. onload = function () {var counter = 0; var timerAverage = 0; function runTest () {var timerEnd; var timer = new Date (); for (var I = 0, x = 99999; I <= x; I ++) {/** test case **/document. getElementById ('id '). style. color = 'Blue ';} timerEnd = new Date ()-timer; console. log (timerEnd + 'ms'); counter ++; timerAverage + = timerEnd; if (counter <100) {runTest ();} else {console. log ('average time: '+ (timerAver Age/counter) + 'ms') ;}// run the test function runTest ();} test scenario 2: function expression Programming Functional Programming in this test scenario, we will create a function to return the document according to the input string id. the DOM element obtained by getElementById ('id. Var $ = function (elem) {return document. getElementById (elem );
}; The additional benefit of this function expression is that programmers do not input 'getelementbyid' every time when they need to get a reference to an element. You only need to use this function expression. $ ('Id'). style. color = 'blue ';
Test code: var $ = function (elem) {return document. getElementById (elem) ;}; window. onload = function () {var counter = 0; var timerAverage = 0; function runTest () {var timerEnd; var timer = new Date (); for (var I = 0, x = 99999; I <= x; I ++) {/** test case **/$ ('id '). style. color = 'Blue ';} timerEnd = new Date ()-timer; console. log (timerEnd + 'ms'); counter ++; timerAverage + = timerEnd; if (counter <100) {runTest ();} else {console. log ('average time: '+ (timerAverage/counter) + 'ms') ;}// run the test function runTest ();}
Test scenario 3: Object-oriented Programming. In this scenario, we first create an Object that can be extended. When the following code is called for the first time, a new object is initialized, And the DOM element is used as the value of the 'El' attribute of the object. (Function () {var $ = function (elem) {if (! (This instanceof $) {return new $ (elem);} this. el = document. getElementById (elem );
};
Window. $ =$;
}) (); In this test scenario, method calls are much like method calls in a function expression, but they only use '. el '. $ ('Id'). el. style. color = 'blue ';
Test code: (function () {var $ = function (elem) {if (! (This instanceof $) {return new $ (elem);} this. el = document. getElementById (elem) ;}; window. $ =$ ;}) (); window. onload = function () {var counter = 0; var timerAverage = 0; function runTest () {var timerEnd; var timer = new Date (); for (var I = 0, x = 99999; I <= x; I ++) {/** test case **/$ ('id '). el. style. color = 'Blue ';} timerEnd = new Date ()-timer; console. log (timerEnd + 'ms'); counter ++; timerAverage + = timerEnd; if (counter <100) {runTest ();} else {console. log ('average time: '+ (timerAverage/counter) + 'ms') ;}// run the test function runTest ();}
Test scenario 4: Use jQuery. The jQuery file has been saved to a local file to avoid any potential latency when downloading the jQuery file from the server. Test code: window. onload = function () {var counter = 0; var timerAverage = 0; function runTest () {var timerEnd; var timer = new Date (); for (var I = 0, x = 99999; I <= x; I ++) {/** test case **/examples ('background id'background .css ('background-color', 'Blue ');} timerEnd = new Date ()-timer; console. log (timerEnd + 'ms'); counter ++; timerAverage + = timerEnd; if (counter <100) {runTest ();} else {console. log ('average time: '+ (timerAverage/counter) + 'ms') ;}// run the test function runTest ();}
Test result: Scenario 1:
Scenario 2:
Scenario 3:
Scenario 4:
Native JS has the best performance, with function expressions followed by Object-Oriented functions, followed by jQuery's final. However, in the first three test scenarios, neither div nor div turns blue. Only jQuery changes the color of the div element. The reason may be that the browser's js execution engine and ui rendering engine are mutually exclusive. js Code does not render the interface during execution, and jQuery may have been optimized in this regard. I am not very familiar with it. Please instruct me.
Conclusion: The execution speed of native JS is the fastest, and the execution efficiency of function expressions and object-oriented programming methods is very close to that of native JS. It is true that jQuery was doomed to its results from the very beginning. In other test scenarios, only a few pieces of code are used. jQuery uses the entire jQuery library. In addition to DOM node selection, jQuery also uses the jQuery css method to change the element style, which adds a lot of extra work. We also learned that the shortest and executable code are the most efficient. Although native js is a faster choice, learning to encapsulate it and programming with object-oriented thinking can make the code writing process more efficient. We should note whether a large third-party code library should be used to accomplish a goal in our own way. Third-party code libraries may make it easier for you to develop core products, but note that they may also affect performance.
