Download as PDF, PPTX
Uploaded byPatrick Sheridan
JavaScript Secrets
The document discusses best practices and optimizations for JavaScript programming, emphasizing the importance of using strict equality operators (=== and !==) to avoid unexpected behaviors caused by coercion. It covers concepts such as hoisting, asynchronous script tags, minification for performance improvements, and optimizing loops by reducing costly namespace lookups. The author advocates for cleaner code and efficiency in JavaScript applications, providing strategies to enhance debugging and execution speed.
More Related Content
JavaScript Secrets
- 1. JAVASCRIPT SECRETS Cleaner Code/ Faster Apps Wednesday, March 30, 2011
- 2. About me • CTO,Modus Create. • RIA UI/UX design • High-end consulting • Training / workshops • Architectural guidance • Application architecture • Specialize in Sencha technologies. Wednesday, March 30, 2011
- 3.
- 4.
- 5.
- 6. My books Wednesday, March30, 2011
- 7. AGENDA • Discuss some of the secrets behind JavaScript Wednesday, March 30, 2011
- 8. 1995-2005 •Advance use of JavaScript was limited until ~ 2005 • Field validation • Mouse cursor trails • Right click preventers • Popup storms • Lots of books written • Many taught bad practices Wednesday, March 30, 2011
- 9. Today? • JavaScript frameworks in use more • Do more, quicker! • Way better debug tools • Firebug • Webkit inspector • IE8 JS debug console (IE9 is a little better) • HTML5 is gaining popularity • Flash is (somewhat) threatened Wednesday, March 30, 2011
- 10. It’s a JavaScriptworld! Wednesday, March 30, 2011
- 11.
- 12. Arithmetic • Arithmetic operators •+ (add/concatenate) •- (subtract) •* (multiplication) •/ (division) •% (modulus/remainder) Wednesday, March 30, 2011
- 13.
- 14. Remember • The + operator has a dual purpose • Addition and concatenation Wednesday, March 30, 2011
- 15. Operator coercion • For -, *, / operators, • JavaScript will try to convert strings into numbers. Wednesday, March 30, 2011
- 16. •When at all possible, try to perform math using numbers instead of strings. •This will help reduce the chance of errors. Wednesday, March 30, 2011
- 17.
- 18. Comparison operators with if/then • Most of us use if and then to control logic branches. • There is a hidden danger with == and != • Sometimes the result of an expression test can lead to unexpected code behavior Wednesday, March 30, 2011
- 19. Take the following.... Wednesday,March 30, 2011
- 20. Meet “Falsy” and“Truthy” • Because JavaScript tries to coerce values, expressions using • == and != • Expressions are boiled down to “Falsy” and “Truthy” • There should be no room for “Falsy” and “Truthy” in your code. Wednesday, March 30, 2011
- 21.
- 22. Takeaway: == and != are EVIL Do not use them! Wednesday, March 30, 2011
- 23. Instead... • Use === and !== • They are not evil :) • Get expected results every time • both === and !== test for value and data type • No coercion takes place Wednesday, March 30, 2011
- 24. Fight the evil. All are false! Wednesday, March 30, 2011
- 25.
- 26. Hoisting •A mechanism for setting and creating things in a function when that function is executed. • When a function is executed, two passes are actually made on the function by the JavaScript interpreter. • It can lead to much pain when dealing with function statements. Wednesday, March 30, 2011
- 27. How a functionreally is interpreted at execution time Wednesday, March 30, 2011
- 28. How a functionreally is interpreted at execution time Wednesday, March 30, 2011
- 29. Interpretation case 2 Wednesday,March 30, 2011
- 30. More on hoisting • Due to hoisting, • function expressions • have their reference name created first and are assigned at execution time. • function statements • have their reference name created and are assigned before execution time Wednesday, March 30, 2011
- 31. Function statement vs.expression Wednesday, March 30, 2011
- 32. Function statement hoisting Wednesday,March 30, 2011
- 33. Function statement hoisting Wednesday,March 30, 2011
- 34. This should beimpossible Wednesday, March 30, 2011
- 35. Know hoisting.... • According to the hoisting rules, the second jump function should have been created • Firefox actually honors the conditional statement - what?! • Some browsers follow these rules and some don’t • This is because the language definition doesn’t really tell you what it’s supposed to do, so there are different implementations. • Coding this way can lead to unpredictable behavior of your Wednesday, March 30, 2011
- 36. Avoid function statements! Wednesday,March 30, 2011
- 37.
- 38. Asynchronous script tags • For HTML5 enabled browsers • Set async=‘async’ in your script tags. • <script type=‘text/javascript’ src=’/myfile.js’ async=‘async’></script> • Will allow JavaScript files to be non-blocking Wednesday, March 30, 2011
- 39. Deferred execution • Set defer=‘defer’ in your script tags. • <script type=‘text/javascript’ src=’/myfile.js’ defer=‘defer’></script> • Will allow JavaScript code in those files to execute after the page has loaded. • Does not work in all browsers :( Wednesday, March 30, 2011
- 40.
- 41. Facts about minification • Reduce file size sent to the browser • Increase interpretation speed of JS files by the browser • Some Tools: • Yui-Compressor • Google Closure • Packer Wednesday, March 30, 2011
- 42. A simple JSFile • 183 Bytes Wednesday, March 30, 2011
- 43. Minified • 103 Bytes • 44% savings Wednesday, March 30, 2011
- 44. A better JSfile • 184 Bytes Why is it better!?!? Wednesday, March 30, 2011
- 45. ‘Better code’ ===‘more savings’ • 95 Bytes • 49% Savings Wednesday, March 30, 2011
- 46.
- 47. Loops Minifier can't claim space Namespace lookups costly Wednesday, March 30, 2011
- 48. Faster loops Minifier friendly No initializer Faster Lookup Wednesday, March 30, 2011
- 49. Better reference usage Wednesday,March 30, 2011
- 50. Less than optimallookups Wednesday, March 30, 2011
- 51. Less than optimallookups Wednesday, March 30, 2011
- 52. Optimal lookups Wednesday, March30, 2011
- 53. Recap •+ operators will concatenate strings, while -, *, / will coerce values • Avoid “Truthy” and “Falsy” by using === and !== • Use async and defer enabled Script tags when possible. • Use function expressions Wednesday, March 30, 2011
- 54. Recap • Minify your code when possible • Develop “Minifier-friendly” code • Create optimized loops • Reduce namespace lookups by using local references Wednesday, March 30, 2011
- 55. Thanks!!! Questions? Twitter: @_jdg Mobile: 301-785-3030 Web: moduscreate.com Email: jay@moduscreate.com Wednesday, March 30, 2011
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n