Talk by Doris Chen, Ph.D.
Web Site and Modern Apps
Modern Apps are native JavaScript apps written either for Windows 8 or Windows Desktop. With JavaScript and Windows 8 you will be able to take Web apps and implement them natively as Windows 8 apps without modifying any of the code.
General Best Practices for JavaScript Development
Some tips and tricks that still work for JavaScript Development include:
1. For Safe dynamic content, use innerHTML to create your DOM
2. Link CSS styles heels at the top of the page, not at the bottom
3. Avoid inline JavaScript and inline CSS styles
4. Don't parse JSON by hand, use JSON.parse
5. Build Session "50 performance tricks to make your HTML5 apps and sites faster"
http://channel9.msdn.com/Events/Build/2012/3-132
Game: Make it Run Faster
5 Principles to improve your performance
An example game includes a matrix of players with arms outstretched at 90 degree angles. When one is clicked, it spins and high-fives it's neighbor if they are aligned right. By pressing the F12 key while running an app you can track the UI responsiveness in the app you are running, allowing one to track the CPU utilization and the Visual throughput. Some of the metrics involved include Loading, Scripting, GC, Styling, Rendering and Image decoding. What actually impacts the visual throughput includes networking, HTML, CSS, collections, Javascript, Marshalling, DOM, Formatting, Block Building, Layout and Rendering. These are the variables you need to control to keep the framerate at or above 60 fps. When one needs a more detailed profiler, check out Windows Performance Toolkit at http://aka.ms/WinPerfKit.
Principle #1: Memory Usage: Stay Lean
Keeping track of Garbage Collection will show you where your code needs to be more efficient. Things that trigger a garbage collection include every call to new or implicit memory allocation which reserves GC memory and when a pool is exhausted.
Using the example, instead of creating a new object for each person in each direction, create the person as an object and set the different directions as the states for the objects, cleaning up the object pool.
In this example, the GC time was reduced to 1/3rd the amount of the original code.
This shows that the best practices for staying lean include avoid unnecessary object creation, use object pools when possible and to be aware of allocation patters especially when setting closures to event handlers, dynamically creating DOM (sub) trees and implicit allocations in the engine.
Principle #2: Use fast objects and do fast manipulations
Make sure the order is the same when creating multiple objects or you will create multiple objects rather than states of the same object. You need to also make sure you don't add properties conditionally. This follows the old adage, "Less is More", where programmers should set parameters first in as few lines as possible. One should also make sure not to default properties on prototypes.
Deleting also slows down properties because it forces conversion. You should instead set properties to 0 or undefined to close it off. You should also restrict the total properties to stay away from slower property bags. To keep from those slow property bags you should also restrict using getters, setters and property descriptors in perfect critical paths.
Principle #3 Write Fast Arithmetic
All numbers in JavaScript are IEEE 64-bit floating point numbers which are great for flexibility but present a performance and optimization challenge. To help with this, avoid creating floats if they are not needed. The fastest way to indicate integer math is |0. You can also take advantage of type - specialization for arithmetic by creating separate functions for its and floats by using consistent argument types.
Principle #4 Use Fast Arrays
When writing your arrays, pre-allocate them to speed them up. For mixed arrays, provide an early hint. This will avoid delayed type conversion and copy. You should use typed arrays when possible. This avoids tagging of integers and allocating heap space for floats. One should also keep values in arrays consistent since numeric arrays are treated like typed arrays internally. Keep arrays dense. Explicit caching of length avoids repetitive property accesses.
Principle #5 Do less (cross-subsystem) work
Avoiding chatting with the DOM will relieve the code of excess cycles. Avoid automatic conversions of DOM values. Values from the DOM are strings by default. Paint as much as your users can see. Aligning timers to display frames will cut down your work.
These principles will create a great user experience that will extend the battery life and make the app much richer than before.
Check out BizSpark and DreamSpark for useful tools.
Contact Doris Chen,
doris.chen@microsoft.com
http://blogs.msdn.com/b/dorischen/
@doristchen
