W3C HTML5 KIG-How to write low garbage real-time javascript

HTML5 KIG 16차 모임 How to write lowgarbage real-time 2012.5.15 동국대 멀티미디어공학과 이창환 (yich@dongguk.edu)

Things Related Articlehttp://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascriptScirra http:// www.scirra.com Construct 2: HTML5 Game Engine

What’s GC Pause?Javascript No explicit memory management Clean up -> execution pause.One of the biggest obstacles to a smoothexperience 60 fps (16ms), 100 msec or more

Simple techniquesAllocation the new keyword - e.g. new Foo(). three syntax shortcuts for common uses of new: {} (creates a new object) [] (creates a new array) function () { ... } (creates a new function, which are also garbage-collected!)Try to create the object on startup, and re-use thesame object

Avoid {}objects with properties like { "foo": "bar" } commonly used in functions to return multiple values at once. The return value to the same (global) object every time and return that ! : bugs if you keep referencing the returned object which will change on every call!

re-cycle an existing objectRe-cycle an existing object (providing it has no prototypechain) by deleting all of its properties, restoring it to anempty object like {}Use the cr.wipe(obj) function, deﬁned as: ! : slow than using {}// remove all own properties on obj,effectively reverting it to a new objectcr.wipe = function (obj){ for (var p in obj) { if (obj.hasOwnProperty(p)) delete obj[p]; }};

Assigning [] to an array this creates a new empty array and garbages the old one! To write arr.length = 0

FunctionsFunctions are commonly created at startupand dont tend to be allocated at run-time somuchEx) setTimeout() or requestAnimationFrame()setTimeout((function (self) { return function () {self.tick(); }; })(this), 16);// at startupthis.tickFunc = (function (self) { return function () {self.tick(); }; })(this);// in the tick() functionsetTimeout(this.tickFunc, 16);

Advanced techniquesMany of the convenient library functions inJavascript create new objects.Ex) the array slice() method returns a new array strings substr() returns a new string

Code ExampleTo delete the element at an index from anarray.var sliced = arr.slice(index + 1);arr.length = index;arr.push.apply(arr, sliced);for (var i = index, len = arr.length - 1; i < len; i++) arr[i] = arr[i + 1];arr.length = len;

Recursive FunctionsUse {} syntax to pass data along in recursivefunctionsBetter done with a single array representing astack which you push and pop for each level ofrecursion.Dont actually pop the array - youll garbagethe last object in the array. Use a top index variable

Avoid vector objects (1/2) Be convenient to have functions return these objects e.g. instead of getPosition() returning a vector2 object (vector2 with x and y properties) getX() and getY().

Avoid vector objects (2/2) e.g. Box2dWeb : 2D physics Spawns hundreds of b2Vec2 objects every frame constantly spraying the browser with garbage Create a recycling cache Box2Dweb-closure (https:/ /github.com/ illandril/box2dweb-closure)

ConclusionDifﬁcult avoiding garbage entirely inJavascript. Be a lot of work to eliminate garbage from Javascript code Bs possible to craft real-time Javascript with little to no garbage collector overhead Be essential for games and apps which need to be highly responsive.

UpdateThe use of delete. Cause other slowdowns Construct2 use it very very sparingly in our engine.Tradeoffs To use judgement to balance GC with other concerns.A list of techniques weve found useful in our engineand was not meant to be a complete reference.

W3C HTML5 KIG-How to write low garbage real-time javascript

by Changhwan Yi

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 570

Statistics