// 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\/-\/Websocket?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/search\/label\/Websocket"},{"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":"7"},"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-7625556865175279672"},"published":{"$t":"2014-08-16T15:56:00.000+05:30"},"updated":{"$t":"2016-01-27T23:55:53.318+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":"stream"},{"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"}],"title":{"type":"text","$t":"Plugin less video call using webRTC "},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003EIntroduction to WebRTC\u003C\/h3\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EWebRTC enables peer to peer communication using simple Javascript APIs. It supports to build rich, high quality, RTC applications using Javascript and HTML5. There Three APIs yet to develop RTC applications.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Col style=\"list-style-image: initial; list-style-position: initial; margin: 0.5em 0px; outline: none; padding: 0px 0px 0px 2em;\"\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EMedia Stream\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003ERTC Peer Connection\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003ERTC Data Channel\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s1600\/orange_1454543i.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"257\" src=\"http:\/\/1.bp.blogspot.com\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s400\/orange_1454543i.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Ch3 style=\"font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003EGetting started using getUserMedia\u003C\/h3\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EgetUserMedia generates \u0026nbsp;MediaStream which receives Audio and Video from device. navigator.getUserMedia() gives mediastream having audio and video tracks. To get audio tracks from stream use stream.getAudioTracks() and to get stream.getVideoTracks().\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EgetUserMedia takes three parameters constraints object, success callback and failure callback. The out received from the getUserMedia can be passed to RTCPeerConnection.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\" style=\"background-color: #2e3436; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid gray; color: white !important; font-size: 14px; font-weight: 600; margin: 5px; outline: none; overflow: auto; padding: 5px; text-shadow: rgb(158, 158, 158) 0px 0px 3px;\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": true });\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Ch3 style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003ERTC Peer connection to exchanges streams\u003C\/h3\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;helvetica neue light\u0026quot; , , \u0026quot;helvetica neue\u0026quot; , \u0026quot;helvetica\u0026quot; , \u0026quot;arial\u0026quot; , sans-serif; font-size: medium;\"\u003ERTC peer connection API is to establish a persistent connection between peers. Rest of the process similar to video calling using WebRTC peer connection.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.600000381469727px;\" \/\u003E\u003Cdiv class=\"pre\" style=\"background-color: #2e3436; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid gray; color: white !important; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19.600000381469727px; margin: 5px; outline: none; overflow: auto; padding: 5px; text-shadow: rgb(158, 158, 158) 0px 0px 3px;\"\u003Evar signalChannel = createSignalingChannel();\u003Cbr \/\u003Evar peerConn;\u003Cbr \/\u003Evar config = ...;\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ execute makeCall make a call\u003Cbr \/\u003Efunction makeCall(isCaller) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn\u0026nbsp;= new RTCPeerConnection(config);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ sending ice candidates to the other peer\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onicecandidate = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"candidate\": evt.candidate }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ set remote stream to the remote video element\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onaddstream = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; remoteView.src = URL.createObjectURL(evt.stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ get the local stream and send\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia({ \"audio\": true, \"video\": true }, function (stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; selfView.src = URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addStream(stream);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (isCaller)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createOffer(gotDescription);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createAnswer(peerConn.remoteDescription, gotDescription);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; function gotDescription(desc) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setLocalDescription(desc);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"sdp\": desc }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; });\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003EsignalChannel.onmessage = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (!peerConn)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; makeCall(false);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var signalData = JSON.parse(evt.data);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (signalData.sdp)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setRemoteDescription(new RTCSessionDescription(signalData.sdp));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addIceCandidate(new RTCIceCandidate(signalData.candidate));\u003Cbr \/\u003E};\u003C\/div\u003E\u003Ch4 style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bolder; line-height: 19.600000381469727px; margin: 1.12em 0px; padding: 0px; position: relative;\"\u003EHow RTC Peer connection \u0026nbsp;descriptions exchange works?\u003C\/h4\u003E\u003Col style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.600000381469727px; list-style-image: initial; list-style-position: initial; margin: 0.5em 0px; outline: none; padding: 0px 0px 0px 2em;\"\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer1 runs the RTCPeerConnection createOffer() method.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EThe callback argument of this is passed an RTCSessionDescription: Peer1's local session description.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EIn the callback, Peer1 sets the local description using setLocalDescription() and then sends this session description to Peer2 via their signaling channel. Note that RTCPeerConnection won't start gathering candidates until setLocalDescription() is called: this is codified in JSEP IETF draft.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer2 sets the description Peer1 sent him as the remote description using setRemoteDescription().\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer2 runs the RTCPeerConnection createAnswer() method, passing it the remote description he got from Peer1, so a local session can be generated that is compatible with hers.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EThe createAnswer() callback is passed an RTCSessionDescription: Peer2 sets that as the local description and sends it to Peer1.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EWhen Peer1 gets Peer2's session description, \u0026nbsp;sets that as the remote description with setRemoteDescription.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EBoth peers now having others streams.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/7625556865175279672\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/plugin-less-video-call-using-webrtc.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7625556865175279672"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7625556865175279672"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/plugin-less-video-call-using-webrtc.html","title":"Plugin less video call using webRTC "}],"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\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s72-c\/orange_1454543i.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-6360002112085349593"},"published":{"$t":"2014-08-16T15:31:00.000+05:30"},"updated":{"$t":"2016-01-28T23:22:59.655+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":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"}],"title":{"type":"text","$t":"Web RTC audio only Call"},"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 3px #9e9e9e;     font-weight:600;     overflow: auto;     margin:5px;     padding:5px;     font-size:14px;    } \u003C\/style\u003E \u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EIntroduction to WebRTC\u003C\/h3\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EWebRTC enables peer to peer communication using simple Javascript APIs. It supports to build rich, high quality, RTC applications using Javascript and HTML5. There Three APIs yet to develop RTC applications.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EMedia Stream\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC Peer Connection\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC Data Channel\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s1600\/speakerudde.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"155\" src=\"http:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s400\/speakerudde.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003EGetting started using getUserMedia\u003C\/h3\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EgetUserMedia generates \u0026nbsp;MediaStream which receives Audio and Video from device. navigator.getUserMedia() gives mediastream having audio and video tracks. To get audio tracks from stream use stream.getAudioTracks() and to get stream.getVideoTracks().\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EgetUserMedia takes three parameters constraints object, success callback and failure callback. The out received from the getUserMedia can be passed to RTCPeerConnection.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": true });\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EFor audio call you just need to put false to video constraint.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": false });\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003ERTC Peer connection to exchanges streams\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC peer connection API is to establish a persistent connection between peers. Rest of the process similar to video calling using WebRTC peer connection.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"pre\"\u003Evar signalChannel = createSignalingChannel();\u003Cbr \/\u003Evar peerConn;\u003Cbr \/\u003Evar config = ...;\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ execute makeCall make a call\u003Cbr \/\u003Efunction makeCall(isCaller) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn\u0026nbsp;= new RTCPeerConnection(config);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ sending ice candidates to the other peer\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onicecandidate = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"candidate\": evt.candidate }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ set remote stream to the remote video element\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onaddstream = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; remoteView.src = URL.createObjectURL(evt.stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ get the local stream and send\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia({ \"audio\": true, \"video\": false }, function (stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; selfView.src = URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addStream(stream);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (isCaller)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createOffer(gotDescription);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createAnswer(peerConn.remoteDescription, gotDescription);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; function gotDescription(desc) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setLocalDescription(desc);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"sdp\": desc }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; });\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003EsignalChannel.onmessage = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (!peerConn)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; makeCall(false);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var signalData = JSON.parse(evt.data);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (signalData.sdp)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setRemoteDescription(new RTCSessionDescription(signalData.sdp));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addIceCandidate(new RTCIceCandidate(signalData.candidate));\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003EHow RTC Peerconnection \u0026nbsp;descriptions exchange works?\u003C\/h4\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer1 runs the RTCPeerConnection createOffer() method.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EThe callback argument of this is passed an RTCSessionDescription: Peer1's local session description.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EIn the callback, Peer1 sets the local description using setLocalDescription() and then sends this session description to Peer2 via their signaling channel. Note that RTCPeerConnection won't start gathering candidates until setLocalDescription() is called: this is codified in JSEP IETF draft.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer2 sets the description Peer1 sent him as the remote description using setRemoteDescription().\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer2 runs the RTCPeerConnection createAnswer() method, passing it the remote description he got from Peer1, so a local session can be generated that is compatible with hers.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EThe createAnswer() callback is passed an RTCSessionDescription: Peer2 sets that as the local description and sends it to Peer1.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EWhen Peer1 gets Peer2's session description, \u0026nbsp;sets that as the remote description with setRemoteDescription.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EBoth peers now having others streams.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/6360002112085349593\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/web-rtc-audio-only-call.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6360002112085349593"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6360002112085349593"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/web-rtc-audio-only-call.html","title":"Web RTC audio only Call"}],"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:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s72-c\/speakerudde.jpg","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-4864375538009144269"},"published":{"$t":"2012-07-19T11:26:00.000+05:30"},"updated":{"$t":"2015-12-23T10:12:23.770+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"}],"title":{"type":"text","$t":"HTML5 Websocket File manager"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EThis article demonstrates how to build file manager using Websockets and with other HTML5 emerging technologies.\u003Cbr \/\u003E\u003Cbr \/\u003EWebSockets one of the powerful communication mechanism \u0026nbsp;to send and receive the messages bidirectionally between client and server. WebSockets give you the facility to load real time data and visualize it.\u003Cbr \/\u003E\u003Cbr \/\u003EPDF.js, webodf.js and so many other libraries exists over web to load \u0026nbsp;and see the files in browser. The HTML5 Drag Drop API has the Capability to get the files from the user in a way they can drop in the zone. With \u0026nbsp;Drag and Drop user can upload Folder and multiple files.\u003Cbr \/\u003E\u003Cbr \/\u003EOne other HTML5 very useful API WebWorkers it helps to do the operation in their own thread. it gives boost to javascript to implement multi-threading.\u003Cbr \/\u003E\u003Cbr \/\u003EAnd Finally there are lots of libraries to show the structure of different levels in tree view and the grid structure.\u003Cbr \/\u003E\u003Cbr \/\u003EBy using all these feature one can create easily a file manager with all the below features.\u003Cbr \/\u003E\u003Col type=\"1\"\u003E\u003Cli\u003E     Opening the document in the cloud     \u003C\/li\u003E\u003Cli\u003E     Drag and Drop upload     \u003C\/li\u003E\u003Cli\u003E     High performance File operations     \u003C\/li\u003E\u003Cli\u003E     Large file upload(\u0026gt;1GB)\u003C\/li\u003E\u003Cli\u003E     Directory Upload     \u003C\/li\u003E\u003Cli\u003E     Multiple file upload     \u003C\/li\u003E\u003Cli\u003E     Tree Based Presentation     \u003C\/li\u003E\u003Cli\u003E     Document information     \u003C\/li\u003E\u003C\/ol\u003Eand many more...\u003Cbr \/\u003E\u003Cbr \/\u003EDropbox, Google Drive and now you can have yours...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003EFurther Reading:\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/websockets\/basics\/\" target=\"_blank\"\u003EWebsocket Basics\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/WebSocket\" target=\"_blank\"\u003EMozilla Developer Network\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/www.w3.org\/TR\/2009\/WD-websockets-20091222\" target=\"_blank\"\u003EWebsocket specification\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/websocket.org\/\" target=\"_blank\"\u003EWebsocket community\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/4864375538009144269\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/html5-websocket-file-manager.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4864375538009144269"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4864375538009144269"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/html5-websocket-file-manager.html","title":"HTML5 Websocket File manager"}],"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":"4"}}]}});