• Save
W3C HTML5 KIG-How to write low garbage real-time javascript
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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



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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 625

http://html5gamers.wordpress.com 625



Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. HTML5 KIG 16차 모임 How to write lowgarbage real-time 2012.5.15 동국대 멀티미디어공학과 이창환 (yich@dongguk.edu)
  • 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. 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. 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. 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. 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. Assigning [] to an array this creates a new empty array and garbages the old one! To write arr.length = 0
  • 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. 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. 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. 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. 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. 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. 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. 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.