Download to read offline
![• In non-strict, V8 preserves the bindings between
arguments[0] & arg0. If you re-assign, V8 says
‘too hard’ and bails out (choses to not optimize);
• It expects arg0 & arguments[0] to have the same
hidden class;
• Using strict does not preserve bindings, meaning
the code can be optimized;
Leaking or re-assigning
arguments](https://image.slidesharecdn.com/fitctalk-161004135741/85/Browser-Internals-for-JS-Devs-WebU-Toronto-2016-by-Alex-Blom-50-320.jpg)
![Safe arguments
• arguments[n], where n is defined and not a
param;
• apply(arguments);
• arguments.length;](https://image.slidesharecdn.com/fitctalk-161004135741/85/Browser-Internals-for-JS-Devs-WebU-Toronto-2016-by-Alex-Blom-51-320.jpg)
Uploaded byAlex Blom
Browser Internals for JS Devs: WebU Toronto 2016 by Alex Blom
The document discusses browser internals with a focus on JavaScript development, highlighting the roles of various browser components like the DOM tree, render tree, and layout processes. It emphasizes best practices for optimizing performance, managing reflows, and memory usage within JavaScript applications. Additionally, it covers the compilation process of JavaScript within the V8 engine, including optimizations and handling of hidden classes.
More Related Content
Similar to Browser Internals for JS Devs: WebU Toronto 2016 by Alex Blom
Browser Internals for JS Devs: WebU Toronto 2016 by Alex Blom
- 1. Browser Internals for JSDevs @alexblom alex@isleofcode.com
- 2. Isle of Code •Toronto based development; • Focused on Ember, Cordova & Electron;
- 3. ember-cordova • https://github.com/isleofcode/ember-cordova • Managed/ run by Isle of Code; • Makes packaging hybrid apps for ember really easy; • When you work on hybrid, render performance & memory management are things you have to deal with;
- 4. A Browsers Job •Get and present the selected resource; • For the purpose of this talk, we are assuming HTML;
- 5. JS / RenderEngines • Chrome uses V8 / Blink; • Safari uses Nitro / Webkit / Webcore;
- 6.
- 7. Threads • There aretwo threads: • Main: Running JS, CSS Styles, layout & painting; • Compositor: Drawing bitmaps via GPU, visibility, scroll;
- 8.
- 9. DOM Tree • TheDOM Tree has one tag per item, but does not really hold content; • e.g. • document • head • title • body • p • text node • In WebKit, the root node is Node.h • Note that there are documents, elements & text;
- 10. Render Tree • TheRender tree is the visual part of the DOM • e.g. • root • body • div • line 1 • line 2 • The root is the element that contains all other elems • May contains elms that do not have any DOM information
- 11. WebCore Representations • RenderFlow.h; • RenderBlock.h; •RenderInline.h;
- 12. Parsing HTML isHard • It allows invalid tags and keeps going, e.g. • Missing closing tags; • Putting content outside of body; • Closing tags too early; • Unlike most parsers, it works hard on your behalf & protects you;
- 13. Execution stops atScript Tags • This is why including scripts at the end of <body> is important; • In HTML5, you can include an async tag: • <script src=“ember.js” async></script>
- 14. Layout • Layout informationis often cached, so on e.g. resize events, the sizes are taken from a cache; • Layout often involves: 1 Parent renderer determines its own width. 2 Parent goes over children and: 1 Place the child renderer (sets its x and y). 2 Calls child layout if needed–they are dirty or we are in a global layout, or for some other reason–which calculates the child's height. 3 Parent uses children's accumulative heights and the heights of margins and padding to set its own height–this will be used by the parent renderer's parent. 4 Sets its dirty bit to false. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 15. Paint Order 1. Backgroundcolour; 2. Background image; 3. Border; 4. Children; 5. Outline; https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 16. Tokenization Example • <i>webu <i> would yield: • start-tag: i; • char-tag: w/e/b/u • end-tag: i;
- 17.
- 18.
- 19.
- 20. What causes Reflow? •Resizing the browser window; • using JavaScript methods involving computed styles; • adding or removing elements from the DOM; and • changing an element's classes. • https://developers.google.com/speed/articles/reflo w
- 21. visibility:hidden CSS transforms onlyaffect the selected element, not those around it
- 22.
- 23.
- 24.
- 25. Best Practices foravoiding Reflow 1. Avoid setting multiple inline styles; avoid setting styles individually. 2. Use class names of elements, and do so as low in the DOM tree as possible. 3. Batch your DOM changes and perform them offline; 4. Avoid computing styles too often. If you must then cache those values. 5. Apply animations with position: fixed or absolute so it doesn’t affect the layout of other elements. 6. Avoid table layouts, they trigger more reflows than block layouts because multiple passes must be made over the elements. 7. Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the the way down into the children of the modified node. This leads to more time being spent performing reflow. 8. Minimize CSS rules and remove unused CSS rules. 9. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this. 10.Avoid unnecessary complex CSS selectors - descendant selectors in particular. http://stage.docs.phonegap.com/tutorials/optimize/03-min-reflows/
- 26. Coalesce Changes or Work ona local fragment
- 27. Animation Frames • ~15mstarget; • Taking longer will clog your thread; • This 15ms target includes the work your browser needs to do. Best to target ~10; • Allows the browser to batch animation work;
- 28.
- 29.
- 30. Profiling • CPU Profiler:What is taking longest to run?; • Timeline: Rendering performance & bottlenecks; • Timers: Measure events; • Heap Profile: Memory, detached nodes; • Visual: Subjective;
- 31.
- 32. Memory Leaks • GarbageCollection: 2 types: • Young Generation & Old Generation
- 36.
- 37. Name closures for betterprofiling
- 38.
- 39.
- 40. node / commandline • Built in as of Node 4.4; • add —prof tag • node —prof foo.js • node —prof-process isolate-* > foo.txt
- 41. Using too muchmemory has negative implications
- 42.
- 43. V8 • V8 compilesJS to native code before executing There are no steps for interpretation or bytecode; • Compilation usually won’t happen until a function is called; • Compilation happens one function at a time;
- 44.
- 45. Compilers • General compiler& optimization compiler (TurboFan); • Code runs through general compiler first; • V8 identifies hot code for optimization; • Code via optimization compiler runs up to 100x faster; • Applies to the containing function - not blocks;
- 46. Not Optimizable • Generatorfunctions; • debugger; • eval; • with; • __proto__; • rest params; • compound let/const; • try/catch & try/finally;
- 47.
- 48.
- 49.
- 50. • In non-strict,V8 preserves the bindings between arguments[0] & arg0. If you re-assign, V8 says ‘too hard’ and bails out (choses to not optimize); • It expects arg0 & arguments[0] to have the same hidden class; • Using strict does not preserve bindings, meaning the code can be optimized; Leaking or re-assigning arguments
- 51. Safe arguments • arguments[n],where n is defined and not a param; • apply(arguments); • arguments.length;
- 52. Not Optimizable • Generatorfunctions; • debugger; • eval; • with; • __proto__; • rest params; • compound let/const; • try/catch & try/finally;
- 53. Isolate non optimizablecode into small functions
- 54. Hidden Classes • Keepingtrack of dynamic, changing classes is hard; • V8 assigns hidden to represent objects;
- 55. • The firsthidden class is initialized on the ‘new’ invocation (C0); C0
- 56. • The firsthidden class is initialized on the ‘new’ invocation (C0); • The second is initialized when language is assigned (C1); C0 C1
- 57. • The firsthidden class is initialized on the ‘new’ invocation (C0); • The second is initialized when language is assigned (C1); • The third is initialized when skill is assigned (C2); • goodProgrammer has a class of C2; C0 C1 C2
- 58. Class Chain • C0is a hidden class that is an empty object; • C1 is based on C0, with a language property; • C2 is based on C1, with a skill property; • C0 -> C1 -> C2;
- 59. • Same hiddenclasses can be used. Both programmers have a hidden class of C2; C0 C1 C2 C0
- 62. Hidden Class canno longer be re-used • C0 -> C1 -> C2 can no longer be used for badProgrammer. The shape of the objects are different; • A new hidden class is created for the extra property, which is only attached to badProgrammer; • Now V8 is tracking two classes, and is unlikely to optimize;
- 63. Order matters • Assigningproperties in different orders results in different hidden classes; • Consider hidden classes to be a linked list, where the class is the last node (they are not);
- 64. Consistently having thisproblem is not really a JS problem. You have a modelling problem.
- 65. Monomorphic vs Polymorphic • Monomorphicare hidden classes that are always passed the same object type (e.g. String); • V8 assumes classes are monomorphic. Passing a different object type to the same function requires a new hidden class to be created;
- 66. Optimize Mobile • Payload<500kb, 1mb is often safe; • <5k nodes, <10k in extreme circumstances; • Coalesce network requests;
- 67. Further Reading • https://github.com/petkaantonov/bluebird/wiki/Opt imization-killers •https://www.html5rocks.com/en/tutorials/internals /howbrowserswork/
- 68. Browser Internals for JSDevs @alexblom alex@isleofcode.com