Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Klemen Slavič

April 30, 2013
Tweet

More Decks by Klemen Slavič

Other Decks in Programming

Transcript

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

    View full-size slide

  2. I MAKE PRODUCTS
    THAT SELL PRODUCTS.

    View full-size slide

  3. I MAKE STUFF WORK.

    View full-size slide

  4. I MAKE STUFF GO FAST.

    View full-size slide

  5. 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();

    View full-size slide

  6. RULE #7 (CONTINUED)

    View full-size slide

  7. 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);

    View full-size slide

  8. RULE #8 (CONTINUED)

    View full-size slide

  9. RULE #9 (CONTINUED)

    View full-size slide

  10. RULE #9 (CONTINUED)

    View full-size slide

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

    View full-size slide

  12. RULE #10 (CONTINUED)

    View full-size slide

  13. PHOTO CREDITS

    View full-size slide