How to make your next web application appear janky and clumsy

• David Rajchenbach-Teller
• Mozilla
• Firefox Performance Team
• Zedge Tech Talks
• Trondheim, May 8th, 2014

• Non-profit
• ~1000 paid staff
• ~2000 regular contributors
• Firefox, Firefox OS
• Protecting privacy
• Teaching stuff that matters

      while (true) {
        layout.update();
        screen.paint();
        os.handleEvents();
        dom.handleEvents();
      }
      

      requestAnimationFrame(function loop() {
        // ...
        // Insert something slow here.
        // ...
        requestAnimationFrame(loop);
      });
      

      requestAnimationFrame(function loop() {
        for (var i = 0; i < 10000; ++i) {
          doSomething();
        }
        requestAnimationFrame(loop);
      });
      

      var element = document.getElementById("myDiv");
       
      window.addEventListener("mousemove", function(event) {
        element.style.left = event.pageX + "px";
        element.stlye.top = event.pageY + "py";
      });
      

• a call to alert()?
• synchronous I/O (network, disk, GPU)?
• allocating memory?
• thrashing the layout?

      var el1 = document.getElementById("div1");
      var el2 = document.getElementById("div2");
       
      requestAnimationFrame(function loop() {
        el2.style.left = el1.offsetLeft + 5 + "px"; // Almost
        el2.style.top  = el1.offsetTop  + 5 + "px";
       
        requestAnimationFrame(loop);
      });
      

      var element = document.getElementById("foo");
      var i = 0;
       
      requestAnimationFrame(function loop() {
        element.stype.top = i++ * 5 + "px";
       
        requestAnimationFrame(loop);
      });
      

      <div style="transition:...">
        <span style="z-index:1"></span>
        <span style="z-index:3"></span>
      </div>
      <div style="z-index:2"></div>
      

      <div id="el1" style="position:absolute;top:0;left:0">
      </div>
      <div id="el2" style="margin-left:90%;margin-top:90%">
      </div>
       
      el1.textContent = 'foo';
      el2.textContent = 'bar';
      

      

      

      var item = localStorage.getItem("foo");
        // Yes, it's that simple
      
      

       
      var data = JSON.stringify(item);
        // Secondary cost
      
      
      

      var context = document.getElementById("canvas").
        getContext("2d");
       
      requestAnimationFrame(function loop() {
        var image = new Image();
        image.src = "http://...";
        context.drawImage(image, 0, 0);
       
        requestAnimationFrame(loop);
      });
      

• multiplying requests to resources;
• waiting for too many resources;
• hoarding resources (nodes, frames, strings, data);
• etc.

• Promise + Generators;
• Workers for all;
• Sandboxed iframes for all;
• Servo?

      Task.async(function*() { 
        for (var i = 0; i < 10000; ++i) {
          yield doSomething();
        }
      });
      

      myElement.addEventListener("mousemove", e => {
        var msg = {
          id: myElement.id,
          event: "mousemove",
          buttons: e.buttons
        };
        myWorker.postMessage(msg);
      });
      

      self.addEventListener("message", {data} => {
        // ... 
        var msg = // ...
        self.postMessage(msg); 
      );
      

1. Know the browser.
2. Key techniques: act synchronously, de-optimize.
3. Key tools: profiler, timeline, the box repainter, pagespeed.
4. Many frameworks will do jank for you.
5. Resources: jankfree.org, irc.mozilla.org, ask.mozilla.org.
6. Hint: an open-source browser is only as good as its contributors.

• David Rajchenbach-Teller (Yoric)
• Mozilla, Performance Team
• Yoric @irc.mozilla.org
• ImYoric @twitter
• Slides: yoric.github.io/Talk-How-to-jank (fork me!)