// 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\/-\/Client-side?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/search\/label\/Client-side"},{"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":"5"},"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-2461609485001546684"},"published":{"$t":"2015-07-17T12:59:00.000+05:30"},"updated":{"$t":"2016-01-27T23:07:48.575+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"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":"Web Audio"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Web Audio API"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EIntroduction:\u003C\/span\u003E\u003C\/h3\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Audio on the web was never thought of without a flash or a plugin in the formative years. An excellent audio element of HTML 5 “The Web Audio API” has brought in a great revolution without the help of the above mentioned elements and is capable of supporting sophisticated games and interactive applications.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s1600\/sound_designer.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Web Audio API\" border=\"0\" height=\"187\" src=\"http:\/\/3.bp.blogspot.com\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s400\/sound_designer.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;The Web Audio API is basically a high-level JavaScript API that processes and integrated audio in web apps.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u003Cb\u003E\u003Ci\u003EThe two different types:\u0026nbsp;\u003C\/i\u003E\u003C\/b\u003EIn general there are two audio API’s one being the Audio data API and the other is the Web Audio API .The creation, the processing and the controlling of audio within the webapps is much simpler in Web Audio API when compared to the low-level access of the audio data by the Audio Data API.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u003Ci\u003E\u003Cb\u003EAmazing Feature:\u003C\/b\u003E\u003C\/i\u003E The attractive feature if that it does not require a helper application such as plug-in or flash. The main purpose of this API is to include the capabilities that are found in modern game audio engines and the excellent tasks such as mixing , \u0026nbsp;processing and filtering tasks that are found in modern desktop audio production application.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe Working:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u003Ci\u003EThe AudioContext instance:\u003C\/i\u003EThis is one of the most powerful instance used for managing and playing all the sounds. Initially an audio context has to be created which is like a container. Inside the context one can create sources and then connect them to the nodes and finally connected to the destination in the form a chain.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     var context = new AudioContext() ;\u003Cbr \/\u003E     \/\/Audio Container created.\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESince WebAudioAPI is a based on webkit technology and is supposed to be supported on IOS6,’webkit’ should be appended to the audio context.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003Evar context = new WebKitAudioContext();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOnce the audio context container is created a source node can also be created. A source node can be an Oscillator which generates sound from scratch or audio files such as wav, mp3 can be loaded and played back.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ETo create an oscillator\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator = context.createOscillator();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen the oscillator is supposed to be connected to the destination which can be speakers.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.connect(context.destination);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ETo generate sound instantly\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.noteOn(0);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ENow once the audio context is created between the source and the destination there is another interface called the\u0026nbsp;audionode.\u0026nbsp;They act as intermediate modules used for processing.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThere are several audio nodes such as the-\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E1. \u003Ci\u003EGainnode:\u003C\/i\u003E This is used for volume which can be created in the following way-\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EvolumeNode = context.createGainNode();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOne can set the volume using\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EvolumeNode.gain.value = 0.3;\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ENow this can be connected to the source\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.connect(volumeNode);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E2.\u0026nbsp;\u003Ci\u003EThe Biquad filter:\u003C\/i\u003E\u0026nbsp;To add complex effects to your sound forms a biquad filter is used. It is low-order filter.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E3.\u0026nbsp;\u003Ci\u003EThe delay node:\u003C\/i\u003E\u0026nbsp;It delays the incoming node signal.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E4.\u0026nbsp;\u003Ci\u003EThe audiobuffer node:\u003C\/i\u003E\u0026nbsp;It consists of an in-memory audio data stored in an audio buffer.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E5. \u003Ci\u003EPanner node:\u003C\/i\u003E\u0026nbsp;It describes its position with right –hand Cartesian co-ordinates and positions an incoming audio stream in 3D space.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E6.\u0026nbsp;\u003Ci\u003EConvolver node:\u0026nbsp;\u003C\/i\u003EGiven an impulse response it applies a linear convolution effect.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E7.\u0026nbsp;\u003Ci\u003EDynamic Compressor Node:\u003C\/i\u003E\u0026nbsp;When multiple sounds are played together, it helps to prevent distortion by lowering the volume of the loudest part of the signal.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E8.\u0026nbsp;\u003Ci\u003EWave Shaper node:\u003C\/i\u003E\u0026nbsp;Inspite of the distortion effect, it applies a curve distorter to add a soothing feeling to the signal. It is a non-linear distorter.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EBy combining the above mentioned code one can find a working demo.\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin-bottom: 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EExploring the WEB AUDIO API:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EThe AudioPara:\u003C\/i\u003E\u0026nbsp;It is like the AudioNode. It can be set to a specific value or a different value.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EEnded:\u003C\/i\u003E\u0026nbsp;It is an event that can be called when the media has reached the end of the play.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch4 style=\"margin-bottom: 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe media elements:\u003C\/span\u003E\u003C\/h4\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaElementAudioSource Node:\u003C\/i\u003E\u0026nbsp;It is an audio node consisting of \u0026lt;audio\u0026gt; and \u0026lt;video\u0026gt; element of the HTML 5.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaStreamAudioSource Node:\u003C\/i\u003E\u0026nbsp;It is an audio node that acts as an audio source consisting of webcam or microphone.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaStreamAudioDestination Node:\u003C\/i\u003E\u0026nbsp;It is an audio node consisting of the audio destination node.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cb\u003EHow to extract time and frequency?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen check out the Analyser node.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EAssume that Source ‘S’ is connected to Destination ‘D’\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003Evar analyser = context.createAnalyser();\u003Cbr \/\u003ES.connect(analyser);\u003Cbr \/\u003Eanalyser.connect(D);\u003Cbr \/\u003Evar freqDomain = new Float32Array(analyser.frequencyinCount);\u003Cbr \/\u003Eanalyser.getFloatFrequencyData(freqDomain);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel Splitter and a Merger?\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel splitter separated different channels of an audio source into a set of mono outputs. It is created using a method called createChannelSplitter\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel merger unites the mono inputs into a single output. It is created using a method called createChannelMerger\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudioListener:\u003C\/i\u003E It gives the position and orientation of a person listening to the audio.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EIn c# it is created in the following way:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EAudioListener listener = new AudioListener();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EScript Process Node:\u0026nbsp;This helps in the generation, processing or analysing of audio used in JavaScript.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudio Process (event):\u003C\/i\u003E\u0026nbsp;When a script process node is ready to be processed the event is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudioProcessing Event:\u003C\/i\u003E\u0026nbsp;When the script processor node Input Buffer is ready to be processed, the event is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EOffline Audio Context:\u003C\/i\u003E\u0026nbsp;It does not render the audio but generates it as fast as it can in the buffer.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EComplete:\u003C\/i\u003E\u0026nbsp;When the Offline Audio Context is terminated it is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EOffline Audio Completion Event:\u0026nbsp;\u003C\/i\u003EThe complete event implements the interface.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2461609485001546684\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/web-audio-api.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2461609485001546684"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2461609485001546684"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/web-audio-api.html","title":"Web Audio API"}],"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\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s72-c\/sound_designer.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-836931492389933370"},"published":{"$t":"2015-07-16T15:26:00.002+05:30"},"updated":{"$t":"2015-12-24T15:30:51.002+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"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":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"}],"title":{"type":"text","$t":"Share your screen over Web(Screen sharing with HTML5)"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-align: left;\"\u003EA whole new concept on how a user can share his desktop or browser screens to other users is\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-align: left;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-align: left;\"\u003E“\u003Cb\u003EScreen sharing\u003C\/b\u003E”\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-align: left;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-align: left;\"\u003E.\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s1600\/screen_share.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cimg border=\"0\" height=\"204\" src=\"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s320\/screen_share.jpg\" width=\"320\" \/\u003E\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cb\u003EIs it possible?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EWhile webRTC has not yet been supported by IE and Safari and these browsers\u0026nbsp; donot support screensharing \u0026nbsp;as well,there are several webapps that allow you and me to share the screens without the need of any plug-ins.The only one thing that is required to allow screen sharing is a browser called Chrome.Some of the webapps that support this screen sharing is \u003Cb\u003Esame.io,talky.io and appear.in\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cb\u003EWant to know how to do this in chrome?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen follow the below steps-\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt; text-indent: -18pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EType \u003Cb\u003Echrome:\/\/flags\u003C\/b\u003E in the address bar\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EYou will find a setting like\u0026nbsp; “Enable screen capture support in \u003Cb\u003EgetUserMedia\u003C\/b\u003E()”\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EClick the enable button\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003ERestart your browser.\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EWebapps like \u003Ci\u003Esame.io and talky.io\u003C\/i\u003E allows a user to share their screens. By allowing your chrome browser to access your web camera and microphone and by clicking on the “Share my Screen” button the user can share his screens.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOnce the user hits that button the user will be provided with a unique web url and if anyone gets to know this url can access your screen through the chrome browser.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe other webapp \u003Ci\u003Etalky.io\u003C\/i\u003E allows private sessions wherein a user can protect his screens using a password.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAppear.in\u003C\/i\u003E is a web app for video meetings that allows the user to share the desktop screen to other participants.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cimg border=\"0\" height=\"333\" src=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s400\/remote-access.jpg\" width=\"400\" \/\u003E\u003C\/span\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cspan style=\"color: blue; text-decoration: none;\"\u003E\u003C!--[if gte vml 1]\u003E\u003Cv:shape  id=\"Picture_x0020_1\" o:spid=\"_x0000_i1025\" type=\"#_x0000_t75\" alt=\"https:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s400\/remote-access.jpg\"  href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\"  style='width:300pt;height:249.75pt;visibility:visible;mso-wrap-style:square'  o:button=\"t\"\u003E \u003Cv:imagedata src=\"file:\/\/\/C:\\Users\\rkonga\\AppData\\Local\\Temp\\msohtmlclip1\\01\\clip_image002.jpg\"   o:title=\"remote-access\"\/\u003E\u003C\/v:shape\u003E\u003C![endif]--\u003E\u003C!--[if !vml]--\u003E\u003C!--[endif]--\u003E\u003C\/span\u003E\u003C\/a\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EHowever a tech savvy guy named Rafael Weinstein has proposed a technique which uses Mutation observers and a websocket.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin: 0cm 0cm 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ELet’s see how this works:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm; text-indent: -18.0pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EThe presenter shares his screen to the viewer using a websocket\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EAs the user performs any scroll operation the observer sends the changes and the report back to the viewer using Rafael mutation summary library.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003E\u003Cb\u003EAnother method on how screensharing is done is:\u003C\/b\u003E\u003C\/i\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm; text-indent: -18.0pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ERewrite all the pages on the URL to absolute to prevent static images and CSS elements from broken links\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EClone the page’s document\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EMake the clone readonly, hidden and non-selectable and prevent scrolling.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ECapture the current position of the screen and add them as data-* attributes as duplicate\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ECreate a new BLOB page as duplicate.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe code for this is as follows-\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E function screenshot(){\u003Cbr \/\u003E    urlsToAbsolute(document.images);  \u003Cbr \/\u003E    urlsToAbsolute(document.querySelectorAll(\"link[rel='stylesheet']\"));\u003Cbr \/\u003E    urlsToAbsolute(document.scripts);\u003Cbr \/\u003E\u003Cbr \/\u003E    var screen= document.documentElement.cloneNode(true);\u003Cbr \/\u003E\u003Cbr \/\u003E    screen.style.pointerEvents = 'none';\u003Cbr \/\u003E    screen.style.overflow = 'hidden';\u003Cbr \/\u003E    screen.style.userSelect = 'none';\u003Cbr \/\u003E\u003Cbr \/\u003E    var blob1 = new Blob([screen.outerHTML], {type: 'text\/html'});\u003Cbr \/\u003E\u003Cbr \/\u003E    window.open(window.URL.createObjectURL(blob1));\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp;\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EBefore the final BLOB is created this java script code should be written so that\u0026nbsp; when then presenter scrolls the page the user follows.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESet the scrollX and scrollY positions\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E addOnPageLoad().\u003Cbr \/\u003E screen.dataset.scrollX = window.scrollX;\u003Cbr \/\u003E screen.dataset.scrollY = window.scrollY;\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003Eand finally write this below code –\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E var script = document.createElement('script');\u003Cbr \/\u003E script.textContent = '(' + addOnPageLoad_.toString() + ')();';.\u003Cbr \/\u003E screenshot.querySelector('body').appendChild(script);\u003Cbr \/\u003E function addOnPageLoad() {\u003Cbr \/\u003E    window.addEventListener('DOMContentLoaded', function(e) {\u003Cbr \/\u003E        var scrollX = document.documentElement.dataset.scrollX || 0;\u003Cbr \/\u003E        var scrollY = document.documentElement.dataset.scrollY || 0;\u003Cbr \/\u003E        window.scrollTo(scrollX, scrollY);\u003Cbr \/\u003E    });\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EAnother method is make the screenshot as a png file and share it using a websocket.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E var img_mimetype = 'images\/jpeg';\u003Cbr \/\u003E var IMG_QUALITY = 90;\u003Cbr \/\u003E var SEND_INTERVAL = 280;\u003Cbr \/\u003E var wes = new WebSocket('ws:\/\/...', 'sample-protocol');\u003Cbr \/\u003E wes.binaryType = 'blob';\u003Cbr \/\u003E function captureAndSendTab() {\u003Cbr \/\u003E    var opts = {format: img_mimetype, quality: IMG_QUALITY};\u003Cbr \/\u003E    chrome.tabs.captureVisibleTab(null, opts, function(dataUrl){\u003Cbr \/\u003E       wes.send(convertDataURIToBlob(dataUrl, IMG_MIMETYPE));\u003Cbr \/\u003E    });\u003Cbr \/\u003E  }\u003Cbr \/\u003E var intervalId = setInterval(function() {\u003Cbr \/\u003E     if (ws.bufferedAmount == 0) {\u003Cbr \/\u003E         captureAndSendTab();\u003Cbr \/\u003E      }\u003Cbr \/\u003E    }, SEND_INTERVAL);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin: 0cm 0cm 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EConclusion:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThough without the use of WebRTC we have several technologies that help us to make screen sharing possible we still have to wait for the WebRTC to take a leap in making this screen sharing possible with HTML5 .\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESo guys wait to see the revolution that WebRTC is going to bring.\u003C\/span\u003E\u003Cspan style=\"font-family: verdana, sans-serif;\"\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/836931492389933370\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/share-your-over-webscreen-sharing-with.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/836931492389933370"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/836931492389933370"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/share-your-over-webscreen-sharing-with.html","title":"Share your screen over Web(Screen sharing with HTML5)"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s72-c\/screen_share.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-1187037905045567768"},"published":{"$t":"2015-07-16T15:17:00.000+05:30"},"updated":{"$t":"2016-01-27T23:18:40.404+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"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":"WebApplications"}],"title":{"type":"text","$t":"Observe javascript variable changes"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"text-align: left;\"\u003EIntroduction:            \u003C\/h3\u003E\u003Cdiv\u003E\u003Cbr \/\u003EThe most awaited recently launched chrome 36 browser has a unique feature called Object.Observe().If it is questioned like what is so unique about Object.Observe() then the answer would be given appropriately by a JavaScript developer.While developing websites or apps generally the code and the display is generally separated that is their structures are separated and when they are combined together and made to execute the display on the browser would not be as it is coded.With the help of JavaScript the user would get a WYSIWG (What you see is what you get) display based on exactly what the app is doing.Although Object.Observe() is a low-level API it solves several problems.  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s1600\/1364034584945.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Observe javascript variable changes\" border=\"0\" height=\"225\" src=\"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s400\/1364034584945.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EWhat is object.observe() all about? \u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EObject.observe() is nothing but a low-level primitive and an enabling technology that makes some JavaScript libraries and frameworks work faster and robust.It simplifies the problem by acting as a pipeline between the app’s datastructure and display.  \u003Cbr \/\u003E\u003Cbr \/\u003EOne can simply state that Object.Observe() is simply a function that can simply be built into JavaScript though developers will not work on it directly but frameworks like backbone,Angular and Ember will add new libraries that will rely on Object.observe that will make the code and display in a proper sync.  \u003Cbr \/\u003E\u003Cbr \/\u003EObject.Observe() mainly follows a concept called as databinding which makes sure that the programs underlying code and the display are in a sync. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EWhat is databinding all about? \u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EAs we know that while devolping an application a developer makes use of a MVC architecture.If a ser wants to declare a relationship between the data and the document object model and if a user wants to keep the document object model up to date a databinding is used.Databinding is mainly useful when we have a complex user-interface wherein we need to establish relationships between multiple elements in the views and the underlying data.  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cstrong\u003EExample:\u003C\/strong\u003E  \u003Cbr \/\u003ELet’s create a sample object.  \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     var mysample = { \u003Cbr \/\u003E             label: 'hello', \u003Cbr \/\u003E             completed: false \u003Cbr \/\u003E          }; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003EWhenever changes are made to the object a call back is issued.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     function observing(changes){ \u003Cbr \/\u003E         changes.forEach(function(change, i){ \u003Cbr \/\u003E         console.log('what property  has changed? ' + change.name); \u003Cbr \/\u003E         console.log('how did it the property change? ' + change.type); \u003Cbr \/\u003E   console.log('whats the current value of the object? ' + change.object[change.name]); \u003Cbr \/\u003E        console.log(change); \/\/ all changes \u003Cbr \/\u003E        }); \u003Cbr \/\u003E    } \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EWhen ever the call back function is used there is a change in the object multiple times so the changed values and the given values need not be the same thing. \u003Cbr \/\u003E\u003Cbr \/\u003EWe can then observe these changes using O.o(), passing in the object as our first argument and the callback as our second:  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E       Object.observe(mysample, observing); \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003ESome changes to the model can be as follows   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E      mysample.label = 'I love databinding’; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003EWe can change another property like this  \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E      mysample.completeBy = '30\/09\/2014'; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003EAfter some time if a user decides to delete the property completed from the object this can be done as follows-   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     delete mysample.completed; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow it is easy for a user to identify how to delete an object and how to add a new object.   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     Object.unobserve();\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003EOnce this method is uses any changes made to the object will no longer result in a list of change records.   \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     Object.unobserve(mysample,observing); \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003EConclusion:\u003C\/h3\u003E\u003Cbr \/\u003EWant to know more on what a Object.Observe() does?Have you ever noticed notifications on your phone and have you ever felt annoying ?Yes but some times these notifications tend to be useful and these can be implemented using Object.Observe().So go and check out how Object.Observe() makes all this.Since only chrome36 only supports Object.Observe() we should wait and see that all the other browsers all support this Object.Observe() to improve the performance in the browser display.Hopefully we will find a better and exciting observation ahead with Object.Observe().  \u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/1187037905045567768\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/observe-javascript-variable-changes.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1187037905045567768"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1187037905045567768"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/observe-javascript-variable-changes.html","title":"Observe javascript variable changes"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s72-c\/1364034584945.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2097487532317062537"},"published":{"$t":"2015-07-16T14:58:00.000+05:30"},"updated":{"$t":"2016-01-27T23:48:14.525+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"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":"local storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"websql"}],"title":{"type":"text","$t":"HTML5 Client-side storage solutions"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003EIntroduction:\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ESince we are all aware that the data is usually stored on the server,we have a yet another unique feature that lets the user to store the data in the client side using several different API’s such as web storage, webSQL Database,Indexed Database and File hard drive.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s1600\/goldbars-k6U--621x414%2540LiveMint.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"HTML5 Client-side storage solutions\" border=\"0\" height=\"266\" src=\"http:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s400\/goldbars-k6U--621x414%2540LiveMint.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EReasons to use a client side storage rather than the server side-\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo make the web app available offline\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo improve the performance\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe Features \u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EClient side storage device:\u003C\/i\u003E\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe main aim of client-side storage is that the data is passed to the browser’s storage API which saves the data on the local device as it stores preferences and cache.One can not only save the data this API also lets the user to retrieve data and perform searching and manipulation.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ESandBoxed:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EAll the four storage API’s put the data in a single location .\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EExample :\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIf the url \u003C\/span\u003E\u003Ca href=\"http:\/\/myweb.mypage.com\/\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003Ehttp:\/\/myweb.mypage.com\u003C\/span\u003E\u003C\/a\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E saves some data then the browser will only permit the same domain to\u0026nbsp; access the data in future.Here the domains as well as the port number should also match for access of the data that is stored.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EQuotas:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo get to know how much space can be used in the browser quotas is used.The browsers impose limits on storage capacity.When the app attempts to exceed that limit the browser will show the dialog to let the user confirm the increase.In some environments the users can see before hand how much data is being used for example like the chrome webstore.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ETransactions:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EBoth client side storage and server side storage formats support transactions.Transactions prevent race conditions wherein two sequences of operations are applied to the database at the same time leading to results that are unpredictable.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ESynchronous and Asynchronous modes:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIn synchronous mode first the storage happens then the javascript code gets executed,but whereas in asynchronous mode the javascript code gets executed and then the storage happens.However synchronous mode should be avoided at all costs,because it blocks the rendering on the page and sometimes freezes the browser.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EDifferent\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 18.6667px;\"\u003Eclient-side storage\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E\u0026nbsp;API’S\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ELocal Storage:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe webstorage consists of objects called as local storage and session storage.The local storage values can be set using \u003Cb\u003Elocalstorage.mydata=”data”\u003C\/b\u003Eand it can retrieved any time later even when the browser is closed and re-opened as local storage. mydata and there is also a second object called the session Storage which has the same functionality but it is cleared when the window is closed. \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EWeb SQL Database:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIt is a structured database with all the functionality and complexity of a typical relational database.It is supported on major mobile browsers like Android Browser,Safari,Opera and desktop browsers like Chrome,Safari and Opera.It supports a transactional database model.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EIndexed Database:\u003C\/i\u003E\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EAn indexed database is a collection of “object stores” which are nothing but tables in which a user can just create objects and throw the objects into it.We can have any number of databases ,and to increase the search\u0026nbsp; speed we can make use of asynchronous API.\u003Ci\u003E \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/i\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EFileSystem:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe file system is capable of storing BLOB content which is nothing but Binary Large Objects consisting of images,audio, video, PDF’s etc.,It gives good performance since it is an asynchronous API.It is available only on chrome and opera.It doesn't have a transaction support.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EExample\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;\/\/To check the availability of store \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;If(!localStorage.checkins)\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; localStorage.checkins = JSONs.stringify([]);\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo create the database structure in Web SQL Database if it doesn't exist openDatabase is used\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Ethis.db = openDatabase('mysampledb','1.0','mysampledb Checkins', 8192);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Ethis.db.transaction(function(tx){\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Etx.executeSql(\"create a table if it doesnot exists\" + \"checkins(id integer primary key asc, time integer, latitude float,\" + \"longitude float, mysample string)\", [],\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Efunction() {\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Econsole.log(\"it is working\");\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E}\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E});\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo set up an indexed database –\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Evar db;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Evar myversion = 1;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Ewindow.indexedStore = {};\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Ewindow.indexedStore.setup = function(handler) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; \/\/ attempt to open the database\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; var request = indexedDB.open(\"mysampledb\", version);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; \/\/ upgrade\/create the database if needed\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; request.onupgradeneeded = function(event) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; if (event.oldVersion \u0026lt; 1) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ Version 1 is the first version of the database.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var checkinsStore = db.createObjectStore(\"checkins\", { keyPath: \"time\" });\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsStore.createIndex(\"moodIndex\", \"mood\", { unique: false });\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; if (event.oldVersion \u0026lt; 2) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ In future versions we'd upgrade our database here.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ This will never run here, because we're version 1.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; request.onsuccess = function(ev) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ assign the database for access outside\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db.onerror = function(ev) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; console.log(\"db error\", arguments);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E};\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThis is how we set up a file system:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Esetup: function(handler) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; requestFileSystem(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; window.PERSISTENT,\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; 1024*1024,\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; function(fs) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; fs.root.getDirectory(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \"checkins\",\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; {}, \/\/ no \"create\" option, so this is a read op\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function(dir) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsDir = dir;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; },\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function() {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; fs.root.getDirectory(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \"checkins\",\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; {create: true},\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function(dir) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsDir = dir;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; },\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; onError\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; );\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E}\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E},\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; function(e) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; console.log(\"error \"+e.code+\"initialising “);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E}\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EConclusion:\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EUntil now we have been only aware of storing our data in the server but here there is another concept called as the client storage where the data can be stored along with its preferences and cache at the client side itself.The browsers come with built in functionality of storing the data at the client side.So guys ,lets check out how this works!!!\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2097487532317062537\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-client-side-storage-solutions.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2097487532317062537"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2097487532317062537"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-client-side-storage-solutions.html","title":"HTML5 Client-side storage solutions"}],"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:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s72-c\/goldbars-k6U--621x414%2540LiveMint.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});