Download to read offline
Uploaded bySigma Software
Performance optimization in JS. Based on project experience, Алина Синявская и Тельман Агабабов
This document discusses optimizing a web application's performance when running on mobile devices like the iPad. It describes issues encountered like crashing after 10-25 seconds of active zooming due to exceeding available memory. Solutions proposed include removing iframes, compositing layers, and unnecessary assets to reduce memory usage. Lessons learned are to support new devices, be cautious of compositing layers on mobile, manage assets carefully, only use iframes if needed, and regression test on new operating systems.
Performance optimization in JS. Based on project experience, Алина Синявская и Тельман Агабабов
- 1. Performance optimization of Web application basedon project experience
- 2. by Alina Sinyavskaya and TelmanAgababov Front-End developers at Sigma Software 2
- 3.
- 4.
- 5. Project structure data validation databindings business logic 5
- 6.
- 7.
- 8.
- 9. ● each variablein $scope is a watcher ● $digest is called on every change ● second $digest is called when a change is found AngularJS optimization 9
- 10. AngularJS optimization ● Minimize$digest calls ● Minimize watchers number 10
- 11. AngularJS optimization Optimize ng-repeat <divng-repeat="item in itemsList"> {{item.name}} </div> <div ng-repeat="item in itemsList track by item.id"> {{item.name}} </div> 11
- 12. AngularJS optimization Optimize bindings <div> <span>{{staticValue}}}</span> </div> <div> <span>{{::staticValue}}</span> </div> 12
- 13. AngularJS optimization Optimize watchersnumber 13 <section ng-if="isSectionAvailable"> <main>{{ sectionContent }}</main> </section> <section ng-show="isSectionActive"> <main>{{ sectionContent }}</main> </section>
- 14. AngularJS optimization $digest dirtychecking optimization 14 <section> <div>{{ sectionInfo }}</div> </section> <section> <div>{{ getSectionInfo() }}</div> </section>
- 15. AngularJS optimization $digest dirtychecking optimization 15 <div ng-repeat="item in orderedItems track by item.id"> {{item.name}} </div> <div ng-repeat="item in itemsList | orderByName track by item.id"> {{item.name}} </div>
- 16. AngularJS optimization $digest scopeminimization 16 <dialog-component x="options.x" y="options.y" title="options.title"> </dialog-component> <dialog-component options="options"> </dialog-component>
- 17. AngularJS optimization manual $digestinvocation 17 model changed$digest for synchronization
- 18. AngularJS optimization $digest callsoptimization 18 $scope.$eval(); $scope.$apply(); $timeout( function() { }, delay); $interval( function() { }, delay); $rootScope.value = newValue; $parent.value = newValue;
- 19. AngularJS optimization $timeout/$interval scopereduction 19 var intervalInstance = $interval(function() { updateData(); $scope.$digest(); }, delay, false);
- 20. AngularJS optimization $apply scopereduction 20 // from view $scope.$digest(); // safe option $timeout(function() { $scope.$digest(); }, 0, false); // root scope $scope.$applyAsync();
- 21. AngularJS optimization $scope reduction ●split into components ● child controllers ● ng-if / ng-repeat 21
- 22. AngularJS optimization $digest cyclesremove ● update values directly in DOM element 22
- 23. AngularJS performance check $watcherscalculation 23 function getElementWatchers(element) { // current element watchers var watchersNumber = element.data().$scope.$$watchers.length; // child watchers angular.forEach(element.children(), function (childElement) { watchersNumber += getElementWatchers(angular.element(childElement)); }); return watchersNumber; } console.log("watchers count: ", getElementWatchers($("custom-component")));
- 24. AngularJS performance results results 24 $digest60-70% $digest 6-8%
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. IE11 optimization ● Createa new layout 32 .new-layout-transform { transform: translateZ(0); /* any CSS 3d option;*/ } .new-layout-will-change { will-change: transform; }
- 33.
- 34. IE11 optimization ● Reducereflow 34
- 35. IE11 optimization ● Reducereflow 35 elementA.className = "a-style"; var heightA = elementA.offsetHeight; // layout is needed elementB.className = "b-style"; // invalidates the layout var heightB = elementB.offsetHeight; // layout is needed again elementA.className = "a-style"; elementB.className = "b-style"; var heightA = elementA.offsetHeight; // layout is needed and calculated var heightB = elementB.offsetHeight; // layout is up-to-date (no work)
- 36. IE11 optimization ● Reducere-layouts 36
- 37. IE11 optimization ● CacheDOM accessing results 37 $("element") .css("color", "#AA0000") .css("background-color", "#00ff00") .width(200) $("element").css("color", "#AA0000"); $("element").css("background-color", "#00ff00"); $("element").width(200);
- 38. IE11 optimization ● Gatherchanges in DOM (requestAnimationFrame) 38
- 39. React in AngularJS ●ng-react 39 <react-component props=”componentOptions” name="ComponentName"> </react-component>
- 40. IE11 performance results results 40 3200watchers 2 - 5 FPS 40 - 60 FPS 600 watchers
- 41.
- 42. React problems $digest /render cycles 42 onUpdated
- 43. React optimization reduce $digest/ render cycles 43 onUpdated onUpdatedupdate update
- 44.
- 45. React optimization remove unnecessaryre-renderings 45 shouldComponentUpdate: function (nextProps, nextState) { return this.state.id !== nextState.id || this.state.value !== nextState.value || this.props.isActive !== nextProps.isActive || this.props.styleOptions.color !== nextProps.styleOptions.color; } shouldComponentUpdate: function () { return this.isMounted(); }
- 46. React optimization re-rendering 46 ● arrayitems re-rendering ● scope size re-rendering ● frame rendering optimization key={item.id} small components requestAnimationFrame
- 47. React optimization results 47 Scriptingx4 Rendering x1.5 Painting x1.5
- 48.
- 49. Tablet support requested:iOS & Android ● iPad 2/3/4/Air 2/Pro ● Samsung/Lenovo 49
- 50. Touch gestures: ● scroll ●swipe ● drag&drop ● pinch & zoom 50
- 51.
- 52. Diving into GPUanimations 52
- 53.
- 54. How painting works ReflowRepaint GPU Display 54
- 55. How to optimize? Tooptimize the painting, the browser has to ensure that the animated CSS property: ● does not affect the document’s flow, ● does not depend on the document’s flow, ● does not cause a repaint. 55
- 56. How optimization works:compositing layers 56
- 57. How optimization works ReflowRepaint GPU Display 57
- 58. Optimization pros ● Quicksmooth animation with subpixel precision ● No binding to the CPU 58
- 59.
- 60.
- 61. How much memoryis required? 300x300, #FF0000 300 x 300 x 4 = 360,000 Bytes! 61
- 62. Compositing reasons ● 3Dtransformations: translate3d, translateZ, etc. ● <video>, <canvas>, <iframe> elements ● transform and opacity animations ● backface-visibility: hidden ● CSS filters ● will-change ● -webkit-overflow-scrolling: touch ● elements that overlap composited layers 62
- 63. View layers informationin Chrome 63
- 64.
- 65.
- 66.
- 67.
- 68. No compositing layers #a{ left: 50px; top: 50px; z-index: 2; animation: move 1s linear infinite alternate; background: red; } @keyframes move { from { left: 30px; } to { left: 100px; } } 68
- 69.
- 70.
- 71. Let’s create compositinglayer... #a { left: 50px; top: 50px; z-index: 2; animation: move 1s linear infinite alternate; background: red; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(70px); } } 71
- 72.
- 73.
- 74.
- 75.
- 76. What about iPad? ●iPad Air 2 / iPad Pro: 2 GB RAM ● iPad 4 / iPad 3: 1 GB RAM ● iPad 2: 512 MB RAM 76
- 77. Let’s create someexample 77
- 78. Demo appz-index will-change will-change will-change JS timer CSSanimation with opacity iframe -webkit-overflow- scrolling: touch child iframe transform: scale 78
- 79.
- 80. iPad Air 2with iOS 10 Crashes after 25 seconds of active zooming 80
- 81. View layers informationin Safari 81
- 82.
- 83.
- 84. Let’s optimize ourapplication 84
- 85. Let’s optimize ourapplication 1. remove transform: scale 2. remove 3d transformations 3. remove will-change property 4. -webkit-overflow-scrolling: touch -> -webkit-overflow-scrolling: auto 5. minimize assets 6. remove child iframe 85
- 86.
- 87.
- 88.
- 89. iPad Air 2with iOS 11 Crashes after 10 seconds of active zooming! 89
- 90.
- 91. Viewing compositing borders TODOscreenshot 91
- 92.
- 93.
- 94. Compositing borders ● Blue:page tiles. ● Green: has a compositing layer with its own painted content. ● Orange: has a backing store and extend partially offscreen, so it’s converted to tiled layers. ● Pale Blue: clipped layer. ● Light Blue and Dark Blue: the image is being mapped directly into the backing store without having to be painted. ● Yellow: container layers have blue borders with a yellow inner border. ● Bright Pink: elements with backdrop filters. 94
- 95. Compositing borders ● Blue:page tiles. ● Green: has a compositing layer with its own painted content. ● Orange: has a backing store and extend partially offscreen, so it’s converted to tiled layers. ● Pale Blue: clipped layer. ● Light Blue and Dark Blue: the image is being mapped directly into the backing store without having to be painted. ● Yellow: container layers have blue borders with a yellow inner border. ● Bright Pink: elements with backdrop filters. 95
- 96.
- 97.
- 98. What can wedo? ● remove all iframes or ● leave iframes but remove all compositing layers 98
- 99.
- 100. Reported issues ● Webkitbugzilla - Status: NEW, ~ 22 similar issues ● Apple bugzilla - Status: NEW. Reproduced on Apple website. 100
- 101. Lessons learnt ● Beready to support new devices ● Be careful with compositing layers especially on iOS devices ● Pay attention to your assets ● Use iframes only in case of necessity ● Perform regression testing when new OS is installed 101
- 102. Thanks for yourattention!