A great collection of App performance articles

This is a blog post quote from other people, but want to put it here as self reference in the future and in the hope that it will help more people. 

There have been some great app performance resources surfacing recently, so I thought it would make sense to do a roundup.

I've recently seen apps whose performance is being crushed by large & expensive paints, extra layouts, bad event decoupling or too many network requests. They are all fixable items, and Chrome's DevTools and tracing tool both do a great job of showing you what's going on under the hood.

Web Performance Power Tool: HTTP Archive (HAR)

A rundown of the HAR file and how you can use it to diagnose the network side of your application, with +Ilya Grigorik and +Peter Lubbers.

Article: http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/

Video: Make The Web Fast - The HAR Show: Capturing and Analyzing performance data with HTTP Archive format

Wait, DevTools could do THAT?

A fantastic presentation by +Ilya Grigorik on Chrome's DevTools

Video: Wait, Chrome Dev Tools could do THAT?

Notes: http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1

Progressive jpegs: a new best practice

Ann Robson explains how we can all reduce our apps' bandwidth consumption by making use of progressive jpegs

Article: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

Structural and Sampling (JavaScript) Profiling in Google Chrome

+John McCutchan and +Ilya Grigorik (he keeps showing up this guy!) cover Chrome's tracing tool. If you're a power user, this one is a must.

Video: Structural and Sampling (JavaScript) Profiling in Google Chrome!

Snow in canvas land

+Jake Archibald relives the horror of his 2-year-old code, and sets about fixing it

Article: http://calendar.perfplanet.com/2012/snow-in-canvas-land/

Improving Web App Performance With the Chrome DevTools Timeline and Profiles

A very thorough tutorial (with ANIMATED GIFS!) by +Addy Osmani on how to use Chrome DevTools to diagnose memory and performance issues.

Article: http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/

Scrolling Performance and Parallaxin'

Two articles by yours truly on understanding and improving scrolling performance in your applications

Article: http://www.html5rocks.com/en/tutorials/speed/parallax/

Article: http://www.html5rocks.com/en/tutorials/speed/scrolling/

Google I/O 2012 - Jank Busters: Building Performant Web Apps

+Nat Duca and +Tom Wiltzius of Google's Chrome GPU team cover a host of tips & tricks for maximizing your app's rendering performance

Video: Google I/O 2012 - Jank Busters: Building Performant Web Apps

Why moving elements with translate() is better than pos:abs top/left

+Paul Irish on using translates vs absolute positioning, and the performance implications of both

Article: http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

IE8 uses IE7 DOM model on website

Probably it is a well known issue, and there should be many posts out there already mentioned that.  But in case you find this post, it means you are still having this problem.

IE8 will fall back to use IE7 DOM mode when sometimes visit a page, they called it "compatibility" mode.  However, if you doesn't need to support IE7, then it means it will screw you up, because the compatibility mode in IE8 is using IE7 DOM.

But the fix for it is very easy, just put that meta in your header

<meta content="IE=edge" http-equiv="X-UA-Compatible" />

And this will force IE to use the latest version of DOM mode in its browser engine. 

Find total number of lines recursively in terminal

Recently I need to do some analyze on code check into certain repository, and thanks to linux provide a very useful to for wc, you can get word count, number of lines types of information easily. And in order to do it recursively, here is the command you need, very handy for me :)

find . -name '*.js' | xargs wc -l

Web Platform Docs

If you guys didn't know, the W3C has started a project called Web Platform Docs ( currently in alpha release ) aimed at being the centralized resources for web developer.  This project has been and will continue be contributed by the main (and big) players in the web development industry.

http://docs.webplatform.org/wiki/Main_Page

If you haven't heard of that before, you can visit their "Getting Started" link,

http://docs.webplatform.org/wiki/WPD:Getting_Started

You don't need ssh-copy-id

This is what ssh-copy-id does

cat ~/.ssh/id_rsa.pub | ssh user@machine "mkdir ~/.ssh; cat >> ~/.ssh/authorized_keys"

If you are using Mac or other *nix flavor that doesn't have ssh-copy-id, the above is what you need.  That's exactly what ssh-copy-id does :)

Modeling and Reasoning behind DOM Events

A nice presentation on why DOM events behave in certain way.  So instead of telling you what a UI developer should know, it tells you why you have been told is true.

https://www.usenix.org/conference/webapps12/modeling-and-reasoning-about-dom-events

Here are some more good links in my reading list this month :)

Race Detection in UI
http://www.srl.inf.ethz.ch/papers/pldi12-wr.pdf

Whitepaper on Why Eval is Evil and General Misunderstanding
http://www.cs.purdue.edu/homes/gkrichar/papers/eval-ecoop-2011.pdf

Maintaining modular Javascript

Source coming from http://opensourcehacker.com/2012/06/29/maintaining-modular-javascript-codebase-with-requirejs/