We rarely need to test the performance of our written javascript and we need tools to\u00a0perform this process. We really don’t need any tool for making the performance test as our browser is a performance tester by itself. I wrote a little javascript in which the performance of our javascript can be tested to a level.<\/p>\n
Here’s the code:<\/p>\n
\/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @package JS_Performance\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\nvar performance_array = [];\r\nvar cycles = 10; \/\/ makes the average out of this number\r\nvar runs = 100; \/\/ number of times loop should process\r\n\r\nfunction function1() {\r\n\t\/\/ write your code here\r\n}\r\n\r\nfunction function2() {\r\n\t\/\/ write your code here\r\n}\r\n\r\nvar functions = ['function1', 'function2']; \/\/ Make an entry of the functions defined above\r\n\r\nfunctions.forEach(function (argument) {\r\n\tvar func = eval(\"argument\") + '();'; \/\/ manage the function to a variable\r\n\tvar timestamp = 0;\r\n\tfor (var i = 0; i < cycles; i++) {\r\n\t\tvar pre = performance.now();\r\n\t\tfor (var j = 0; j < runs; j++) {\r\n\t\t\teval(func); \/\/ runs the function\r\n\t\t}\r\n\t\tvar now = performance.now();\r\n\t\tvar time_in_cycle = now - pre;\r\n\t\ttimestamp += time_in_cycle;\r\n\t}\r\n\tperformance_array[argument] = timestamp\/cycles;\r\n});\r\nconsole.log(performance_array);<\/pre>\nThis code can be used to make a test to some extent and to an accuracy but they are not totally accurate.<\/p>\n
I have used the code to make a test over, whether to get an element from its ID or traversing it from its parent. This code can give you an idea of how to use.<\/p>\n
<!-- \r\n\/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @package JS_Performance\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n -->\r\n<div>\r\n\t<button id=\"button\" onclick=\"calculate();\">button<\/button>\r\n<\/div>\r\n<script type=\"text\/javascript\" src=\"jquery-2.1.1.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\nvar performance_array = [];\r\nvar cycles = 10; \/\/ makes the average out of this number\r\nvar runs = 100; \/\/ number of times loop should process\r\n\r\nfunction function1() {\r\n\t$('#button');\r\n}\r\n\r\nfunction function2() {\r\n\t$('div button');\r\n}\r\n\/\/ you can add more functions here\r\n\r\nvar functions = ['function1', 'function2']; \/\/ Make an entry of the functions defined above\r\n\r\nfunction calculate() {\r\n\tfunctions.forEach(function (argument) {\r\n\t\tvar func = eval(\"argument\") + '();'; \/\/ manage the function to a variable\r\n\t\tvar timestamp = 0;\r\n\t\tfor (var i = 0; i < cycles; i++) {\r\n\t\t\tvar pre = performance.now();\r\n\t\t\tfor (var j = 0; j < runs; j++) {\r\n\t\t\t\teval(func); \/\/ runs the function\r\n\t\t\t}\r\n\t\t\tvar now = performance.now();\r\n\t\t\tvar time_in_cycle = now - pre;\r\n\t\t\ttimestamp += time_in_cycle;\r\n\t\t}\r\n\t\tperformance_array[argument] = timestamp\/cycles;\r\n\t});\r\n\tconsole.log(performance_array);\r\n}<\/pre>\nHere, in this code, I’ve used the jQuery to get the element and for traverse down the child. This will give you an idea of the\u00a0performance of your code. Hope, it will help you out.<\/p>\n","protected":false},"excerpt":{"rendered":"