Bare Metal Coding

Bare Metal Coding

A 15-minute talk on improving performance in web apps and games.

See a video of the presentation here: http://video.kiberpipa.org/jsmeet_slavic_performance_optimizing/

A9b044960d076e43d18e07f09f7a15c6?s=128

Klemen Slavič

April 30, 2013
Tweet

Transcript

  1. BARE METAL CODING OPTIMISING YOUR JAVASCRIPT FOR LEANER, MEANER PERFORMANCE

  2. HI.

  3. I MAKE PRODUCTS THAT SELL PRODUCTS.

  4. I MAKE STUFF WORK.

  5. I MAKE STUFF GO FAST.

  6. THE RULES.

  7. RULE #1

  8. RULE #2

  9. RULE #3

  10. RULE #4

  11. RULE #5

  12. RULE #6

  13. RULE #7 function Person(firstName, lastName) { this.firstName = firstName; this.lastName

    = lastName; } Person.prototype.sayHello = function() { alert("Hello, I'm " + this.firstName); }; var jack = new Person('Jack', 'Sparrow'); jack.sayHello();
  14. RULE #7 (CONTINUED)

  15. RULE #8

  16. RULE #8 (CONTINUED) // immutable vector implementation function Vec2d(x, y)

    { this.x = x; this.y = y; } Vec2d.prototype.add = function(x, y) { if (x instanceof Vec2d) { y = x.y; x = x.x; } return new Vec2d(this.x + x, this.y + y); }; var a = new Vec2d(1,2), b = new Vec2d(3,4); for (var i = 0; i < 1e7; i++) a = a.add(b);
  17. RULE #8 (CONTINUED)

  18. RULE #9

  19. RULE #9 (CONTINUED)

  20. RULE #9 (CONTINUED)

  21. RULE #10 elm.addEventListener('touchmove', function(ev) { elm.style.webkitTransform = 'translateX(' + ev.pageX

    + 'px)'; });
  22. RULE #10 (CONTINUED)

  23. RULE #11

  24. RULE #12

  25. THAT'S IT.

  26. PHOTO CREDITS