// 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\/-\/Webworker?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/search\/label\/Webworker"},{"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":"6"},"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-7729767581795421566"},"published":{"$t":"2014-08-15T12:10:00.000+05:30"},"updated":{"$t":"2016-01-28T23:26:34.156+05:30"},"category":[{"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":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"HTML5 WebSocket File Tranfer"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-size: large;\"\u003EWebsockets Introduction\u003C\/span\u003E\u003C\/h3\u003E\u003Cspan style=\"font-size: large;\"\u003EWebsockets API establish a persistent connection between the client and the server. It provides bi-directional communication, client and server can communicate each other directly, It helps to avoids long polling. Webscokets enables communication between any domain. Several implementations available to use websockets in different languages.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EImplementing file transfer using websockets is complex part, but transfer rate is really high compared to HTTP file transfer. Websocket file transfer gives more features like pause, resume, transfer stats, etc..\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s1600\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"303\" src=\"http:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s400\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EUploading files using websockets\u003C\/h3\u003E\u003Cdiv\u003E\u003Col\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAssign unique id to each file.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ESlice file into chucks as per chuck size using File Slice.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERead the chunk using File Reader.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ESend the each chunk as buffered object using websocket.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAfter receive of chunk acknowledgement from server, send the next chunk.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAt the end of file, send complete message to notify server.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EServer side, on start of each file create file with unique id in temporary folder.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EOn receive of each chuck from client add it to the corresponding file.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003E\u0026nbsp;Send acknowledgement to client on each update.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAfter receive of complete message rename and move it to specified folder.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Ch3 style=\"text-align: left;\"\u003EUploading large files using websockets\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003ELarge file uploading may hang the application, to avoid application hang run file reading and slicing in thread. Threading in javascript can implement using webworkers, So move slicing and reading of file to webworker.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: small;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/7729767581795421566\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/html5-websocket-file-tranfer.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7729767581795421566"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7729767581795421566"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/html5-websocket-file-tranfer.html","title":"HTML5 WebSocket File Tranfer"}],"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:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s72-c\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2762010774913656580"},"published":{"$t":"2013-05-28T11:33:00.000+05:30"},"updated":{"$t":"2015-12-11T17:13:31.510+05:30"},"category":[{"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":"media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media source api"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"HTML5: Recording Audio,Video Streams"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EMediaStreamRecorder API is webRTC API that supports recording streams with getUserMedia or remote streams passed over peerconnection session.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #711; border-radius: 5px; color: white; font-size: 16px; padding: 5px;\"\u003E\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;script language=\"javascript\" type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function onVideoFail(e) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; console.log('webcam fail!', e);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function hasGetUserMedia() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ Note: Opera is unprefixed.\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.mozGetUserMedia || navigator.msGetUserMedia);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (hasGetUserMedia()) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ Good to go!\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; alert('getUserMedia() is not supported in your browser');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; window.URL = window.URL || window.webkitURL;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia \u0026nbsp;= navigator.getUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;navigator.webkitGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.mozGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;navigator.msGetUserMedia;\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var video = document.querySelector('video');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var streamRecorder;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var webcamstream;\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (navigator.getUserMedia) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.getUserMedia({audio: true, video: true}, function(stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; video.src = window.URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; webcamstream = stream;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ \u0026nbsp;streamrecorder = webcamstream.record();\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; }, onVideoFail);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; alert ('failed');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function startRecording() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; streamRecorder = webcamstream.record();\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; setTimeout(stopRecording, 10000);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function stopRecording() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; streamRecorder.getRecordedData(postVideoToServer);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function postVideoToServer(videoblob) {\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var data = {};\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.video = videoblob;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.metadata = 'test metadata';\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.action = \"upload_video\";\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; jQuery.post(\"uploadvideo.php\", data, onUploadSuccess);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function onUploadSuccess() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; alert ('video uploaded');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026lt;video autoplay\u0026gt;\u0026lt;\/video\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;div id=\"webcamcontrols\"\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;button class=\"recordbutton\" onclick=\"startRecording();\"\u0026gt;RECORD\u0026lt;\/button\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\"getRecorderdedData\" return \u0026nbsp;blob that was recorded.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2762010774913656580\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-recording-audiovideo-streams.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2762010774913656580"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2762010774913656580"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-recording-audiovideo-streams.html","title":"HTML5: Recording Audio,Video Streams"}],"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"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-3180473790248372149"},"published":{"$t":"2012-11-17T12:57:00.000+05:30"},"updated":{"$t":"2015-12-23T09:46:51.447+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"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":"PHP"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Websocket-Web RTC Real world Multiuser Demo"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv style=\"text-align: left;\"\u003EWebRTC is one of the emerging technologies to implement video sharing and peer to peer communication. Its really simple that a developer can create video sharing for one to one. Coming to Multiuser conferencing is hard to implement.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"https:\/\/www.webrtc-experiment.com\/RTCMultiConnection\/videoconferencing.html\" target=\"_blank\"\u003EHere is the demo for Websocket - WebRTC Real world Mulit-user Demo\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFor more information regarding WebRTC, WebWorkers and WebSocket, refer my Prev Posts.\u003C\/div\u003E\u003Cbr \/\u003EFurther Readings\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003ELarge file upload as chunks with HTML5\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\"\u003EWeb workers for faster performance\u003C\/a\u003E.\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/html5-websocket-file-manager.html\"\u003EHTML5 Websocket filemanager\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 APIs and features. \u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003C\/ol\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/3180473790248372149\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/websocket-web-rtc-real-world-multiuser.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3180473790248372149"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3180473790248372149"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/websocket-web-rtc-real-world-multiuser.html","title":"Websocket-Web RTC Real world Multiuser Demo"}],"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"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-3810575164139702585"},"published":{"$t":"2012-08-01T16:45:00.000+05:30"},"updated":{"$t":"2016-01-28T23:37:57.121+05:30"},"category":[{"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":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Mastering in HTML5 Webworkers"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cbr \/\u003E\u003Cstyle\u003E      .code2{     box-shadow:1px 1px 4px #777777;     width:100%;     font-weight:600;     font-size:16px;     padding:15px;     border-left: 3px solid green;     border-radius:10px;     overflow: auto;    }    .heading1{     color:green;     text-shadow: 4px 4px 8px #80c297;    }    .heading2{     color: skyblue;     text-shadow: 1px 1px 0px #777;    }    .highlight{     background: e0be94;     font-weight:bold;     border-radius: 5px;     padding:0px 4px;    }    .err{     padding: 20px;     background:e64343l;     color:9c1919;    }    p{     text-align:justify;    }   \u003C\/style\u003E    \u003Cbr \/\u003EOne of the intresting useful feature of \u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E is webworkers. Webworkers are helpful to create responsive and high computational applications. It solves many issues regarding performance of apps and high computations with less resources, we can easily migrate to webworkers to get more performance by implementing apps with webworkers. The blocking of UI and getting the kill pages and Aw,snap massages will no longer exists.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"137\" src=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s400\/aw-snap-google-chrome.gif\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E workers\u003C\/h3\u003Ewebworker specification api allows the authors to run the scripts in background indepandantly without affecting user interface scripts. webworkers runs like thread. computing in webworkers will give high performance to app.    \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003Ewebworker support checking\u003C\/h3\u003EMajor user agents IE10.0,FF3.5+,chrome 4.0+,Safari6.0+,Opera10.6+ supports webworkers. Programatically checking webworker support.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eif(window.Worker)\u003Cbr \/\u003E{\u003Cbr \/\u003E console.log('webworker support');\u003Cbr \/\u003E}  \u003Cbr \/\u003Eelse{\u003Cbr \/\u003E console.log('Oops! no webworker supprt');\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ETypes of webworkers\u003C\/h3\u003EWe have two kinds of workers. They are\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EDedicated workers:\u003C\/span\u003E  it has global access, same for all the documents.\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EShared workers:\u003C\/span\u003E it has ports access, changes with the connection.\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*This part covers dedicated workers and the shared workers are covered in next part.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EDefining worker\u003C\/h3\u003EWe can define the workers in two ways\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003Eexternal workers \u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EInline workers\/embended workers\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EExternal workers\u003C\/h3\u003EDefining workers needs a url to communicate with the script through transferable objects. This example just demonstrate worker initialization.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Evar worker= new Worker('worker_script.js'); \u003Cbr \/\u003E\/\/ This defines worker script path to connect\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ECommunication with worker\u003C\/h3\u003Ewhen postMessage() is called worker handles the data with onmessage() event and it will perform the operations on recieved data. The below code is to send message to worker.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.postMessage(\"Hi this is raju\"); \u003Cbr \/\u003E\/\/this is to send message\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EHandling messages in workers\u003C\/h3\u003EWhen message recieved from main page the onmessage event handles data. This example is to handling messages in workers   \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E ***** worker_script.js *****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage=function(e){\u003Cbr \/\u003E \/\/Handle the messages with event\u003Cbr \/\u003E var data=e.data;\u003Cbr \/\u003E \/\/this is the data recieved from UI\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESending messages from workers\u003C\/h3\u003Epostmessage() is to sending the messages to UI. This code to send message from worker.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eonmessage-function(e){\u003Cbr \/\u003E var data=e.data;\u003Cbr \/\u003E \/\/recieved data\u003Cbr \/\u003E postMessage('This is recieved message'+e.data); \u003Cbr \/\u003E \/\/sending message to UI\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EHandling worker Messages\u003C\/h3\u003Eworker messages are handle in UI using worker onmessage event. The code just handle messages of workers.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E var worker_data=e.data; \u003Cbr \/\u003E \/\/ recieved data from worker\u003Cbr \/\u003E alert(worker_data);\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Handling Errors in workers:\u003C\/h3\u003Eworker returns the error lineno, filename, message. The code displays lineno, filename and message.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.onerror=function(e){\u003Cbr \/\u003Econsole.log( 'ERROR: Line '+ e.lineno+ ' in '+ e.filename+ ': '+ e.message);\u003Cbr \/\u003E}\u003Cbr \/\u003E   \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Finally a simple example of using worker. This Example exibhits how sending messsage to worker and message from worker.\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E **** UI script ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker= new Worker('worker_script.js'); \u003Cbr \/\u003E\/\/ This defines worker script path to connect\u003Cbr \/\u003Eworker.postMessage(\"Hi this is raju\"); \u003Cbr \/\u003E\/\/this is to send message\u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E var worker_data=e.data; \u003Cbr \/\u003E \/\/ recieved data from worker\u003Cbr \/\u003E alert(worker_data);\u003Cbr \/\u003E}\u003Cbr \/\u003Eworker.onerror=function(e){\u003Cbr \/\u003E console.log( 'ERROR: Line '+ e.lineno+ ' in '+ e.filename+ ': '+ e.message);\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003Cbr \/\u003E  \u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage-function(e){\u003Cbr \/\u003E var data=e.data; \u003Cbr \/\u003E \/\/recieved data from UI\u003Cbr \/\u003E postMessage('This is recieved message'+e.data); \u003Cbr \/\u003E \/\/sending message to UI\u003Cbr \/\u003E}\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EStructered way of message passing to workers\/JSON Data handling in workers\u003C\/h3\u003ESuppose you need to handle the multiple computations in the workers for that you need to handle the data in stuctured format i.e; json format.   \u003Cbr \/\u003Elook at the example of handling multiple operations in the workers. This example demonstrates how to handle when multiple messages are sent to worker   \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E **** main page ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker=new Worker('worker_script.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'mult', x : 4, y : 6}));\u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'add', x : 6, y : 9}));\u003Cbr \/\u003Eworker.postmessage('wrong data');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E alert(e.data)\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Efunction addNumbers(x,y) {\u003Cbr \/\u003E     return x + y;\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003Cbr \/\u003Efunction mulNumbers(x,y) {\u003Cbr \/\u003E   return x*y;\u003Cbr \/\u003E}\u003Cbr \/\u003E  \u003Cbr \/\u003Eonmessage = function (event) {\u003Cbr \/\u003E    var data = JSON.parse(event.data);\u003Cbr \/\u003E \u003Cbr \/\u003E    switch(data.op) {\u003Cbr \/\u003E        case 'mult':\u003Cbr \/\u003E        postMessage(mulNumbers(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        case 'add':\u003Cbr \/\u003E        postMessage(addNumbers(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        default:\u003Cbr \/\u003E        postMessage(\"Wrong operation specified\");\u003Cbr \/\u003E    }\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003EHere the code is for sending addition and multiple requests and processing computation in worker then return the result to main page. \u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E workers\/ Embended workers:\u003C\/h3\u003EInline workers can ba added in two ways one is by using \u003Cspan class=\"highlight\"\u003EcreateObjectURL\u003C\/span\u003E and other is script tag type attribute \u003Cspan class=\"highlight\"\u003Eworker\/javascript\u003C\/span\u003E. This example demonstrate how to add inline workers using blob and createObjectURl.\u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Evar bb = new BlobBuilder();\u003Cbr \/\u003Ebb.append(\"onmessage = \u003Cbr \/\u003Efunction(e) \u003Cbr \/\u003E{ \u003Cbr \/\u003E postMessage('Inline worker creation'); \u003Cbr \/\u003E}\");\u003Cbr \/\u003E\u003Cbr \/\u003Evar blobURL = window.URL.createObjectURL(bb.getBlob());\u003Cbr \/\u003E\u003Cbr \/\u003Evar worker = new Worker(blobURL);\u003Cbr \/\u003Eworker.onmessage = function(e) {\u003Cbr \/\u003E  alert(e.data)\u003Cbr \/\u003E};\u003Cbr \/\u003Eworker.postMessage();\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/pre\u003EThe above code initializes BlobBuilder and append it with worker code.\u003Cbr \/\u003EThen it create url for blob.\u003Cbr \/\u003EFinally Initializes the worker with generated URL.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESub workers:\u003C\/h3\u003EDeviding tasks among workers is the easy using subworkers. Here we are taking multiple operations and passing the objects to the main worker and it will divert the calls to subworkers. \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E**** main page ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker=new Worker('worker_script.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'mult', x : 4, y : 6}));\u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'add', x : 6, y : 9}));\u003Cbr \/\u003Eworker.postmessage('wrong data');\u003Cbr \/\u003E\u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E alert(e.data)\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003E  \u003Cbr \/\u003Evar thisworker=this;\u003Cbr \/\u003Evar add = new Worker('subworker1.js');\u003Cbr \/\u003Evar mult= new Worker('subworker2.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eadd.onmessage=function(e){\u003Cbr \/\u003E thisworker.postMessage(e.data);\u003Cbr \/\u003E} \u003Cbr \/\u003E\u003Cbr \/\u003Emult.onmessage=function(e){\u003Cbr \/\u003E thisworker.postMessage(e.data);\u003Cbr \/\u003E} \u003Cbr \/\u003E\u003Cbr \/\u003Ethisworker.onmessage = function (event) {\u003Cbr \/\u003E    var data = JSON.parse(event.data);\u003Cbr \/\u003E \u003Cbr \/\u003E    switch(data.op) {\u003Cbr \/\u003E        case 'mult':\u003Cbr \/\u003E        mult.postMessage(JSON.stringify(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        case 'add':\u003Cbr \/\u003E        add.postMessage(JSON.stringify(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        default:\u003Cbr \/\u003E       thisworker.postMessage(\"Wrong operation specified\");\u003Cbr \/\u003E    }\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** subworker1.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage=function(e) {\u003Cbr \/\u003E var data=JSON.parse(e.data)\u003Cbr \/\u003E    var result= data.x + data.y;\u003Cbr \/\u003E    postMessage(result);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** subworker2.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage = function(e) {\u003Cbr \/\u003E var data = JSON.parse(e.data)\u003Cbr \/\u003E var result = data.x * data.y;\u003Cbr \/\u003E postMessage(result);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003EThe above code simple sends the send the multiple messages to the main thread. Then the processing of cumputation done in subworkers.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ETerminating the webworkers\u003C\/h3\u003ETwo ways you can terminate workers.\u003Cbr \/\u003EFrom app : \u003Cspan class=\"highlight\"\u003Eworker.termiante();\u003C\/span\u003E\u003Cbr \/\u003EFrom worker: \u003Cspan class=\"highlight\"\u003Eself.close();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EWorkers Not have access:\u003C\/h3\u003EThe DOM\u003Cbr \/\u003EThe window object\u003Cbr \/\u003EThe document object\u003Cbr \/\u003EThe parent object\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EImporting scripts in workers\u003C\/h3\u003EimportScripts('Base64.js'); \/\/Single script\u003Cbr \/\u003EimportScripts('Base64.js','FileSaver.js'); \/\/multiple scripts importing\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*DOM based scripts cannot be import\u003Cbr \/\u003E  **After importing total script only worker started\u003Cbr \/\u003E  **imported scripts errors should be handled\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Worker specific classes\u003C\/h3\u003EFileReaderSync to read file or blob inside worker\u003Cbr \/\u003EFileWriterSync to write file\u003Cbr \/\u003ERequestFileSystemSync for file system handling\u003Cbr \/\u003EIndexedDBSync in for client side database storage \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EDOM functions available in workers\u003C\/h3\u003Eatob()  \/\/Not in chrome\u003Cbr \/\u003Ebtoa()  \/\/Not in chrome\u003Cbr \/\u003Edump()\u003Cbr \/\u003EclearInterval()\u003Cbr \/\u003EclearTimeout()\u003Cbr \/\u003EsetInterval()\u003Cbr \/\u003EsetTimeout()\u003Cbr \/\u003ENavigator object\u003Cbr \/\u003Elocation object\u003Cbr \/\u003EApplication Cache\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*Some useful APIs are not supported by webworkers like websockets,localstorage,etc..\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EClasses available in workers\u003C\/h3\u003EXMLHttpRequest()\u003Cbr \/\u003EWorker()\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EWebworkers Errors and Debugging:\u003C\/h3\u003EChrome developer tools has an advantage of debugging worker scripts. and you can place breakpoints, scope of variables etc... You can also use \u003Ca href=\"http:\/\/www.stacktracejs.com\/\"\u003Estacktrace.js\u003C\/a\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESecurity locks \u003C\/h3\u003EDue to chrome security issues and same origin consideration, chrome doesn't allow local file access as worker script, for that you should start the chrome with the flag \u003Cspan class=\"highlight\"\u003E--allow-file-access-from-files\u003C\/span\u003E or you need to run the app from your \u003Cspan class=\"highlight\"\u003Elocal host\u003C\/span\u003E.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E   Things you should keep in mind the objects cannots be passed through webworkers if you try to do this. You will get DATA_CLONE_ERR DOM Exception 25.\u003Cbr \/\u003E   Some API's are not supported in workers, if you try to pass or access unsupported API's in webworkers, you will get SECURITY_ERR DOM Exception 18.\u003Cbr \/\u003E   If You want pass the objects to the workers,you should use JSON.stringify for object to string and JSON.parse or eval() for String to object.\u003Cbr \/\u003E    \u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003E HTML5 File Transfer using webworkers and XHR2 is demonstrated here.\u0026nbsp;\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFurther reading :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/workers\/basics\/\" target=\"_blank\"\u003Ewebworker detail explanation\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en\/Using_web_workers\" target=\"_blank\"\u003EUsing webworkers\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/...\/workers.html\" target=\"_blank\"\u003EWebworker standard\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.w3.org\/TR\/workers\/\" target=\"_blank\"\u003EWebworker specificaton\u003C\/a\u003E\u0026nbsp; \u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 Presentation\u003C\/a\u003E\u0026nbsp; \u003C\/li\u003E\u003C\/ol\u003E\u0026nbsp;      \u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/3810575164139702585\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/08\/mastering-in-html5-webworkers.html#comment-form","title":"3 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3810575164139702585"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3810575164139702585"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/08\/mastering-in-html5-webworkers.html","title":"Mastering in HTML5 Webworkers"}],"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\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-1257284930538366397"},"published":{"$t":"2012-07-13T16:17:00.000+05:30"},"updated":{"$t":"2015-12-24T18:01:28.822+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"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":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Large file upload more than 1GB using HTML5 Web workers, Drag and Drop and XHR2"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cstyle\u003E   .pre{     border-radius:5px;     border:0px solid gray;     color: white !important;     background-color: #2E3436;     text-shadow: 0px 0px 1px #9e9e9e;     font-weight:600;     overflow: auto;     margin:5px;     padding:5px;     font-size:14px;    }    .high{     color:red;     text-shadow: 0px 0px 1px #9e9e9e;    }    .bold    {     color:green;     text-shadow: 1px 1px 3px #9e9e9e;         }    .para{     color:black;     font-size:14px;     text-align:justify;          }     \u003C\/style\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003ETo know about HTML5 \u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EThis tutorial provides a guide and code examples for leveraging the large file upload using File API inside of a Web Worker.     While we are trying to upload large file, we getting the problems like browser showing kill pages or unresponsive page etc.. This are because of we are blocking the user agent and we are utilising lot of CPU, it will lead to performance down or user agent getting continuos processing. We need to avoid the blocking or performance utilization on document. Solution for that is simple, we need to upload file using background processing nothing but using webworkers. By using webworkers we can upload files in background so that no errors or problems will occur.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"138\" src=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s400\/aw-snap-google-chrome.gif\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIn some cases reading the entire file into memory isn't the best option. For example, say you wanted to write an async file uploader. One possible way to speed up the upload would be to read and send the file in separate byte range chunks. The server component would then be responsible for reconstructing the file content in the correct order.  Lucky for us, the File interface supports a slice method to support this use case. The method takes a starting byte as its first argument, ending byte as its second, and an option content type string as a third.\u003Cbr \/\u003E\u003Cbr \/\u003EI was demonstrated the upload using file input and drag and drop. you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload. The most straightforward way to load a file is to use a standard \u0026lt;input type=\"file\"\u0026gt; element. JavaScript returns the list of selected File objects as a FileList. Here's an example that uses the 'multiple' attribute to allow selecting several files at once. Another technique for loading files is native drag and drop from the desktop to the browser. This example include drag and drop support. The following example demonstrates reading chunks of a file.   \u003Cbr \/\u003E\u003Cbr \/\u003EIf you load models or textures from external files, due to browsers' \"same origin policy\" security restrictions, loading from a file system will fail with a security exception. To solve this  Start Chrome executable with a command line flag:  chrome --allow-file-access-from-files  or else run from local server \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EThis will solve the following problems:    \u003Cbr \/\u003E\u003Col\u003E\u003Cli\u003E     How to upload large file more than 1GB     \u003C\/li\u003E\u003Cli\u003E     Synchronous File Uploading     \u003C\/li\u003E\u003Cli\u003E     Large File upload with XHR2 uisng webworkers      \u003C\/li\u003E\u003Cli\u003E     Drag and Drop File upload     \u003C\/li\u003E\u003Cli\u003E     Multiple File Upload without blocking UI     \u003C\/li\u003E\u003Cli\u003E     Increasing performance While File uploads     \u003C\/li\u003E\u003Cli\u003E     Background Processing of file uploads     \u003C\/li\u003E\u003Cli\u003E     Slicing the file      \u003C\/li\u003E\u003C\/ol\u003Ecode:   \u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EHTML\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003E  \u0026lt;input type=\"file\" id=\"files\" name=\"files[]\" multiple \/\u0026gt;\u003Cbr \/\u003E  \u0026lt;div id=\"drop_zone\"\u0026gt;\u003Cbr \/\u003E   Drop files here\u003Cbr \/\u003E  \u0026lt;\/div\u0026gt; \u003Cbr \/\u003E\u003Cbr \/\u003E  \u0026lt;output id=\"list\"\u0026gt;\u0026lt;\/output\u0026gt;\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EJavaScript\u003C\/b\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003E\u003Cspan class=\"high\"\u003E\u003Cbr \/\u003E var worker = new Worker('fileupload.js');\u003Cbr \/\u003E worker.onmessage = function(e) {\u003Cbr \/\u003E alert(e.data);\u003Cbr \/\u003E}\u003Cbr \/\u003Eworker.onerror =werror;\u003Cbr \/\u003Efunction werror(e) {\u003Cbr \/\u003E  console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);\u003Cbr \/\u003E }\u003C\/span\u003E\u003Cbr \/\u003Efunction handleFileSelect(evt) {\u003Cbr \/\u003E evt.stopPropagation();\u003Cbr \/\u003E evt.preventDefault();\u003Cbr \/\u003E\u003Cbr \/\u003E var files = evt.dataTransfer.files||evt.target.files;\u003Cbr \/\u003E \/\/ FileList object.\u003Cbr \/\u003E \u003Cspan class=\"high\"\u003E\u003Cbr \/\u003E worker.postMessage({\u003Cbr \/\u003E 'files' : files\u003Cbr \/\u003E });\u003C\/span\u003E\u003Cbr \/\u003E \/\/Sending File list to worker\u003Cbr \/\u003E \/\/ files is a FileList of File objects. List some properties.\u003Cbr \/\u003E var output = [];\u003Cbr \/\u003E for (var i = 0, f; f = files[i]; i++) {\u003Cbr \/\u003E  output.push('\u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;', escape(f.name), '\u0026lt;\/strong\u0026gt; (', f.type || 'n\/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n\/a', '\u0026lt;\/li\u0026gt;');\u003Cbr \/\u003E }\u003Cbr \/\u003E document.getElementById('list').innerHTML = '\u0026lt;ul\u0026gt;' + output.join('') + '\u0026lt;\/ul\u0026gt;';\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction handleDragOver(evt) {\u003Cbr \/\u003E evt.stopPropagation();\u003Cbr \/\u003E evt.preventDefault();\u003Cbr \/\u003E evt.dataTransfer.dropEffect = 'copy';\u003Cbr \/\u003E \/\/ Explicitly show this is a copy.\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ Setup the dnd listeners.\u003Cbr \/\u003Evar dropZone = document.getElementById('drop_zone');\u003Cbr \/\u003EdropZone.addEventListener('dragover', handleDragOver, false);\u003Cbr \/\u003EdropZone.addEventListener('drop', handleFileSelect, false);\u003Cbr \/\u003E document.getElementById('files').addEventListener('change', handleFileSelect, false);\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EWorker (fileupload.js) :\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003Evar file = [], p = true;\u003Cbr \/\u003Efunction upload(blobOrFile) {\u003Cbr \/\u003E var xhr = new XMLHttpRequest();\u003Cbr \/\u003E xhr.open('POST', '\/server', false);\u003Cbr \/\u003E xhr.onload = function(e) {\u003Cbr \/\u003E };\u003Cbr \/\u003E xhr.send(blobOrFile);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction process() {\u003Cbr \/\u003E for (var j = 0; j \u0026lt;file.length; j++) {\u003Cbr \/\u003E  var blob = file[j];\u003Cbr \/\u003E\u003Cbr \/\u003E  const BYTES_PER_CHUNK = 1024 * 1024;\u003Cbr \/\u003E  \/\/ 1MB chunk sizes.\u003Cbr \/\u003E  const SIZE = blob.size;\u003Cbr \/\u003E\u003Cbr \/\u003E  var start = 0;\u003Cbr \/\u003E  var end = BYTES_PER_CHUNK;\u003Cbr \/\u003E\u003Cbr \/\u003E  while (start \u0026lt; SIZE) {\u003Cbr \/\u003E\u003Cbr \/\u003E   if ('mozSlice' in blob) {\u003Cbr \/\u003E    var chunk = blob.mozSlice(start, end);\u003Cbr \/\u003E   } else {\u003Cbr \/\u003E    var chunk = blob.webkitSlice(start, end);\u003Cbr \/\u003E   }\u003Cbr \/\u003E\u003Cbr \/\u003E   upload(chunk);\u003Cbr \/\u003E\u003Cbr \/\u003E   start = end;\u003Cbr \/\u003E   end = start + BYTES_PER_CHUNK;\u003Cbr \/\u003E  }\u003Cbr \/\u003E  p = ( j = file.length - 1) ? true : false;\u003Cbr \/\u003E  self.postMessage(blob.name + \" Uploaded Succesfully\");\u003Cbr \/\u003E }\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Eself.onmessage = function(e) {\u003Cbr \/\u003E\u003Cspan class=\"high\"\u003E\u003Cbr \/\u003Efor (var j = 0; j \u0026lt; e.data.length; j++)\u003Cbr \/\u003E  files.push(e.data[j]);\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E if (p) {\u003Cbr \/\u003E  process()\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EConclusion\u003C\/b\u003E \u003Cbr \/\u003EI hope this article has help you to upload large files. Web Workers are an underutilized and under-appreciated feature of HTML5. We can minimize the work to upload a large file. The technique is to slice the upload into multiple chunks, spawn an XHR for each portion, and put the file together on the server. This is similar to how GMail uploads large attachments so quickly.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003EFurther Reading\u003C\/span\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u0026nbsp;\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\" target=\"_blank\"\u003EMastering in webworkers\u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\" target=\"_blank\"\u003EReading files and chunking.\u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/1257284930538366397\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/large-file-upload-more-than-1gb-using.html#comment-form","title":"29 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1257284930538366397"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1257284930538366397"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/large-file-upload-more-than-1gb-using.html","title":"Large file upload more than 1GB using HTML5 Web workers, Drag and Drop and XHR2"}],"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\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"29"}}]}});