├── .gitignore ├── Gemfile ├── Gemfile.lock ├── Procfile ├── README.md ├── app.js ├── assets ├── cssom-timeline.json ├── ex1-diagram.html ├── ex2-diagram.html └── gizmodo-layout-timeline.json ├── async.html ├── awesome-photo.jpg ├── bootstrap-more.html ├── bootstrap.html ├── cssom-blocked-render.html ├── cssom-inline-no-img.html ├── cssom-inline.html ├── cssom.html ├── dom.html ├── js.html ├── layout.css ├── layout.html ├── navtiming.html ├── preload.html ├── raf.js ├── script-analytics.html ├── server.rb ├── simple-async.html ├── simple-inline-all.html ├── simple-inline.html ├── simple.html ├── style.css ├── time-noname.js ├── time.js └── timing.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'goliath', :git => 'git://github.com/postrank-labs/goliath.git' 4 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GIT 2 | remote: git://github.com/postrank-labs/goliath.git 3 | revision: f8acf8fc988f0cf5a98057d5cb5bc206b438fb1f 4 | specs: 5 | goliath (1.0.3) 6 | async-rack 7 | em-synchrony (>= 1.0.0) 8 | em-websocket (= 0.3.8) 9 | eventmachine (>= 1.0.0.beta.4) 10 | http_parser.rb (= 0.6.0) 11 | log4r 12 | multi_json 13 | rack (>= 1.2.2) 14 | rack-contrib 15 | rack-respond_to 16 | 17 | GEM 18 | remote: https://rubygems.org/ 19 | specs: 20 | addressable (2.3.6) 21 | async-rack (0.5.1) 22 | rack (~> 1.1) 23 | em-synchrony (1.0.3) 24 | eventmachine (>= 1.0.0.beta.1) 25 | em-websocket (0.3.8) 26 | addressable (>= 2.1.1) 27 | eventmachine (>= 0.12.9) 28 | eventmachine (1.0.3) 29 | http_parser.rb (0.6.0) 30 | log4r (1.1.10) 31 | multi_json (1.9.2) 32 | rack (1.5.2) 33 | rack-accept-media-types (0.9) 34 | rack-contrib (1.1.0) 35 | rack (>= 0.9.1) 36 | rack-respond_to (0.9.8) 37 | rack-accept-media-types (>= 0.6) 38 | 39 | PLATFORMS 40 | ruby 41 | 42 | DEPENDENCIES 43 | goliath! 44 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: bundle exec ruby server.rb -sv -e prod -p $PORT 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Deploy to Heroku 2 | 3 | `git subtree push --prefix l1-critical-rendering-path/ heroku master` 4 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var span = document.getElementsByTagName('span')[0]; 2 | span.innerText = 'interactive'; // change DOM text content 3 | span.style.display = 'inline'; // change CSSOM property 4 | 5 | // create a new element, style it, and append it to the DOM 6 | var loadTime = document.createElement('div'); 7 | loadTime.innerText = 'You loaded this page on: ' + new Date(); 8 | loadTime.style.color = 'blue'; 9 | document.body.appendChild(loadTime); 10 | -------------------------------------------------------------------------------- /assets/cssom-timeline.json: -------------------------------------------------------------------------------- 1 | ["5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2008.2 Safari/537.36", 2 | {"type":"Program","data":{},"startTime":1400861836573.7742,"children":[{"type":"ResourceSendRequest","data":{"requestId":"6498.4","url":"http://udacity-crp.herokuapp.com/cssom.html","requestMethod":"GET"},"startTime":1400861836574.747,"frameId":"6498.1","counters":{"documents":1,"nodes":20,"jsEventListeners":0,"jsHeapSizeUsed":1536448}}],"endTime":1400861836575.1753}, 3 | {"type":"Program","data":{},"startTime":1400861836576.2432,"children":[],"endTime":1400861836576.3533}, 4 | {"type":"Program","data":{},"startTime":1400861838412.1282,"children":[],"endTime":1400861838412.1602}, 5 | {"type":"Program","data":{},"startTime":1400861838438.9502,"children":[],"endTime":1400861838439.006}, 6 | {"type":"Program","data":{},"startTime":1400861838439.0293,"children":[],"endTime":1400861838439.0442}, 7 | {"type":"Program","data":{},"startTime":1400861838439.0603,"children":[{"type":"ResourceReceiveResponse","data":{"requestId":"6498.4","statusCode":200,"mimeType":"text/html"},"startTime":1400861838439.2632,"counters":{"documents":1,"nodes":20,"jsEventListeners":0,"jsHeapSizeUsed":1536448}}],"endTime":1400861838439.3682}, 8 | {"type":"Program","data":{},"startTime":1400861838439.9954,"children":[],"endTime":1400861838440.7273}, 9 | {"type":"BeginFrame","data":{},"startTime":1400861838445.3274,"thread":"2"}, 10 | {"type":"RequestMainThreadFrame","data":{},"startTime":1400861838445.3584,"thread":"2"}, 11 | {"type":"Program","data":{},"startTime":1400861838440.7532,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.4","encodedDataLength":429},"startTime":1400861838440.7803,"frameId":"6498.1","counters":{"documents":1,"nodes":20,"jsEventListeners":0,"jsHeapSizeUsed":1536448}}],"endTime":1400861838455.4783,"usedHeapSizeDelta":298960}, 12 | {"type":"Program","data":{},"startTime":1400861838457.0852,"children":[],"endTime":1400861838457.1052}, 13 | {"type":"Program","data":{},"startTime":1400861838458.2302,"children":[{"type":"ResourceFinish","data":{"requestId":"6498.4","didFail":false,"networkTime":1400861838440.072},"startTime":1400861838458.3552,"counters":{"documents":2,"nodes":21,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838458.7754}, 14 | {"type":"BeginFrame","data":{},"startTime":1400861838459.1353,"thread":"2"}, 15 | {"type":"Program","data":{},"startTime":1400861838459.6504,"children":[],"endTime":1400861838459.6753}, 16 | {"type":"Program","data":{},"startTime":1400861838459.756,"children":[],"endTime":1400861838459.7742}, 17 | {"type":"Program","data":{},"startTime":1400861838459.7942,"children":[{"type":"ParseHTML","data":{"startLine":0,"endLine":12},"startTime":1400861838459.8113,"frameId":"6498.1","children":[{"type":"ResourceSendRequest","data":{"requestId":"6498.5","url":"http://udacity-crp.herokuapp.com/style.css","requestMethod":"GET"},"startTime":1400861838460.1663,"frameId":"6498.1","counters":{"documents":2,"nodes":27,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"ResourceSendRequest","data":{"requestId":"6498.6","url":"http://udacity-crp.herokuapp.com/awesome-photo.jpg","requestMethod":"GET"},"startTime":1400861838460.559,"frameId":"6498.1","counters":{"documents":2,"nodes":39,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838460.7312,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838460.7542}, 18 | {"type":"Program","data":{},"startTime":1400861838460.8704,"children":[],"endTime":1400861838461.0042}, 19 | {"type":"Program","data":{},"startTime":1400861838461.0261,"children":[],"endTime":1400861838461.1992}, 20 | {"type":"Program","data":{},"startTime":1400861838461.2263,"children":[],"endTime":1400861838461.3242}, 21 | {"type":"Program","data":{},"startTime":1400861838461.3452,"children":[],"endTime":1400861838461.4412}, 22 | {"type":"Program","data":{},"startTime":1400861838461.4631,"children":[{"type":"ParseHTML","data":{"startLine":12,"endLine":0},"startTime":1400861838461.476,"frameId":"6498.1","children":[{"type":"RecalculateStyles","data":{"elementCount":9},"startTime":1400861838461.5513,"frameId":"6498.1","children":[],"endTime":1400861838461.84,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"MarkDOMContent","data":{"isMainFrame":true},"startTime":1400861838461.9792,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838462.0222,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838462.0452}, 23 | {"type":"Program","data":{},"startTime":1400861838462.0903,"children":[],"endTime":1400861838462.1313}, 24 | {"type":"Program","data":{},"startTime":1400861838462.876,"children":[],"endTime":1400861838462.917}, 25 | {"type":"BeginFrame","data":{},"startTime":1400861838472.6282,"thread":"2"}, 26 | {"type":"Program","data":{},"startTime":1400861838475.1572,"children":[],"endTime":1400861838475.248}, 27 | {"type":"BeginFrame","data":{},"startTime":1400861838488.6082,"thread":"2"}, 28 | {"type":"BeginFrame","data":{},"startTime":1400861838505.4753,"thread":"2"}, 29 | {"type":"BeginFrame","data":{},"startTime":1400861838521.7651,"thread":"2"}, 30 | {"type":"BeginFrame","data":{},"startTime":1400861838538.3062,"thread":"2"}, 31 | {"type":"BeginFrame","data":{},"startTime":1400861838554.835,"thread":"2"}, 32 | {"type":"BeginFrame","data":{},"startTime":1400861838571.4402,"thread":"2"}, 33 | {"type":"BeginFrame","data":{},"startTime":1400861838588.6812,"thread":"2"}, 34 | {"type":"Program","data":{},"startTime":1400861838588.9883,"children":[],"endTime":1400861838589.2212}, 35 | {"type":"BeginFrame","data":{},"startTime":1400861838606.2144,"thread":"2"}, 36 | {"type":"BeginFrame","data":{},"startTime":1400861838621.4192,"thread":"2"}, 37 | {"type":"BeginFrame","data":{},"startTime":1400861838638.2493,"thread":"2"}, 38 | {"type":"BeginFrame","data":{},"startTime":1400861838654.7341,"thread":"2"}, 39 | {"type":"Program","data":{},"startTime":1400861838662.074,"children":[],"endTime":1400861838662.1812}, 40 | {"type":"BeginFrame","data":{},"startTime":1400861838671.209,"thread":"2"}, 41 | {"type":"BeginFrame","data":{},"startTime":1400861838687.7021,"thread":"2"}, 42 | {"type":"BeginFrame","data":{},"startTime":1400861838704.3132,"thread":"2"}, 43 | {"type":"BeginFrame","data":{},"startTime":1400861838721.6213,"thread":"2"}, 44 | {"type":"BeginFrame","data":{},"startTime":1400861838737.4993,"thread":"2"}, 45 | {"type":"BeginFrame","data":{},"startTime":1400861838754.4094,"thread":"2"}, 46 | {"type":"BeginFrame","data":{},"startTime":1400861838770.5322,"thread":"2"}, 47 | {"type":"Program","data":{},"startTime":1400861838770.6653,"children":[],"endTime":1400861838770.8953}, 48 | {"type":"BeginFrame","data":{},"startTime":1400861838786.964,"thread":"2"}, 49 | {"type":"BeginFrame","data":{},"startTime":1400861838803.4783,"thread":"2"}, 50 | {"type":"Program","data":{},"startTime":1400861838828.4812,"children":[],"endTime":1400861838828.5352}, 51 | {"type":"BeginFrame","data":{},"startTime":1400861838831.154,"thread":"2"}, 52 | {"type":"Program","data":{},"startTime":1400861838829.3914,"children":[{"type":"ResourceReceiveResponse","data":{"requestId":"6498.5","statusCode":200,"mimeType":"text/css"},"startTime":1400861838831.4954,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838831.7603}, 53 | {"type":"Program","data":{},"startTime":1400861838834.747,"children":[],"endTime":1400861838835.3193}, 54 | {"type":"Program","data":{},"startTime":1400861838835.3691,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.5","encodedDataLength":298},"startTime":1400861838835.4172,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838835.821}, 55 | {"type":"BeginFrame","data":{},"startTime":1400861838837.642,"thread":"2"}, 56 | {"type":"Program","data":{},"startTime":1400861838837.9973,"children":[],"endTime":1400861838838.0322}, 57 | {"type":"Program","data":{},"startTime":1400861838839.2202,"children":[{"type":"ResourceFinish","data":{"requestId":"6498.5","didFail":false,"networkTime":1400861838820.534},"startTime":1400861838839.3394,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"ScheduleStyleRecalculation","data":{},"startTime":1400861838839.6821,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838840.2412}, 58 | {"type":"Program","data":{},"startTime":1400861838841.7952,"children":[],"endTime":1400861838841.976}, 59 | {"type":"BeginFrame","data":{},"startTime":1400861838853.4153,"thread":"2"}, 60 | {"type":"BeginFrame","data":{},"startTime":1400861838870.7502,"thread":"2"}, 61 | {"type":"BeginFrame","data":{},"startTime":1400861838886.7751,"thread":"2"}, 62 | {"type":"Program","data":{},"startTime":1400861838900.5962,"children":[],"endTime":1400861838900.652}, 63 | {"type":"Program","data":{},"startTime":1400861838900.956,"children":[{"type":"ResourceReceiveResponse","data":{"requestId":"6498.6","statusCode":200,"mimeType":"image/jpeg"},"startTime":1400861838901.364,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838901.5713}, 64 | {"type":"Program","data":{},"startTime":1400861838901.8743,"children":[],"endTime":1400861838901.943}, 65 | {"type":"BeginFrame","data":{},"startTime":1400861838903.4802,"thread":"2"}, 66 | {"type":"Program","data":{},"startTime":1400861838901.9832,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":1368},"startTime":1400861838902.0293,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838906.2292}, 67 | {"type":"Program","data":{},"startTime":1400861838909.0342,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":1368},"startTime":1400861838909.0881,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838909.5793}, 68 | {"type":"Program","data":{},"startTime":1400861838912.0852,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":4104},"startTime":1400861838912.135,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838912.5723}, 69 | {"type":"BeginFrame","data":{},"startTime":1400861838919.9602,"thread":"2"}, 70 | {"type":"Program","data":{},"startTime":1400861838923.0693,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":6201},"startTime":1400861838923.111,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838923.236}, 71 | {"type":"Program","data":{},"startTime":1400861838936.1182,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":4527},"startTime":1400861838936.1462,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838936.258}, 72 | {"type":"BeginFrame","data":{},"startTime":1400861838936.8643,"thread":"2"}, 73 | {"type":"Program","data":{},"startTime":1400861838944.0732,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":1368},"startTime":1400861838944.1033,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838944.311}, 74 | {"type":"BeginFrame","data":{},"startTime":1400861838952.278,"thread":"2"}, 75 | {"type":"Program","data":{},"startTime":1400861838967.016,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":1368},"startTime":1400861838967.0513,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838967.1853}, 76 | {"type":"BeginFrame","data":{},"startTime":1400861838969.124,"thread":"2"}, 77 | {"type":"Program","data":{},"startTime":1400861838976.162,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":4104},"startTime":1400861838976.194,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838976.3262}, 78 | {"type":"Program","data":{},"startTime":1400861838978.8071,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":6840},"startTime":1400861838978.8362,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838978.9631}, 79 | {"type":"BeginFrame","data":{},"startTime":1400861838985.4163,"thread":"2"}, 80 | {"type":"Program","data":{},"startTime":1400861838998.5994,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":10211},"startTime":1400861838998.6313,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861838998.787}, 81 | {"type":"BeginFrame","data":{},"startTime":1400861839001.9841,"thread":"2"}, 82 | {"type":"BeginFrame","data":{},"startTime":1400861839018.4983,"thread":"2"}, 83 | {"type":"Program","data":{},"startTime":1400861839029.414,"children":[{"type":"ResourceReceivedData","data":{"requestId":"6498.6","encodedDataLength":3787},"startTime":1400861839029.4543,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861839029.6133}, 84 | {"type":"Program","data":{},"startTime":1400861839029.7083,"children":[],"endTime":1400861839029.7231}, 85 | {"type":"Program","data":{},"startTime":1400861839029.74,"children":[{"type":"ResourceFinish","data":{"requestId":"6498.6","didFail":false,"networkTime":1400861839028.6292},"startTime":1400861839029.8381,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"MarkLoad","data":{"isMainFrame":true},"startTime":1400861839029.987,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"RecalculateStyles","data":{"elementCount":9},"startTime":1400861839030.0232,"frameId":"6498.1","children":[{"type":"InvalidateLayout","data":{},"startTime":1400861839030.3782,"frameId":"6498.1","counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861839030.6023,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"Layout","data":{"dirtyObjects":8,"totalObjects":8,"partialLayout":false,"root":[0,0,360,0,360,519,0,519],"rootNode":-2},"startTime":1400861839030.625,"frameId":"6498.1","children":[],"endTime":1400861839031.0283,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861839031.2761}, 86 | {"type":"Program","data":{},"startTime":1400861839031.351,"children":[],"endTime":1400861839031.382}, 87 | {"type":"BeginFrame","data":{},"startTime":1400861839042.375,"thread":"2"}, 88 | {"type":"Program","data":{},"startTime":1400861839031.4001,"children":[{"type":"BeginFrame","data":{"id":4},"startTime":1400861839031.413,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"UpdateLayerTree","data":{"layerTree":[{"layerId":"20","offsetX":0,"offsetY":0,"width":0,"height":0,"paintCount":0},{"layerId":"23","offsetX":0,"offsetY":0,"width":0,"height":0,"paintCount":0,"parentLayerId":"20"},{"layerId":"21","offsetX":0,"offsetY":0,"width":360,"height":519,"paintCount":0,"parentLayerId":"23"},{"layerId":"22","offsetX":0,"offsetY":0,"width":360,"height":519,"paintCount":0,"parentLayerId":"21"},{"layerId":"19","offsetX":0,"offsetY":0,"width":360,"height":519,"paintCount":0,"parentLayerId":"22"},{"layerId":"24","offsetX":0,"offsetY":0,"width":360,"height":519,"paintCount":0,"backendNodeId":-2,"parentLayerId":"19"}]},"startTime":1400861839031.5762,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"Paint","data":{"rootNode":-2,"clip":[-15,-15,375,-15,375,534,-15,534],"layerId":24},"startTime":1400861839031.674,"frameId":"6498.1","children":[],"endTime":1400861839031.871,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"CompositeLayers","data":{},"startTime":1400861839031.917,"children":[],"endTime":1400861839044.968,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}},{"type":"MarkFirstPaint","data":{},"startTime":1400861839044.9922,"counters":{"documents":2,"nodes":40,"jsEventListeners":0,"jsHeapSizeUsed":1835408}}],"endTime":1400861839045.02}, 89 | {"type":"Program","data":{},"startTime":1400861839045.4143,"children":[],"endTime":1400861839045.4321}, 90 | {"type":"Program","data":{},"startTime":1400861839045.4534,"children":[],"endTime":1400861839045.5652}, 91 | {"type":"Program","data":{},"startTime":1400861839048.5483,"children":[],"endTime":1400861839048.6143}, 92 | {"type":"BeginFrame","data":{},"startTime":1400861839055.2861,"thread":"2"}, 93 | {"type":"Program","data":{},"startTime":1400861839048.642,"children":[],"endTime":1400861839057.1182}] -------------------------------------------------------------------------------- /assets/ex1-diagram.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/ex2-diagram.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | Hello web performance students! 10 |

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /awesome-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/igrigorik/udacity-webperf/9d90d55730cc12596feebc3d8325eaaef071d7a5/awesome-photo.jpg -------------------------------------------------------------------------------- /bootstrap-more.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Awesome (but kinda slow) page 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
I'm awesome!
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Starter Template for Bootstrap 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 |
...
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /cssom-blocked-render.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /cssom-inline-no-img.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

12 | Hello web performance students! 13 |

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /cssom-inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 |

13 | Hello web performance students! 14 |

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /cssom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | Hello web performance students! 8 |

9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /layout.css: -------------------------------------------------------------------------------- 1 | body { width: 100%; background-color: gray } 2 | div { width: 50%; background-color: green } 3 | p { width: 50%; background-color: red } 4 | -------------------------------------------------------------------------------- /layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |

Hello!

9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /navtiming.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | 21 | 22 |

23 | Hello web performance students! 24 |

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /preload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /raf.js: -------------------------------------------------------------------------------- 1 | function calculaNewPosition() { ... } 2 | 3 | function updateFunction() { 4 | var ball = document.getElementById("ball"); 5 | ball.style.position = calculateNewPosition(); 6 | 7 | requestAnimationFrame(updateFunction); 8 | } 9 | 10 | requestAnimationFrame(updateFunction); 11 | -------------------------------------------------------------------------------- /script-analytics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | Hello web performance students! 10 |

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /server.rb: -------------------------------------------------------------------------------- 1 | require 'goliath' 2 | 3 | class Srv < Goliath::API 4 | use Goliath::Rack::Params 5 | 6 | def response(env) 7 | file = env['REQUEST_PATH'].split('/')[1] 8 | 9 | rtt = env.params.fetch('rtt', 0.1).to_f 10 | processing = env.params.fetch('processing', 0.01).to_f 11 | EM::Synchrony.sleep(rtt + processing) 12 | 13 | type = case file 14 | when /\.html$/ 15 | 'text/html' 16 | when /\.css$/ 17 | 'text/css' 18 | when /\.js$/ 19 | 'application/javascript' 20 | end 21 | 22 | [200, {'Content-Type' => type}, IO.read(file)] 23 | end 24 | end 25 | -------------------------------------------------------------------------------- /simple-async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /simple-inline-all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 |

13 | Hello web performance students! 14 |

15 |
16 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /simple-inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | Hello web performance students! 9 |

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | p { font-weight: bold } 2 | span { color: red } 3 | p span { display: none } 4 | img { float: right } 5 | -------------------------------------------------------------------------------- /time-noname.js: -------------------------------------------------------------------------------- 1 | var loadTime = document.createElement('div'); 2 | loadTime.innerText = 'script executed @ ' + window.performance.now(); 3 | loadTime.style.color = 'blue'; 4 | document.body.appendChild(loadTime); 5 | -------------------------------------------------------------------------------- /time.js: -------------------------------------------------------------------------------- 1 | var loadTime = document.createElement('div'); 2 | loadTime.innerText = document.currentScript.src + ' executed @ ' + window.performance.now(); 3 | loadTime.style.color = 'blue'; 4 | document.body.appendChild(loadTime); 5 | -------------------------------------------------------------------------------- /timing.js: -------------------------------------------------------------------------------- 1 | function timing() { 2 | var t = window.performance.timing, 3 | interactive = t.domInteractive - t.domLoading, 4 | dcl = t.domContentLoadedEventStart - t.domLoading, 5 | complete = t.domComplete - t.domLoading; 6 | 7 | var stats = document.createElement('p'); 8 | stats.innerText = 'interactive: ' + interactive + 'ms, ' + 9 | 'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms'; 10 | 11 | document.body.appendChild(stats); 12 | } 13 | --------------------------------------------------------------------------------