1. CloudWhat?

  2. A practical explanation

    CloudFlare is a network of websites

  3. How many websites?

  4. Another perspective

    We are a small, scrappy team of engineers working to make the internet better

  5. What do engineers do at CloudFlare?

  6. We build infrastructure.

  7. We build features

  8. We build enhacements

  9. We deploy everywhere

  10. Case study: JavaScript

    The challenge: optimize JavaScript loading. Everywhere. Automatically.

  11. Who knows the best way to do this?

  12. Best case scenario

    1. There is only one script
    2. The script does not block anything and executes late
    3. The script is always cached always (except when it shouldn't be)
  13. We built a tool that makes this happen

    Automaticaly, on any website.

  14. Before

    After

  15. But this is crazy

  16. Part 1: Merging all scripts safely

  17. It starts on the server

  18. Our hero: Rocket Loader

  19. Server-side script proxy

  20. Content-Type: multipart/bag;

    --foobar
    Bag: 257|222|-1|200|text/bag-manifest
    
    0:http://www.leangreenmonkey.info/small1.js
    1:http://www.leangreenmonkey.info/small3.js
    2:http://www.leangreenmonkey.info/small2.js
    
    --foobar
    Bag: 79|39|0|200|application/x-javascript|7200
    
    function small1(bleh) {
    return bleh;
    }
    
    --foobar
    Bag: 79|39|2|200|application/x-javascript|7200
    
    function small2(bleh) {
    return bleh;
    }
    
    --foobar
    Bag: 79|39|1|200|application/x-javascript|7200
    
    function small3(bleh) {
    return bleh;
    }
    
    --foobar--                
                
  21. Think BigPipe

    but for JavaScript

  22. Part 2: Caching

  23. Rocket Loader does caching

  24. The best part

    Zero round trips when cache is hot

  25. Part 3: The Arch-nemesis of Non-Blocking Javascript

  26. document.write

  27. document.write

    <body onload="document.write('<h2>World: Nice to meet you.</h2>')">
        <h1>Hello, world.</h1>
    </body>
                
  28. document.write(string)

    Insert string into the parser input buffer, unless the page is loaded.

    If the page is loaded, navigate to about:blank, then insert string into the parser input stream.

  29. document.write

        <script type='text/javascript' src='./google_service.js'></script>
        <script type='text/javascript'>
            GA_googleFetchAds();
        </script>
    
                
  30. document.write

        <p>
            <script type="text/javascript"> 
                document.write('<span>Line 1</span>');
                document.write('<div>Line 2</div>');
            </script>
        </p> 
                
  31. document.write

        <script type="text/javascript"> 
            document.write('<script>document.write("<p>a");<\/script>');
            document.write('a </p>');
        </script> 
                
  32. ... so I put a Browser in your Browser

  33. Doubling Speed of TechCrunch

  34. We deployed that tool

    One week later 1,000 websites are automatically optimized

  35. With one click

    you accidentally all your problems

  36. This is CloudFlare

  37. http://www.cloudflare.com

    chris@cloudflare.com

    jason@cloudflare.com