1. AVOID DOM!
1.1. frame rate / painting
1.1.1. 1000ms / 60 Hz = ~16ms
1.1.1.1. pixels refresh on screen about 16ms
1.1.2. frames available from chrome dev tools
1.1.2.1. record circle button in timeline? view maybe, or profiles
1.1.3. if a button is clicked in the middle of a frame, if you aren't done processing before frame painting is planned, it skips the frame
1.1.3.1. this is called a dropped frame
1.1.3.2. you do "request animation frame" to get the full 16ms timeframe in order to prevent dropped frame
1.1.4. things that are "on scroll" should do this
1.1.5. do all your reads before all your writes so it's not mixed and you don't waste frame time once the first write occurs
1.1.6. chrome dev tools - show painted rectangles
1.1.7. layer promotion
1.1.7.1. transform: translateZ(0)
1.1.7.1.1. hack
1.1.7.2. <video>
1.1.7.3. <canvas
1.1.7.4. css opacity animations
1.1.7.5. transforms
1.1.7.6. new spec coming
1.1.7.6.1. will-change: position
1.1.7.6.2. will-change spec
1.1.7.6.3. stop hacking, start being intentional
1.1.8. enable continuous page repainting
1.1.8.1. shows how long to fully paint the screen while nothing special is running (but still needs to repaint)
1.1.8.2. example/demo
1.1.8.2.1. baseball cards were 14ms to just paint.
1.1.8.2.2. due to rounded edges with box shadow
1.1.9. CSS Triggers
1.1.9.1. styles -> which parts of painting is effected
1.1.9.2. rounded edges and drop shadows are very computational intensive
1.1.9.2.1. add shadows to images, not on the fly
2. Server
2.1. Stay local
2.1.1. stay in process if possible
2.1.1.1. DB call
2.1.1.1.1. cache liberally
2.1.1.2. web service call
2.2. Iterate Less
2.2.1. lowering hit count is usually easier
2.3. Cache liberally
2.3.1. don't do work if you don't have to
2.4. Stream
2.4.1. loading lots of data at once is slow
2.5. Miscellaneous
2.5.1. Use string builder
2.5.2. exceptions should be exceptional
2.5.3. build in release mode
2.5.4. and many more
3. Compute
3.1. chrome profiler
3.1.1. stack trace
3.1.2. flame view
3.1.2.1. width of frame is how long it took to execute on a call stack
3.2. scope management
3.2.1. favor local vars
3.2.2. avoid with() statement
3.2.2.1. adds another scoping layer which means it's another scope table scan for anything outside of it
3.2.3. careful w/ closures
3.2.3.1. same as with()
3.3. looping
3.3.1. avoid for...in loops
4. Resources
4.1. Jank Free . Org
4.2. Books
4.2.1. High Performance Web Sites
4.2.2. Even Faster Web Sites
4.3. bit.ly/full-stack-web-perf
5. Speaker
5.1. Nik Molnar
5.2. @Nikmd23
5.3. NYC
6. Why #perfmatters
6.1. people leave, even for half a second
6.2. User Needs
6.2.1. Functional ->
6.2.1.1. Reliable ->
6.2.1.1.1. Usable ->
7. Attack Plan
7.1. 1. Measurable Improvements
7.2. 2. Platform Stability
7.3. 3. Environment Neutrality
7.3.1. want environments to be equal
7.3.2. test dev prod, how they cache, cleanup cache, memory management
7.3.2.1. make them equal
7.4. 4. Scenario Focused
7.4.1. Application's aren't slow
7.4.2. Scenarios are slow
7.5. 5. Preset Goals
7.5.1. maybe not 2x faster
7.5.2. we will spend two sprints, or x points on performance
7.6. 6. Descending Granularity
8. Network
8.1. chrome dev tools
8.1.1. Size / Content
8.1.2. Copy all as HAR
8.1.2.1. "site is slow" in China
8.1.2.2. send me har file
8.1.2.3. online har viewer http://www.softwareishard.com/har/viewer/
8.1.3. Chrome audit tools
8.1.3.1. gzip images
8.2. compression
8.2.1. server side - turn on gzip compression
8.3. image compression
8.3.1. tiny png . com
8.4. image sprite
8.4.1. simple in visual studio
8.5. procastinate
8.5.1. script
8.5.1.1. async tag/attribute
8.5.2. img
8.5.2.1. lazyload attribute
8.5.2.1.1. ie11 only
8.5.2.1.2. puts lower priority on an image to load it latter
8.6. anticipate
8.6.1. <link rel="dns-prefetch"
8.6.1.1. load dns
8.6.2. <link rel="prefetch"
8.6.2.1. downloads asset
8.6.2.2. make sure it has caching headers, otherwise it WILL request it TWICE
8.6.3. <link rel="prerender"
8.6.3.1. opens hidden tab in browser, downloads page, js, and css
8.6.3.2. renders it, and swaps tabs