JS Essence
Download as PPTX, PDF0 likes2,247 views
This document discusses JavaScript performance best practices. It covers loading and execution performance, DOM scripting performance, and patterns to minimize repaints and reflows. Some key points include batching DOM changes, event delegation to reduce event handlers, and taking elements out of the document flow during animations. References are provided to resources on JavaScript performance testing and design patterns.
![Good parts
• === : type safe vs (==)
• [] : new Array()
• {} : new Object()
• a && b : if (a) b else a
• a || b : if (a) a else b
• closures (~ lambda curring)](https://image.slidesharecdn.com/js-121213025114-phpapp01/85/JS-Essence-12-320.jpg)
JS Essence
- 1. JavaScript
- 4. TP2 - Rich UI
- 5. TP2 - Rich UI
- 6. TP3 - high-performance UI
- 7. Goals • JS popularization • JS as engineering tool
- 8. JS Phenomena
- 9. Roadmap • Embedded JS issues: - bad parts, good parts - imperative skin upon functional nature - misunderstanding of prototype inheritance - missing modules support - performance issues
- 10. Bad parts, good parts
- 11. Bad parts • global variables • eval • a++ • math • with • new (Number | String | Boolean) • == vs ===
- 12. Good parts • === : type safe vs (==) • [] : new Array() • {} : new Object() • a && b : if (a) b else a • a || b : if (a) a else b • closures (~ lambda curring)
- 13. Java(??!)Script
- 14. Java(??!)Script • ..one more LISP dialect.. • Mocha • LiveScript • JavaScript
- 16. Functional nature • functions are the 1-st class objects: - assign to variables - pass as an argument - return as a result
- 18. OOP in JavaScript • Объект_о-ориентированный • Объектно-ориентированный
- 19. Prototype chain
- 20. Classical OOP simulation • Classical OOP inheritance can be simulated: > I would recommend John Resig’s “Class” object http://ejohn.org/blog/simple-javascript-inheritance/
- 21. Classical OOP simulation Class.extend({ init: function(a, b) { // .ctor this._super(a, b); }, method1: function() { // do something } });
- 22. Inheritance examples • Some examples
- 23. Inheritance examples var F = function(n) { this.name = n; } var a = new F(“a”); var b = new F(“b”);
- 24. Inheritance examples var F = function(n) { this.name = n; } F.prototype = , root: “hello world!” -; var a = new F(“a”); var b = new F(“b”); a.root // ??? b.root // ???
- 25. Inheritance examples var F = function(n) { this.name = n; } F.prototype = , root: “hello world!” -; var a = new F(“a”); var b = new F(“b”); a.root = “Prototype inheritance magic”; b.root // ???
- 26. Inheritance examples var F = function() {} var a = new F(); a.constructor === F // ???
- 27. Inheritance examples var F = function() {} F.prototype = , root: “hello world!” -; var a = new F(); a.constructor === F // ???
- 28. Dynamic inheritance var F = function() {}; F.prototype = { count: 0, augment: function() { ++F.prototype.count; F.prototype.test = function() { alert(this.count) } } }; var a = new F(); var b = new F(); a. augment(); a.test() // ??? b.test() // ???
- 30. Modules
- 31. Modules simulation • No modules. Global variables RULEZZZ!!11
- 32. Modules simulation • No modules. Global variables RULEZZZ!!11 BAD!
- 33. Modules simulation • No named modules. BUT functional context (function(global) { . . .})(window)
- 34. Modules simulation • No named modules. BUT functional context (function(global) { . . .})(window)
- 35. Modules simulation • No named modules. BUT functional context (function(global) { . . .})(window) var myJQueryVar = $.noConflict()
- 36. Modules simulation • Namespacing as global variables chains newsite.common.utils newsite.common.services var newsite = newsite || {}; newsite.common = newsite.common || {}; newsite.common.utils = function() , … -;
- 37. Modules simulation • Namespacing as global variables chains newsite.common.utils newsite.common.services • $LAB .script(“newsite.core.js").wait() .script(“newsite.common.utils.js") .script(“newsite.common.services.js“) .wait(function() { /* ready */ })
- 38. Modules simulation RequireJS http://requirejs.org/
- 39. Modules simulation - RequireJS <!DOCTYPE html> <html> <head> <title>My Sample Project</title> <script src="path_to/require.js“ data-main="entry_points/main"> </script> </head> <body> <h1>My Sample Project</h1> </body> </html>
- 40. entry_points/main.js require( *“dir/module1“, “dir/module2“+, function(m1, m2) { /* to do: … */ } );
- 41. dir/module1.js define( *“dependency-on-some-other-modules”+, function () { return { color: "black", clear: function() ,…- }; } );
- 42. Performance
- 43. IE6?!
- 44. Performance - prologue • It’s still possible to write slow JavaScript on the new fast JavaScript engines • JavaScript performance directly affects user experience
- 46. Performance • Loading & execution • DOM scripting
- 47. Loading and execution • Most browsers use a single UI thread for UI updates and JavaScript execution • Appearance of a <script ..> tag cause page download and rendering to stop and wait for the script to complete before processing • Even parallel script downloads block downloading other resources (images, CSS)
- 48. Loading and execution • Put <script> tags as close to the bottom of the <body> as possible • Load scripts in groups (100 kb faster than 4 x 25kb) • Minify your scripts • Optimize your stylesheets
- 49. Non-blocking loading • <script defer> (IE 4+, FF 3.5+) • Dynamic <script> elements – Parallel non-blocking loading – Put into <head> to prevent “operation aborted” – Remember of ordering (cross-browser variation) • XMLHttpRequest injection – Inline <script> vs eval() – Downloading from CDNs impossible
- 50. RequireJS DO all the job!
- 51. DOM Scripting • Live DOM collections • Repaint and Reflow • Handling DOM events
- 52. What is DOM? • Document Object Model – language independent application interface (API) for working with XML and HTML documents • Browsers keep DOM and JavaScript implementations independent of each other
- 53. Toll bridge • Touch the DOM lightly • Stay within ECMAScript as much as possible
- 54. HTML collections • Expensive live collections • Use local variables when accessing collection elements
- 55. Repaints and reflows • DOM tree • Render tree
- 56. Reflow process When a DOM tree change affects element geometry – browser recalculate geometry and position of elements that could have been affected by the change and reconstructs the Render tree
- 57. Redraw process Once the reflow is complete, the browser redraws the affected parts of the screen
- 58. When does a reflow happen? • Page renders initially • Visible DOM elements are added or removed • Elements change position • Element change size (margin, padding, border, width, height) • Content is changed (text or image with different size) • Browser window is resized
- 59. Queuing and flushing reflows • Browsers optimize reflow by queuing changes and performing them in batches • Never request layout information while it’s being changed
- 60. Queuing and flushing reflows • offsetX • scrollX • clientX • getComputedStyle (currentStyle in IE) * X – Top, Left, Width, Height
- 61. Minimizing repaints and reflows • Combine multiple DOM and style changes into a batch and apply them once
- 62. Batching DOM changes • Take the element off of the document flow • Apply multiply changes • Bring the element back to the document
- 63. Ways to modify the DOM off the document • Hide, apply changes and show again • Use document fragment to build subtree outside of the live DOM and then copy it to the document • Copy the original element into an off- document node, modify the copy and replace original element when done
- 64. Take elements out of the flow for animation 1. Use absolute positioning 2. Animate the element 3. When the animation is done, restore the positioning JQuery DO this job for you!
- 65. Event delegation • A lot of event handlers affects memory, performance and useless since user clicks 1 button of 100 for example • Set event handler for container element and use event delegation
- 66. Performance essence • http://jsperf.com/ • http://www.developer.nokia.com/Community /Wiki/JavaScript_Performance_Best_Practices
- 67. Patterns • http://www.addyosmani.com/resources/esse ntialjsdesignpatterns/book/
- 68. How to move next • Primary • Advanced • Meta-level
- 69. How to move next • http://habrahabr.ru/post/117838/