Original link: http://codepen.io/doughensel/blog/10-libraries
Assume:
When we extract code into a block that can be called repeatedly, it hinders the performance of the code. In addition to using native DOM elements. A JS library always forces the browser to find a reference to a block of code to perform the action it should have performed, meaning that 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.
Description: Tools used: Hardware: MacBook pro:os x Browser: Google Chrome,safari,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 <) { runtest (); } else{ Console.log (' Average time: ' + (timeraverage/counter) + ' Ms '); } }
//Execute test function
runtest ();
A quick look at this basic test code: The Window.onload event is triggered after all the DOM has been loaded. The Runtest () function is a block of code that tracks elapsed time and performs 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: ' + (timeraverage/counter) + ' MS ');}}Execute test functionRuntest ();Test Scenario 2: Function expression programming functional programming in this test scenario, we will create a function that returns the DOM element from the document.getElementById (' ID ') based on the passed-in string ID. var $ = function (Elem) {return document.getElementById (elem);
The additional benefit of this function expression is that the programmer does not enter ' getElementById ' every time, when they need to get a reference to an element. Just use the function expression to do it. $ (' 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 ');}}Execute test functionRuntest ();}
Test Scenario 3: Object-oriented programming, objects orientated programming in this scenario, we first create an object that can be extended. When the following code is first called, a new object is initialized, and then we use the DOM element as the value of the ' El ' property of the object. (function () {var $ = function (elem) { if (! ( This instanceof $)) { return new $ (elem); }This.el = document.getElementById (elem);
};
window.$ = $;
}) (); The invocation of a method in this test scenario is much like the invocation of a method in a function expression, just a ". 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 <) {Runtest (); } else{Console.log (' Average time: ' + (timeraverage/counter) + ' MS '); }}//Execute Test function runtest ();}
Test Scenario four: use jquery. jquery files have been saved to a local file to avoid any potential delays when downloading jquery files 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**/$ (' #id '). CSS (' background-color ', ' Blue ');} timerend = new Date ()-timer; Console.log (timerend + ' MS '); counter++; Timeraverage + = Timerend; if (Counter <) {Runtest (); } else{Console.log (' Average time: ' + (timeraverage/counter) + ' MS '); }}//Execute Test function runtest ();}
Test Result: Scenario 1:
Scenario 2:
Scenario 3:
Scenario 4:
Native JS has the best performance, function expressions and object-oriented functions, and jquery finally. However, in the first three test scenarios, the DIV does not turn blue, only jquery makes the div element discolored. The reason may be that the JS execution engine of the browser and the UI rendering engine are mutually exclusive, and the JS code does not render the interface when it is executed, and jquery may be optimized in this respect. I am not very understanding, but also please Daniel guidance.
Conclusion: Native JS executes the fastest, the function expression and the object-oriented programming method are very close to the native JS. It is true that jquery was doomed from the start. Because in other test scenarios, only a few pieces of code are used, jquery uses the entire jquery library. In addition to the DOM node selection, jquery also uses the jquery CSS method to change the element style, which adds a lot of extra work. In addition, we have learned that the shortest, executable code is the most efficient. Although native JS is a faster choice, learning to encapsulate and program with object-oriented thinking can make the process of writing code more efficient. We should be aware that when we can make our own way to accomplish a goal, whether we should use a very large third-party code base is also done. Third-party code libraries may make it easier to develop your core products, but be aware that they can also affect performance.
Libraries:performance vs. Native JS
