1 / 44

Create fast and f luid i nterfaces with HTML, CSS, JavaScript and WinJS

Create fast and f luid i nterfaces with HTML, CSS, JavaScript and WinJS. Paul Gildea Program Manager 3-156. Agenda. Understand the top performance opportunities Discover what new APIs are available to improve performance Learn to use new APIs to increase UI responsiveness.

naava
Download Presentation

Create fast and f luid i nterfaces with HTML, CSS, JavaScript and WinJS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Create fast and fluid interfaces with HTML, CSS, JavaScript and WinJS Paul Gildea Program Manager 3-156

  2. Agenda • Understand the top performance opportunities • Discover what new APIs are available to improve performance • Learn to use new APIs to increase UI responsiveness

  3. Understand top performance opportunities • Ensuring UI responsiveness • Managing memory consumption • Panning large lists of data • Startup time

  4. Ensuring UI responsiveness

  5. Problem: UI responsiveness • HTML apps are single threaded • Executing expensive code can block the UI thread • Difficult to coordinate tasks across the platform • Cannot prioritize unrelated tasks against each other

  6. Solution: WinJS Scheduler • A prioritized work queue – WinJS.Utilities.Scheduler • WinJS controls schedule their work • Scheduler leverages WinRT to prioritize across all layers • App developers can schedule work at appropriate priority • Simple to build more specific app policy on top the Scheduler

  7. WinJS Scheduler – Priorities Use high priority sparingly and appropriately Default priority range for most tasks Long running idle tasks

  8. WinJS Scheduler – Code Example • varS = WinJS.Utilities.Scheduler; • // Example of a scheduling work at normal priority • S.schedule(function () { • // Scheduled code to execute • }, S.Priority.normal); • // Example of scheduling a data request at high priority • S.schedule(function() { • // Scheduled code to execute • }, S.Priority.high, this,"Work item description");

  9. Schedule your work to ensure UI responsiveness.

  10. Managing memory consumption

  11. Problem: Control lifetime is unpredictable • Lack of a clear pattern to clean up UI controls • Apps are responsible for managing their own clean up • Creating new controls and leaving old controls behind is more common in a Single Page Application (SPA) model

  12. Solution: WinJS dispose pattern • WinJS supports a pattern for UI control disposal • Built-in UI controls implement this pattern • Custom control authors can implement dispose pattern • App developers should call dispose when controls are no longer needed • Dispose is called when navigating and panning

  13. Controls: Implementing Dispose • varMyControl = WinJS.Class.define(function (element, options) { • this.element= element; • element.winControl= this; • // Add win-disposable class to element • WinJS.Utilities.addClass(this.element, "win-disposable"); • this._disposed= false; • }, • { • dispose: function () {//...} • });

  14. Controls: Implementing Dispose • dispose: function () { • if(this._disposed) { return; } • this._disposed = true; • // Call dispose on all children • WinJS.Utilities.disposeSubTree(this.element); • // Disconnect click handlers, resources, connections, etc. • if (this._button && this._clickHandler) { • this._button.removeEventListener("click", • this._clickHandler, false); • } • }

  15. Apps: Calling Dispose • // Responds to navigation by adding new pages to the DOM. • _navigating: function (args) { • // Dispose all controls in the view • WinJS.Utilities.disposeSubTree(this._element); • // Remove old content from the view • this._element.removeChild(oldElement); • oldElement.innerText= ""; • // Add new content to the view • this._element.appendChild(newElement); • }

  16. Use the dispose pattern to manage the lifetime of your UI controls.

  17. Panning large lists of data

  18. Panning: Scenario overview

  19. Panning: Scenario overview – Item Renderers

  20. Panning: Scenario overview – ListView

  21. Problem: Panning in large lists • Performance trade off between binding templates and item renderers • Complexity and cost of items have an impact on panning • ListView unable to leverage new CSS layouts

  22. Solution: Optimized binding templates • Compiled into rendering functions • Full debugging support • Leverages dispose pattern during unrealization of items

  23. Solution: Asynchronous renderers • Use multi-stage async renderers to control the cost of rendering • Leverage image loader to prioritize image loading of on screen items

  24. Optimized Templates Demo

  25. Use Binding Templates for the best mix of performance, tooling, and debugging. For fine tuning use multi-stage async renderers.

  26. Solution: Improved ListView layout • ListView is optimized to use underlying native CSS layouts • New virtualization scheme updates priority of item rendering based on user panning • Additional performance gains in editingand initialization

  27. Solution: Improved ListView layout

  28. Panning in Mail: Windows 8 and Windows 8.1 Windows 8 – WinJS 1.0 Windows 8.1 – WinJS 2.0

  29. Use the ListView and your app will get performance benefits out of the box.

  30. Startup time

  31. Startup in apps – Review Timeline App visible App read to use Splash screen Ready for user Get data Populate ListView Animate content Loading and parsingof HTML, JS, CSS WinJS.UI.processAll App initialization New host process Windows Runtime "activated" event Splash screen cross fade Navigation Tile click

  32. Problem: Startup in apps • Loading and parsing time of HTML can be slow • Difficult for apps to coordinate critical work before/after splash screen • Deferring too much work can increase time to interactivity

  33. Startup in apps – Timeline and UX App visible App ready to use Splash screen

  34. Startup in apps – Optimize loading/parsing App visible App ready to use Splash screen

  35. Loading/parsing HTML • Solution: Optimize loading/parsing of HTML • All your HTML tips and tricks for web sites still apply • Ensure you have well structured markup • Package critical app resources

  36. Startup in apps – Optimize startup work App visible App ready to use Splash screen Splash screen

  37. App specific work • Solution: Schedule startup critical work • Determine your key work needed for startup • Schedule that work at high priority • Drain the Scheduler at high priority during activation

  38. Startup – Code Example

  39. Use HTML tips and tricks for parsing and loading.Use the Scheduler for start up critical work.

  40. Summary • Ensuring responsive UI – WinJS Scheduler • Managing memory consumption – WinJS dispose pattern • Panning – Binding templates, async renders, and ListView • Startup – leverage HTML tips and tricks and WinJS Scheduler

  41. Resources • 3-068: Web Runtime Performance • 2-098: App Performance: Planning costs less than Rearchitecting • 3-099: Scenario-Guided app performance, from UX to API • 2-100: Improving the Performance of your Windows app with tools • 2-165: What’s new with WinJS 2.0

  42. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!

More Related