JavaScript, webdev

HTML5, CSS3 And Some Tips

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
  • 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:

  1. Cross-browser compatible – IE6 and others IE specific classes for maximum cross-browser control.
  2. HTML5 ready. Use the new tags with certainty.
  3. Optimal caching and compression rules for grade-A performance
  4. Best practice site configuration defaults
  5. Mobile browser optimizations
  6. Progressive enhancement with graceful degredation
  7. A full, hooked up test suite is waiting for you.
  8. iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.

Simple example on web workers
var results = [];

function resultReceiver(event) {
if (results.length == 2) {
postMessage(results[0] + results[1]);

function errorReceiver(event) {

onmessage = function(event) {
var n = parseInt(;

if (n == 0 || n == 1) {

for (var i = 1; i <= 2; i++) {
var worker = new Worker(“fibonacci.js”);
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n – i);


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s