-
CloudWhat?
-
A practical explanation
CloudFlare is a network of websites
-
How many websites?
- Tens of thousands of websites
- A true cross section of the internet
-
Another perspective
We are a small, scrappy team of engineers working to make the internet better
-
What do engineers do at CloudFlare?
-
We build infrastructure.
- Global CDN
- Web Applcation Firewall
-
We build features
- Analytics
- Threat control
- DNS management
-
We build enhacements
- Auto-minification
- Email obfuscation
- Auto-magic Asset optimization
-
We deploy everywhere
- Every kind of site
- Every kind of device
- Everywhere on Earth
-
Case study: JavaScript
The challenge: optimize JavaScript loading. Everywhere. Automatically.
-
Who knows the best way to do this?
-
Best case scenario
- There is only one script
- The script does not block anything and executes late
- The script is always cached always (except when it shouldn't be)
-
We built a tool that makes this happen
Automaticaly, on any website.
-
Before
After
-
But this is crazy
- How do you merge all scripts safely?
- How do you cache things?
- Surely our arch nemesis document.write has something to say about this!
-
Part 1: Merging all scripts safely
-
It starts on the server
- All documents are parsed for script tags on the fly
- Script tags are re-written to prevent loading and execution
- <script type="text/javascript"> → <script type="text/noexec">
-
Our hero: Rocket Loader
- Loads early and asynchronously on the page
- Gathers all external URLs (even cross-domain ones)
- Makes a single AJAX request to the server for all script contents
-
Server-side script proxy
- Sends a multipart response to the client
- All scripts flushed asynchronously as they arrive
-
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--
-
Think BigPipe
but for JavaScript
-
Part 2: Caching
-
Rocket Loader does caching
- Scripts are cached individually in local storage
- Purging and "TTL" built-in to the library
- Smart fallbacks for older browsers
-
The best part
Zero round trips when cache is hot
-
Part 3: The Arch-nemesis of Non-Blocking Javascript
document.write
-
document.write
<body onload="document.write('<h2>World: Nice to meet you.</h2>')">
<h1>Hello, world.</h1>
</body>
-
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.
-
document.write
<script type='text/javascript' src='./google_service.js'></script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
-
document.write
<p>
<script type="text/javascript">
document.write('<span>Line 1</span>');
document.write('<div>Line 2</div>');
</script>
</p>
-
document.write
<script type="text/javascript">
document.write('<script>document.write("<p>a");<\/script>');
document.write('a </p>');
</script>
-
... so I put a Browser in your Browser
- Javascript Semantics-aware Peeking HTML Parser
- Javascript Javascript Execution Frames
- Javascript Browser Simulator
- ... in 20kb
-
Doubling Speed of TechCrunch
-
-
-
-
We deployed that tool
One week later 1,000 websites are automatically optimized
-
With one click
you accidentally all your problems
-
This is CloudFlare
- A vast network of websites
- A great team of people
- An exciting engineering challenge
-
http://www.cloudflare.com
chris@cloudflare.com
jason@cloudflare.com