• Timeline
• cog > rendering

• Repaint Issues
• Heavy CSS3 Effects
• Animation or Transition using heavy property
• Manipulating DOM dynamically
• Insertion / Deletion
• or Too much hack!
  
• translateZ(0);
• ...

1. How Browsers Works
2. Accelerated Rendering in Chrome: The Layer Model
3. CSS Paint Time and Page Render Weight
4. Avoiding Unnecessary Paints
5. Avoiding Unnecessary Paints: Animated GIF Edition
6. High Performance Animation
7. Antialiasing 101
8. HTML5 Techniques for Optimizing Mobile Performance (en)
9. Performance profiling with the Timeline (en)

• Minimize HTTP/HTTPS Requests
• Minify Assets:  HTML,  CSS,  Script,  Image, ...
• Make HTML within ~14KB
• Reducing Cookie size 
• Make AJAX Cacheable and Using GET
• Gzipped
• ...

YSlow

• CleanCSS
• CSSMin
• YUI
• CSSTidy
• Slimmer
• CSS Compressor

• UglifyJS
• JSMin
• YUI
• rJSMin
• Dojo ShrinkSafe
• Ajax Minifier
• Closure

• SmushIt.com
• PunyPNG.com
• PNGGauntlet for Windows
• Image Optim for Mac
• Generate multi-resolution images for srcset with Grunt

1. Google Developer: Page Speed Tools
2. YSlow.org (en)
3. Text Compression for Web Developers
4. Image Compression for Web Developers
5. Deep dive into the murky waters of script loading (en)

• Bottleneck Functions?
• Up to you!
• Memory Usage
• A way to Garbage Collection  :)
• GC friendly code

1. Profiling JavaScript Performance (en)
   
2. ECMA-262-3 in detail [huns.me]
   
3. Static Memory Javascript with Object Pools
4. Performance Tips for JavaScript in V8
5. Writing Fast, Memory-Efficient JavaScript (en)
6. Faster JavaScript Memoization For Improved App. Perf. (en)
7. 10 Javascript Performance Boosting Tips (OLD!, en)
8. Make the Web Faster Articles (en)
9. Optimizing JavaScript code
10. Canvas Inspection using Chrome DevTools
11. JavaScript Memory Profiling (en)
    

• Starting Profiling & Timeline Recording
  

function startProfiling() {
    console.timeline();
    console.profile();
}

• Finishing
  

function finishProfiling() {
    console.timelineEnd();
    console.profileEnd();
}

(function() {    var timeout = 3000;
    var start = performance.now();
    console.log( "Code starts at " + start );    setTimeout( function() {
        var end = performance.now();
        console.log( "timeout 3sec at " + end );
        console.log( "timeout callback delay : " + (end - start - timeout) + "msec" );    }, timeout );
})();

window.performance.mark('ajax_loaded'); 

window.performance.measure(
    'Ajax_Loading',
    'ajaxStart',
    'ajaxEnd'
); 

window.peformance.clearMarks( 'nameOfMark');
window.performance.clearMeasures('nameOfMeasurement');window.peformance.clearMarks();      // clear all
window.performance.clearMeasures();  // clear all

// get 'mark' entries
window.performance.getEntriesByType('mark');
// get 'measure' entries
window.performance.getEntriesByType('measure');
// get entries by name
window.performance.getEntriesByName('name');

var myReq = new XMLHttpRequest();

myReq.open('GET', url, true);myReq.onload = function(e) {
  do_something(e.responseText);
}myReq.send();

var reqCount = 0;

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  window.performance.mark('mark_end_xhr');
  reqCnt++;
  window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
  do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();

var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length(); ++i) {
  var req = items[i];
  console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}

1. W3C Spec.: Navigation Timing (en)
2. W3C Spec.: User Timing (en)
3. User Timing API: Understanding your Web App