First good 28min are on few smart techniques to improve the performance of your web app. Paul Irish (from jQuery fame and now with Google chrome team) describes:
- CSS re-flows and how to avoid them – single re-flow is better because the browser won’t need to repaint all the elements. Batch the DOM changes before any re-flow-triggering actions is one of the good ways to do it. you can learn a lot from using http://www.browserscope.org/
- Hardware accelerated CSS – psss… add css property to your element: translate4d(0,0,0) or translateZ(0) and the browser will do hardware accelerated.
- Animation optimization
- Web workers – move computation out of the UI thread. Without web workers you can’t… but lucky it’s 2011 and you have them (here and there). I’ve put a simple example in the end of this post. I saw it long time ago (a week?) on Mozilla site – on how to use web workers.
- Benchmarking and build scripts.
- Last but not least, try about:flags in chrome… lots of good stuff under the hood.
BTW, his (last?) project html5 boilerplate is great for any developer that want to write efficient web sites/apps that will score more then 90 on page spped and will get an A on y!slow. This project is an ANT ‘build script’ that harness you with:
- Cross-browser compatible – IE6 and others IE specific classes for maximum cross-browser control.
- HTML5 ready. Use the new tags with certainty.
- Optimal caching and compression rules for grade-A performance
- Best practice site configuration defaults
- Mobile browser optimizations
- Progressive enhancement with graceful degredation
- A full, hooked up test suite is waiting for you.
- iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
Simple example on web workers
var results = [];
function resultReceiver(event) {
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}
function errorReceiver(event) {
throw event.data;
}
onmessage = function(event) {
var n = parseInt(event.data);
if (n == 0 || n == 1) {
postMessage(n);
return;
}
for (var i = 1; i <= 2; i++) {
var worker = new Worker(“fibonacci.js”);
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n – i);
}
};
Discover more from Ido Green
Subscribe to get the latest posts sent to your email.