// API callback
relpostimgcuplik({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647"},"updated":{"$t":"2021-06-05T02:21:21.316+05:30"},"category":[{"term":"HTML5"},{"term":"javascript"},{"term":"WebApplications"},{"term":"Upload"},{"term":"Websocket"},{"term":"stream"},{"term":"Webworker"},{"term":"Client-side"},{"term":"JQuery"},{"term":"webrtc"},{"term":"Drag and Drop"},{"term":"Storage"},{"term":"video"},{"term":"media"},{"term":"media source api"},{"term":"AMD"},{"term":"Custom Elements"},{"term":"Index DB"},{"term":"MVC"},{"term":"PHP"},{"term":"RequireJs"},{"term":"local storage"},{"term":"BackboneJs"},{"term":"Gamification"},{"term":"Web Audio"},{"term":"websql"}],"title":{"type":"text","$t":"Konga Raju"},"subtitle":{"type":"html","$t":"Web Developer and Designer"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/-\/AMD?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/search\/label\/AMD"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"2"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"50"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2614827248665236361"},"published":{"$t":"2016-05-29T11:26:00.001+05:30"},"updated":{"$t":"2016-08-22T12:03:52.059+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AMD"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Custom Elements"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Index DB"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"local storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"MVC"},{"scheme":"http://www.blogger.com/atom/ns#","term":"RequireJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"101 Javascript performance improvement techniques"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"111\" src=\"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s320\/aw-snap-google-chrome.gif\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Ch2\u003EVariables and Declarations\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E1. Variables much better than array and objects\u003C\/h4\u003EJavascript is untyped language but the performance improvement starts from declaring variables and accessing them. Variables and literal values faster than object properties and array items look ups.         \u003Cbr \/\u003E\u003Cdiv\u003EDeclaring variables and accessing them             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar user_email = 'xxx@xx.com';\u003Cbr \/\u003E\u003Cbr \/\u003Econsole.log(user_email); \/\/xxx@xx.com\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003EDeclaring objects with properties             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar user = {email: 'xxx@xx.com'};\u003Cbr \/\u003E\u003Cbr \/\u003Econsole.log(user.email); \/\/xxx@xx.com\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E2. let is faster than var in function scope\u003C\/h4\u003Elet is block scoped and var is block scoped. let clears the memory when it is not needed, var exists all over function scope, so let always faster than var when there are different blocks. let solves the closures problem too.\u003Cbr \/\u003E\u003Cdiv\u003EDeclaring variables with var and let             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Efor(var i=0;i\u0026lt;length;i++){...}\u003Cbr \/\u003Efor(let i=0;i\u0026lt;length;i++){...}\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/let-vs-var-definition\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E3. Make sure that there is no native method for the same job\u003C\/h4\u003EThe same job you can do using native method and in your way of implmentation. if you are going to implement the functionality, take time to find native method can do the work. Native methods can give you better performance.\u003Cbr \/\u003E\u003Cdiv\u003ESample for using native methods             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar arr = [];\u003Cbr \/\u003Earr.push(1);\u003Cbr \/\u003Earr.pop();\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E4. Combine the variable declarations\u003C\/h4\u003EDeclaring the variables can also be optimizable. All the declarations should be in one statements, this handle the memory allocation for all at one time.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar foo,\u003Cbr \/\u003E    blah,\u003Cbr \/\u003E    flag;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E5. Assign value in creation time, updations costs more.\u003C\/h4\u003Eif you seperate creations and value assignment of variables that would be a bad design. Assign the default values at the time of creations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar foo = \"str\",\u003Cbr \/\u003E    blah = 10,\u003Cbr \/\u003E    flag = false;\u003Cbr \/\u003E        \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E6. Literals executes faster than Objects.\u003C\/h4\u003ELiteral notation executes faster than object notation when declaring variables with datatype constructors.\u003Cbr \/\u003E\u003Cdiv\u003EDeclaring a variable in literal notation             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = 'string';\u003Cbr \/\u003E            var obj = {a:1,b:2};\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003EDeclaring variables using datatype constructors             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = new String();\u003Cbr \/\u003E            var arr = new Array();\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E7. For toggling purpose use 0\/1 instead of Boolean type.\u003C\/h4\u003EUsing 0\/1 helps to increase the performance, the value numeric values always better than boolean datatype.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var flag = 0;\u003Cbr \/\u003E            \u003Cbr \/\u003E            function toggleFlag(val){\u003Cbr \/\u003E                if(val){\u003Cbr \/\u003E                    val = 0;\u003Cbr \/\u003E                }else{\u003Cbr \/\u003E                    val = 1;\u003Cbr \/\u003E                }\u003Cbr \/\u003E                return val;\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E8. Do not use concat for string concatenation, use '+'\u003C\/h4\u003EFor concatenation use \"+\" and the native method concat doesn't perform well, when considering the performance.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"this\";\u003Cbr \/\u003E            str += \"is\";\u003Cbr \/\u003E            str += \"awesome\";\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E9. \u003Ccode class=\"language-javascript\"\u003EparseInt\u003C\/code\u003E can be replaced with \u003Ccode class=\"language-javascript\"\u003E~~(1,'12.5')\u003C\/code\u003E\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EparseInt\u003C\/code\u003E job can be done by the statement ~~(1,numericString) with better optimization.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E                var numberStr = '12.5';\u003Cbr \/\u003E                parseInt(numberStr); \/\/ 12.5\u003Cbr \/\u003E                ~~(1,numberStr); \/\/12.5\u003Cbr \/\u003E                \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E10. Compound assignment of \u003Ccode class=\"language-javascript\"\u003Elet\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Econst\u003C\/code\u003E give bad results\u003C\/h4\u003EThis is the issue with compiler, the function containing \u003Ccode class=\"language-javascript\"\u003Elet\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Econst\u003C\/code\u003E are not optimizable.\u003C\/div\u003E\u003Ch2\u003EArrays\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E11. Avoid multi-dimensional arrays\u003C\/h4\u003EArray items lookup bit costly, in case of multi-dimentional arrays that delivers not good results. Multi-dimentional array look up goes through each dimension every item comparison. \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var maArr = [[1,2,3],[4,5,6],['a','b','c']];\u003Cbr \/\u003E            mArr[2][0] \/\/ returns 'a' \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E12. Use array native methods for doing operations\u003C\/h4\u003EAs I discussed in early steps, I always recommend a native method in case of array manipulations, as most developers not aware of all methods. In case of array manipulations look ups and index handling are heavy operations, so better to go with native methods to perform the operations as much as possible.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E13. For simple array findings use \u003Ccode class=\"language-javascript\"\u003EindexOf.\u003C\/code\u003E\u003C\/h4\u003Eoh, yah! \u003Ccode class=\"language-javascript\"\u003EindexOf.\u003C\/code\u003E, you are about to find the existence of an item in simple array, user it. Finding the existence by looping through all the items in the array is bad for simple arrays.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var simpleArr = [1,2,3,4];\u003Cbr \/\u003E            function find(arr, item){\u003Cbr \/\u003E                return arr.indexOf(item) !== -1; \u003Cbr \/\u003E            }\u003Cbr \/\u003E            find(simpleArr,3); \/\/ returns true;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E14. Use binary search for finding elements in array\u003C\/h4\u003EWhy binary search? in case of complex arrays binary search gives the difference compared to other techniques.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsfiddle.net\/aryzhov\/pkfst550\/\"\u003EjsFiddle Demo\u003C\/a\u003E            \u003Ca href=\"https:\/\/jsperf.com\/searching-javascript-arrays-with-a-binary-search\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E15. Arrays are faster than objects\u003C\/h4\u003EArray look ups and index manipulations are faster than object properties manipulations, array manipulations deals with index but object properties needs lot of comparisons.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,'c'];\u003Cbr \/\u003E            var obj = {foo:1,blah:2};\u003Cbr \/\u003E            arr[0];\u003Cbr \/\u003E            obj[blah];\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/array-vs-object-performance\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E16. Arrays with holes in it gives much impact on objective\u003C\/h4\u003EArray should be well defined and need care in manipulations. Holes with in a array has the impact on performance and the manipulations needs high computations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,3];\u003Cbr \/\u003E            arr[4] = 'a';\u003Cbr \/\u003E            \/\/wow you did it, you created an array with holes.\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E17. Array \u003Ccode class=\"language-javascript\"\u003Ejoin\u003C\/code\u003E faster than string concatenation\u003C\/h4\u003Eyes, it's true. Array join performs well in case of concatenating strings, thats proven by the performance benchmarks. its seems to be long way but it makes us to reach objective.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str1 = 'am';\u003Cbr \/\u003E            var str2 = 'awesome';\u003Cbr \/\u003E            var arr = [];\u003Cbr \/\u003E            arr.push(str1);\u003Cbr \/\u003E            arr.push(str2);\u003Cbr \/\u003E            arr.join(); \/\/ \"am awesome\"\u003Cbr \/\u003E            str1 + 'I' + str2; \/\/ \"am I awesome\"\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/string-concat-vs-array-join-10000\/15\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E18. Use \u003Ccode class=\"language-javascript\"\u003Esplice(0,length)\u003C\/code\u003E to clear the array\u003C\/h4\u003EHow do you clear an array, are you assigning new empty array to it, that's not good way. Array method \u003Ccode class=\"language-javascript\"\u003Esplice\u003C\/code\u003E can work better in this case.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3];\u003Cbr \/\u003E            arr.splice(0,arr.length); \/\/ arr =\u0026gt; []\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/array-destroy\/151\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E19. Typed Arrays are faster than native arrays\u003C\/h4\u003ETyped arrays performs lot better than normal javascript array becuase typed array views are like single type arrays.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E             var s_tyarrayUint8 = new Uint8Array(256 * 256 * 4);\u003Cbr \/\u003E            var s_tyarrayUint32 = new Uint32Array(256 * 256);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/native-vs-typed-js-array-speed\/29\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E\u0026nbsp;\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Typed_arrays\" target=\"_blank\"\u003EMDN\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E20. \u003Ccode class=\"language-javascript\"\u003EArray.forEach\u003C\/code\u003E wont give you much better results\u003C\/h4\u003EThe array native looping method forEach needs functions executions for each item in the array, so its always a bad choice for iterating through all the items in array. Use for loop as an alternative for it.\u003Cbr \/\u003E\u003Cdiv\u003EIterating aray items with forEach             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3,4];\u003Cbr \/\u003E            arr.forEach(function(){\/\/ doing something});\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003EIterating using for             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3,4];\u003Cbr \/\u003E            \u003Cbr \/\u003E            for(var i=0;i\u0026lt;arr.length;i++){\u003Cbr \/\u003E                \/\/some code\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EObjects\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E21. \u0026gt;Construct objects instead of array when u need to do more find operations\u003C\/h4\u003Ewhen you need more find operations for set of items, constructing object will help you and performs well.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var users = {axorg :{id:'axorg', name:'George'},\u003Cbr \/\u003E            byorg:{id:'byorg', name:'John'}};\u003Cbr \/\u003E            users['byorg']; \/\/ easiest way to find user object using id\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E22. Use \u003Ccode class=\"language-javascript\"\u003EObject.keys()\u003C\/code\u003E to get list of keys in object\u003C\/h4\u003ETo get list of keys use the native method \u003Ccode class=\"language-javascript\"\u003EObject.keys()\u003C\/code\u003E because looping through all object properties costs more computations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {a:1,b:2};\u003Cbr \/\u003E            Object.keys(obj); \/\/ return ['a','b']\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E23. Use property check instead of \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E\u003C\/h4\u003EThough \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E its own significance, doing property check give you advantage over \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var task = [{name:\"do1\",selected:true},{name:\"do2\"}];\u003Cbr \/\u003E            var selectedTasks = 0;\u003Cbr \/\u003E            for(var i=0;i\u0026lt;task.length;i++){\u003Cbr \/\u003E                if(task[i].selected){\u003Cbr \/\u003E                    selectedTasks++;\u003Cbr \/\u003E                }\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E24. Avoid \u003Ccode class=\"language-javascript\"\u003EObject.create()\u003C\/code\u003E instead use \u003Ccode class=\"language-javascript\"\u003Enew\u003C\/code\u003E\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EObject.create()\u003C\/code\u003E have many advantages over \u003Ccode class=\"language-javascript\"\u003Enew\u003C\/code\u003E still its not good to go with it, performance petrices revealed that.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E             function myClass(){\u003Cbr \/\u003E                \/\/class definition\u003Cbr \/\u003E             }\u003Cbr \/\u003E             var klass = new myClass;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/obj-create-vs-new\/4\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E25. Make it \u003Ccode class=\"language-javascript\"\u003Eundefined\u003C\/code\u003E instead of using \u003Ccode class=\"language-javascript\"\u003Edelete\u003C\/code\u003E to clear the properties from object\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003Edelete\u003C\/code\u003E leads to object manipulation, but making a property \u003Ccode class=\"language-javascript\"\u003Eundefined\u003C\/code\u003E wont cause for object recustruction.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {prop1:1,prop2:2};\u003Cbr \/\u003E            delete obj.prop1; \/\/ don't do it.\u003Cbr \/\u003E            obj.prop1 = undefined; \/\/ its better\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E26. \u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E costs more than direct property assignment\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E it has so many features for controlling the property behaviour that makes the performance down, unless it is a public property don't define properties using \u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {};\u003Cbr \/\u003E            obj.prop1 = 1;\u003Cbr \/\u003E            obj.prop2 = 2;\u003Cbr \/\u003E            Object.defineProperty(obj,'prop3',{value:4});\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EStatements and Expressions\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E27. Do not use \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E statement.\u003C\/h4\u003EA well known proverb \"do not use \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E\", we can consider as one of the dangarous things in javascript. By using it you won't get much benfit but you will be in danger in case of missing properties in passed object. It updates global variabels if there are no properties in passed object.\u003Cbr \/\u003E\u003Cdiv\u003Eupdating the object using \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E            \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            with (myObj) {\u003Cbr \/\u003E    foo = true;\u003Cbr \/\u003E    blah = true;\u003Cbr \/\u003E}\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003Edoing the same thing             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var objCopy = myObj;\u003Cbr \/\u003E            objCopy.foo = true;\u003Cbr \/\u003E            objCopy.blah = true;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E28. Do not use \u003Ccode class=\"language-javascript\"\u003Eeval\u003C\/code\u003E\u003C\/h4\u003EHere comes the evil of the javascript. \u003Ccode class=\"language-javascript\"\u003Eeval\u003C\/code\u003E opens a hole to support attackers. its executes the code slowly.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            eval(\"alert('hahahaha')\"); \/\/see the evil laugh\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E29. Clear the timers, once the your tasks are finished\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EclearInterval\u003C\/code\u003E help you to clear the interval in javascript. what happens to the uncleared intervals, they runs forever.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var interval, count = 0;\u003Cbr \/\u003E            interval = setInterval(function(){\u003Cbr \/\u003E            if(count == 1000) clearInterval(interval);\u003Cbr \/\u003E            count++;},100);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E30. Avoid animations with JavaScript\u003C\/h4\u003EDo not play with javascript variables, even though we have powerful engines making our main thread busy leads to unresponsive dialog or huge amount of memory occupation.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E31. Do not hit userAgent maximum space allocated for localStorage\/sessionStorage\u003C\/h4\u003EIf the localStorage space reaching to the limit set by user agent and you are still trying to make operations on localStorage it always goes slow.\u003Cbr \/\u003E\u003Cdiv\u003E\/\/pushing records to localStorage             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            for(var i;i\u003C10000 code=\"\" generaterecords=\"\" guid=\"\" i=\"\" localstorage.setitem=\"\"\u003E\u003C\/10000\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E32. Limit number of requests to localStorage\u003C\/h4\u003ENumber requests to persistent storage space proportionally equals to performance impact.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/jsperf.com\/localstorage2\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E33. Comments need space\u003C\/h4\u003EThough comments dont have much impact on performance but comments increases the files size that leads to increase load time, so its better to remove comments in production.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E34. Make use of threading in Javascript\u003C\/h4\u003EDo the heavy operations in separate thread, Web Workers help you to implement this in Javascript. WebWorkers creates seperate threads in javascript.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var myThread = new WebWorker(url);\u003Cbr \/\u003E            myThread.onmessage = function(){\u003Cbr \/\u003E                \/\/receives msgs \u003Cbr \/\u003E            };\u003Cbr \/\u003E            myThread.postMessage(msg);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E35. Use minimum number of web workers\u003C\/h4\u003EThere is a limit to number of webworker instances for same origin. \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E36. Do not Send and Receive large amounts of data.\u003C\/h4\u003ESending or Recieving data objects creates copies of the objects, in case of large amounts of data passing threads needs more momery allocations that would slowdown execution.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E37. Websockets can give boost to your application\u003C\/h4\u003EImplementing websockets let you get rid of http overhead, this technique can make you to build responsive realtime web applicatios.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E38. Use \u003Ccode class=\"language-javascript\"\u003ErequestAnimationFrame\u003C\/code\u003E for better performance in using intervals.\u003C\/h4\u003EIf you are going to large operations on client-side like animations, iterating in frequent intervals, \u003Ccode class=\"language-javascript\"\u003ErequestAnimationFrame\u003C\/code\u003E helps to give smooth presentation without blocking the thread.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003EreqAF = window.requestAnimationFrame;\u003Cbr \/\u003E\u003Cbr \/\u003E  var degrees = 0;\u003Cbr \/\u003E  function updateSel(timestamp) {\u003Cbr \/\u003E    document.querySelector('#foo').style.webkitTransform = \"rotate(\" + degrees + \"deg)\";\u003Cbr \/\u003E    console.log('updated to degrees ' + degrees);\u003Cbr \/\u003E    degrees = degrees + 1;\u003Cbr \/\u003E    reqAF(updateSel);\u003Cbr \/\u003E  }\u003Cbr \/\u003E  reqAF(updateel);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E39. Give the preference to native in case of base64 encoding or decoding \u003Ccode class=\"language-javascript\"\u003Eatab\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ebtoa.\u003C\/code\u003E\u003C\/h4\u003EThe best native and performant way for encoding and decoding data to and from base64. \u003Ccode class=\"language-javascript\"\u003Eatab\u003C\/code\u003E will give you the actual data from base64 encoded data. \u003Ccode class=\"language-javascript\"\u003Ebtoa.\u003C\/code\u003E gives you base64 encoded data of the passed data.\/p\u0026gt;             \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"\"RK_Awesome\";\u003Cbr \/\u003E            var bStr = btoa(str);\/\/returns base64 data\u003Cbr \/\u003E            var aStr = atob(bStr);\/\/returns actual data\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/btoa-vs-third-party-base64-encoder-5\/6\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E            \u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ERegular Expressions\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E40. \u003Ccode class=\"language-javascript\"\u003Etest\u003C\/code\u003E is faster than \u003Ccode class=\"language-javascript\"\u003Eexec\u003C\/code\u003E when using regular expressions\u003C\/h4\u003EUsually we will go with \u003Ccode class=\"language-javascript\"\u003Etest\u003C\/code\u003E to verify the regExp but \u003Ccode class=\"language-javascript\"\u003Eexec\u003C\/code\u003E always performs better than \u003Ccode class=\"language-javascript\"\u003Etext\u003C\/code\u003E.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"hello world!\";\u003Cbr \/\u003Evar result = \/^hello\/.test(str);\u003Cbr \/\u003Econsole.log(result); \/\/ true\u003Cbr \/\u003Evar result = \/^hello\/.exec(str);\u003Cbr \/\u003Econsole.log(result); \/\/returns matches array\u003Cbr \/\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/regular-expressions-test-vs-exec\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E41. \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E is faster then \u003Ccode class=\"language-javascript\"\u003Ematch\u003C\/code\u003E\u003C\/h4\u003EHere we have two string methods takes regular expression and finds the in the content \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ematch\u003C\/code\u003E, which can be comparable, but the \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E wins.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"hello world!\";\u003Cbr \/\u003E            var re = \/^hello\/;\u003Cbr \/\u003Evar result = str.search(re);\u003Cbr \/\u003Econsole.log(result); \/\/ index of first match or -1\u003Cbr \/\u003Evar result = str.match(re);\u003Cbr \/\u003Econsole.log(result); \/\/returns matches array or null\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/regular-expressions-search-vs-match\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E42. \u003Ccode class=\"language-javascript\"\u003Ereplace\u003C\/code\u003E works well compared to \u003Ccode class=\"language-javascript\"\u003Esplit\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ejoin\u003C\/code\u003E.\u003C\/h4\u003EAnother string method performs better than a well used technique. Prefer to use \u003Ccode class=\"language-javascript\"\u003Ereplace\u003C\/code\u003E for replacing a string in other string.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"Hello world\";  \u003Cbr \/\u003E            str.replace(\"Hello\", \"Google\");\/\/ good to go\u003Cbr \/\u003E            str.split(\"Hello\").join(\"Google\");\/\/ bad practice\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/replacing-with-regular-expressions\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EControl statements\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E43. Avoid \u003Ccode class=\"language-javascript\"\u003Eelse-if\u003C\/code\u003E, use \u003Ccode class=\"language-javascript\"\u003Eswitch\u003C\/code\u003E instead.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E44. Use \u003Ccode class=\"language-javascript\"\u003E!!\u003C\/code\u003E if you are checking non-Boolean values.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E45. Strict comparison slower than value comparison.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E46. if-else faster than ternary.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/ternary-vs-simple-if-else\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E47. Do not exceed your \u003Ccode class=\"language-javascript\"\u003Eswitch\u003C\/code\u003E cases more than 128.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E48. \u003Ccode class=\"language-javascript\"\u003Etypeof\u003C\/code\u003E is much faster than \u003Ccode class=\"language-javascript\"\u003EinstanceOf.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/instanceof-vs-typeof-function\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E49. Give first preference to boolean conditions when you are checking multiple conditions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E50. Write fail proof code and avoid \u003Ccode class=\"language-javascript\"\u003Etry\/catch.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E51. \u003Ccode class=\"language-javascript\"\u003Etry\/final\u003C\/code\u003E also gives same impact like \u003Ccode class=\"language-javascript\"\u003Etry\/catch\u003C\/code\u003E put them in a function and call them to use\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ELoops\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E52. Avoid \u003Ccode class=\"language-javascript\"\u003Efor-in\u003C\/code\u003E loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E53. Avoid \u003Ccode class=\"language-javascript\"\u003Efor-of\u003C\/code\u003E loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E54. Mix conditions with control variables when using loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E55. Use decrements instead of increment if possible.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E56. Use \u003Ccode class=\"language-javascript\"\u003Ebreak\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Econtinue.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E57. Long Running Scripts.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EFunctions\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E58. Use closures.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E59. Apply closure instead of \u003Ccode class=\"language-javascript\"\u003Ebind\u003C\/code\u003E.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E60. Use \u003Ccode class=\"language-javascript\"\u003Ecall\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Eapply\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Ebind\u003C\/code\u003E when binding or calling the functions to avoid correct this.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E61. Use \u003Ccode class=\"language-javascript\"\u003Ecall\u003C\/code\u003E instead of \u003Ccode class=\"language-javascript\"\u003Eapply.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E62. Create instance instead of creating object.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E63. Creating instance with new better than calling a function.\u0026nbsp;\u003Ca href=\"https:\/\/jsperf.com\/prototype-vs-closures\/20\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E64. Return direct value not the reference.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E65. Do not create anonymous functions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E66. Pass less arguments to the function.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E67. passing objects, arrays, dates are better than strings, boolean values\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E68. Prototype methods significantly faster then class methods.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E69. Function expression slower than function declaration.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/function-declaration-vs-function-expression\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E70. Never return arguments array or reference of it. it causes for memory leak. copy the arguments to a new array and return if you want to return.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E71. Don't try to manipulate arguments object or create a variable with arguments name.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E72. Returning a value always faster than implementing callback.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E73. Don't touch \u003Ccode class=\"language-javascript\"\u003E__proto__\u003C\/code\u003E in your function declaration.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E74. get and set declarations makes the functions unoptimizable.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E75. Functions have debugger statement never think about performance.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E76. Avoid recursions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E77. Native promises faster than callbacks.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/promise-vs-callback\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EDOM\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E78. Do not use global object directly, use references to those objects when you are doing multiple operation using the same object.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E79. Use arrays instead of HTML Collection objects.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E80. Avoid DOM Manipulation.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E81. Do not change styles directly, deal with classes instead.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E82. \u003Ccode class=\"language-javascript\"\u003EClassName\u003C\/code\u003E give better results than \u003Ccode class=\"language-javascript\"\u003EClassList.\u0026nbsp;\u003Ca href=\"https:\/\/jsperf.com\/classlist-versus-classname\/2\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E83. Batch your DOM changes.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E84. Less DOM gives you much better performance.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E85. Separate the DOM creation and adding.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E86. Prefer to load DOM on demand.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E87. Load the scripts after DOM load.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E88. Compare nodes not the attributes\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E89. Better to use \u003Ccode class=\"language-javascript\"\u003Edocument.querySelector\u003C\/code\u003E instead of \u003Ccode class=\"language-javascript\"\u003EElement.querySelector.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E90. Data attribute selectors are slower than CSS selectors.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E91. Attributes faster than \u003Ccode class=\"language-javascript\"\u003Edata-*\u003C\/code\u003E attributes.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E92. Be careful with these things, you may lead to browser favorite dialog. Too much DOM interaction.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EEvent handling\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E93. Be care full with event bindings.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E94. Take extreme care on events fires in less times.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E95. Turn off the events when you are done.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E96. Lock the events with in the scope.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E97. \u003Ccode class=\"language-javascript\"\u003EMouse-up\u003C\/code\u003E event instead of \u003Ccode class=\"language-javascript\"\u003Eclick\u003C\/code\u003E event.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ETransportation and Delivering\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E98. Load dependencies on demand.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E99. Minify your code for production.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E100. Follow AMD pattern for best practices.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E101. Use Caching more.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E102. Use CDNs to load scripts fast.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2614827248665236361\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2016\/05\/101-javascript-performance-improvement.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2614827248665236361"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2614827248665236361"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2016\/05\/101-javascript-performance-improvement.html","title":"101 Javascript performance improvement techniques"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-715588391455989672"},"published":{"$t":"2013-12-30T17:28:00.001+05:30"},"updated":{"$t":"2016-01-28T23:29:43.292+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AMD"},{"scheme":"http://www.blogger.com/atom/ns#","term":"BackboneJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"MVC"},{"scheme":"http://www.blogger.com/atom/ns#","term":"RequireJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Backbone RequireJs module name spacing and application structure."},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EWeb Applications using Backbone and RequireJs produce rich client-applications. Both the open-source libraries are very useful for rapid \u0026nbsp;structured web applications development.\u003Cbr \/\u003E\u003Ch4 style=\"text-align: left;\"\u003EBackbone\u0026nbsp;\u003C\/h4\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/backbonejs.org\/\" target=\"_blank\"\u003EBackbone\u003C\/a\u003E \u0026nbsp;helps you to organize your code properly and will be very helpful and easy when you are reusing it. Basic purpose is to build applications in MVC pattern.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s1600\/backbone.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"215\" src=\"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s400\/backbone.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003ERequireJs\u003C\/h4\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/requirejs.org\/\" target=\"_blank\"\u003ERequireJs\u003C\/a\u003E is a module loader, improve speed and quality and code. It supports to load modules asynchronously. In other words it is for \u0026nbsp;AMD(Asynchronous Module definitions) .\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EThe critical part in building web applications using these libraries is application structure. How to organize modules as well as Models,Collections,Views and Controllers is complex part.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EHere we will go with sample\u0026nbsp;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003Evar App = window.App || {};\u003C\/div\u003E\u003Cbr \/\u003Eapplication should have some global context for that, add status.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.status = {};\u003C\/div\u003E\u003Cbr \/\u003EWorking with Backbone, create Models, Collections, Views and Routers using namespaces.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.Models = {};\u003Cbr \/\u003EApp.Views = {};\u003Cbr \/\u003EApp.Collections = {};\u003Cbr \/\u003EApp.Routers = {};\u003C\/div\u003E\u003Cbr \/\u003EThen, the main part of organizing \u0026nbsp;modules and initializing.\u003Cbr \/\u003E\u003Cbr \/\u003EFor example application contains 3 modules named (users, books , stores), lets construct backbone classes using module naming.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.users = {}; \u0026nbsp;\/\/for users module\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating users class accessible under App using users module name\u003Cbr \/\u003EApp.users.appUsers = new App.Collections.users;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003ESimilarly for construct all the models and collections under respective module naming\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.books = {}; \/\/ books module\u003Cbr \/\u003EApp.stores = {}; \/\/stores module\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003ENext separate all user interface classes and construct using ui part in App.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.ui = {}; \/\/all the applications views\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating books container\u003Cbr \/\u003EApp.ui.BooksContainer = App.Views.BooksMasterView;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003EFinal part of application is controlling application modules. Construct all the router under controllers namespace of App.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.controllers = {};\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating application master router\u003Cbr \/\u003E\u0026nbsp;App.controllers.master = App.Routers.MasterRouter;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003EConclusion\u003C\/h4\u003E\u003Cdiv\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;Applications \u0026nbsp;should expose all parts the body. Global namespacing provides rich interface for building high end applications. Both RequireJs and BackboneJs libraries gives a structured format but using two at a time \u0026nbsp;needs simple attention. The above structural organization of modules in MVC pattern explores Application usage.\u0026nbsp;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/715588391455989672\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/12\/backbone-requirejs-module-name-spacing.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/715588391455989672"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/715588391455989672"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/12\/backbone-requirejs-module-name-spacing.html","title":"Backbone RequireJs module name spacing and application structure."}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s72-c\/backbone.png","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});