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


Published on

게임과 같은 리얼타임 웹앱에서 자바스크립트 가베지 컬렉션에 의해 발생하는 멈춤 현상을 줄이기 위한 자바스크립트 기법을 설명합니다.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • W3C HTML5 KIG-How to write low garbage real-time javascript

    1. 1. HTML5 KIG 16차 모임 How to write lowgarbage real-time 2012.5.15 동국대 멀티미디어공학과 이창환 (yich@dongguk.edu)
    2. 2. 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
    3. 3. 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
    4. 4. 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
    5. 5. 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!
    6. 6. 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, defined 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]; }};
    7. 7. Assigning [] to an array this creates a new empty array and garbages the old one! To write arr.length = 0
    8. 8. 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);
    9. 9. 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
    10. 10. 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;
    11. 11. 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
    12. 12. 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().
    13. 13. 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)
    14. 14. ConclusionDifficult 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.
    15. 15. 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.