The document provides tips for optimizing JavaScript performance, including:
1. Using external files efficiently by minimizing requests and using async loading.
2. Managing scope and variables properly to avoid global issues and improve caching.
3. Optimizing DOM manipulation by caching selections and minimizing reflows.
4. Additional techniques like avoiding for-in loops on arrays and defining objects using literals.
The document provides tips for optimizing JavaScript performance, including:
1. Using external files efficiently by minimizing requests and using async loading.
2. Managing scope and variables properly to avoid global issues and improve caching.
3. Optimizing DOM manipulation by caching selections and minimizing reflows.
4. Additional techniques like avoiding for-in loops on arrays and defining objects using literals.
The document provides tips for optimizing JavaScript performance, including:
1. Using external files efficiently by minimizing requests and using async loading.
2. Managing scope and variables properly to avoid global issues and improve caching.
3. Optimizing DOM manipulation by caching selections and minimizing reflows.
4. Additional techniques like avoiding for-in loops on arrays and defining objects using literals.
The document provides tips for optimizing JavaScript performance, including:
1. Using external files efficiently by minimizing requests and using async loading.
2. Managing scope and variables properly to avoid global issues and improve caching.
3. Optimizing DOM manipulation by caching selections and minimizing reflows.
4. Additional techniques like avoiding for-in loops on arrays and defining objects using literals.
Copyright:
Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 15
STOP BURNING CLIENTS!!!
<script>alert(Start!!!)</script>
> COMMON PROBLEMS
1 > Dealing with external files 2 > Value & Execute (Scope chain, Closure)
TODO GA Example: var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.googleanalytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); <script defer src=/path/to/js.js></script> <script async src=/path/to/js.js></script>
DO MORE Compress content: Before
After
2 VARIABLE & EXECUTE
Global / Local Variable Global variable access (function(){ n=0; m=0; for(i=0;i<=9999;i++){ m=n+i; } })(); ~18ms Local access, global cache (function(){ var n=0, m=0; for(var i=0;i<=9999;i++){ m=n+i; } })(); ~2ms
SCOPE CHAIN
3 - DOM Before: (function(){ for(i=0;i<=1000;i++){ document.getElementById('toc__header').innerHTML='Table of Contents ' +i; } })(); ~85ms After: (function(){ var doc = document.getElementById('toc__header').innerHTML='Table of Contents '; for(i=0;i<=1000;i++){ doc + i; } })(); ~2ms
DOME ELEMENT UPDATE
Repaint : Whenever change style (background, color, border, visibility) document.getElementById().style.color=red; Reflow : Whenever Document tree modified, windows resize... The engine must re-calculate , determine the whole DOM and other DOM that effected! => Try to avoid reflow.
4 - AND MORE Avoid for-in : Whene working with array, not like others normal for loop. For-in require engine to build list of all items in of array with their properties. Avoid use string when called via setTimeout(), setInterval(). Ex: setInterval(calledFunc()). Define object in literal: Classic : for(var i=0;i<=999;i++){ var arr=new Array; var obj=new Object; } ~8ms Literal : for(var i=0;i<=999;i++){ var arr=[]; var obj={}; } ~6ms
Minimum request external file : Every request will have extra header with cookie information. Gzip : for compress data before sent to client (not affect to image, PDF). Http cache header option : Etag, last-modified
Ref : https://developer.mozilla.org/en/javascript http://dev.opera.com/articles/javascript/ http://msdn.microsoft.com/en-us/library/yek4tbz0%28v=vs.85%29.aspx http://www.ecmascript.org/docs.php Toys : http://getfirebug.com/ https://addons.mozilla.org/en-US/firefox/addon/web-developer/ https://addons.mozilla.org/en-us/firefox/addon/yslow/ http://www.microsoft.com/download/en/details.aspx?id=18359 (Web dev toolbar) Opera : Dragonfly Safari : Prefences / Advanced / Show Develop menu in menu bar Speaker : canhnm@opensource.com.vn
