Share via

Notes from HTM01 - MIX 2011

  • Article

IE9 compiles JavaScript down into machine code.

There are eleven subsystems which impact performance.

The majority of time is spent in JavaScript and rendering on most sites, which don't use AJAX.

A lot more time is spent on Rendering in AJAX based sites.

Quickly respond

  • Quickly respond to network requests - avoid redirection. Avoid meta tag refreshes and redirection.
  • Minimise server time required for requests
  • Use content delivery networks
  • Maximise concurrent connections, ensure server side handles and delivers requests quickly by distributing files across multiple domains
  • Reuse connections by not sending a connection:close header (disable no keepalive)

Minimise bytes

  • Use gzip compression
  • Provide cacheable content, ensure headers are set on content to specify the expiry
  • Use conditional requests, only downloads if file has been modified
  • JSON - cache data requests, done by default, don't disable caching
  • Standardise on file capitalisation conventions, URI's are case sensitive
  • Use the html5 document type, it'll be the fastest
  • Don't use the metatag for IE compatible modes, use the header, it doesn't need to parse before it loads it
  • Link stylesheets at the top of the page
  • Avoid using the @import command for CSS
  • Avoid embedded and inline styles
  • Only include nessescary styles, check what styles are used for a page, CSS is an inefficient matching algorithm, less styles in the dictionary the better

Optimise the media

  • Jpeg for photographs
  • PNG's for everything else
  • Use native image resolution, have images at the size that they should be rendered that size on disk
  • Avoid lots and lots of images, use image sprites where possible
  • Create image sprites by hand, don't use the tools
  • Replace images with CSS gradients where possible, don't use 1 pixel wide gradients
  • Where possibly use CSS corner radius instead of images
  • Embed small images through the data URI
  • Replace large images with inline svg
  • Avoid complex SVG paths
  • Use css3 transforms instead of small animated gifs
  • Proactively download next resources (bing homepage downloads the next days image)

Write fast JavaScript

  • Avoid linking JavaScript at the head of the document, downloads, parses and executes before continuing, if you need to try using the defer attribute
  • Avoid inline JavaScript - best practice is to load JS at the very end of the page
  • Remove duplicate code, multiple versions of the same JS file.
  • Standardise on a single JavaScript framework.
  • Don't include script if it's not absolutely needed
  • Just use one analytics framework
  • Minify JavaScript, remove characters not needed (spaces etc), compaction, change variable names to small aliases. Less bytes over the network, less in the cache, type resolution is faster when variable names are smaller, inlining, refactor code in many methods into one small one.
  • Use domcontentloaded event instead of the load event, it fires much sooner than the load event.
  • Initialise JavaScript on demand, load script files when needed.
  • JSON is always faster than XML for data
  • Always use the browser native methods, they're much faster than script based methods (100/200 times faster than scripted methods)
  • Use regular expressions as little as possible
  • use rounding in JavaScript wherever you can, math in JS represent numbers as floats, integers are much more efficient math.ceil() and math.floor()
  • Minimise Dom interactions, cache variables, eg document.body
  • Use built in Dom methods instead of abstractions such as jquery
  • Use innerHTML it's the fastest way to inject into the Dom
  • Batch markup changes instead of firing them off individually, this only makes one Dom change
  • Maintain a small DOM, smaller it is the better (well duh), aim for under 1,000 Dom elements
  • Know what your application is doing when it's running
  • Look out for settimeout and setinterval, make sure they're cleaned up
  • Try and batch your timers together and consolidate into one
  • Align animations to the display frame, 16.7ms = 60fps (desktop), 33.4ms = 30fps (mobile)

Original post by Phil Winstanley on 13/04/11 here: https://weblogs.asp.net/plip/archive/2011/04/13/notes-from-htm01-mix11.aspx