HTML5 performance tricks — blazing fast applications

Written by Ketan Thakkar December 04, 2012

 Web per­for­mance (Desk­top, Mobile or Tablet)

  • Net­work (con­nec­tiv­ity and bandwidth)
  • CPU (Hz) — Metric
    • Time to Glass (Amount of time a user takes the action and site is loaded on the glass)
    • Elapsed Page load (When user clicks on link and page loads and CPU is calm/acquiesces)
    • CPU time (How much time used)
    • Idle CPU time (CPU has been wasted)
  • GPU

Intro­duc­tion

  1. Myth — The page load (fast) is not pro­por­tional javascript lines of code.

The num­ber of ele­ments and images are also not pro­por­tional to speed either.

Instead the speed is a mea­sure of how fast the DOM is ready with ini­tial setup and users see some­thing they can make sense of on the screen.

2.  Decrease the CPU time and increase par­al­lelism within the sub­sys­tems in the sequence.

3.  Myth — Faster the javascript engine, the faster the AJAX appli­ca­tion will be.  The pipeline from step 6–10 are impor­tant, javascript has a small role.

 

Sequence of events (on browser) –

  1. Net­work­ing (Bring resources, cache, and backup)
  2. HTML (Parse, rep­re­sent inter­nal data struc­ture as DOM)
  3. CSS (Parse and for­mat data)
  4. Col­lec­tions (Meta­data – inter­nal use dur­ing runtime)
  5. Javascript (Parse, gen­er­ate byte code or IL)
  6. Mar­shalling (Bound­ary between script engine and browser) – Time is spent in communication/interaction.
  7. DOM (Manip­u­late nodes, look-up elements)
  8. For­mat­ting (Take markup and CSS and over­lay each on top of each other)
  9. Block Build­ing (CSS is inher­ently is a block based lay­out sub system)
  10. Lay­out (Take the blocks rec­tan­gles and put it in place on the screen)
  11. Ren­der­ing

 

 

Six Prin­ci­ples

1.      Quickly respond to net­work requests

  1. Avoid 3xx Redi­rec­tions. This can cause up to 200ms delay (10% of delay).
  2. Avoid meta refreshes. <meta http-equiv=“refresh” content=“url=http://news.com/”/>
  3. Server response time should be measured.
  4. Use Con­tent Dis­tri­b­u­tion Net­works (CDN’s). Met­ric – Atlanta to Red­mond – assum­ing hops (250ms)
  5. Browser can make 6 on an aver­age per domain. So if images are on in dif­fer­ent domains – you can make 24 resources in parallel.
  6. Reuse Con­nec­tions (In the HTTP header please don’t send Connection-Close) – some servers do.
  7. Know your servers (min­i­mize the impact of response)
  8. Under­stand your net­work timing.

Unload-Redirect-AppCache-DNS-TCP-Request-Response-Processing-onLoad

2.      Min­i­mize bytes downloaded

  1. Aver­age web­sites down­loads 777k. Images, Scripts, HTML, Style Sheets – in that order
  2. Gzip your con­tent – make sure from the HTTP header that the server is doing that for you.
  3. Per­sist App Resources Locally in Pack­age. (This is Win­dows App Store resources)
  4. Cache Dynamic Resources in App Cache (Use HTML5 app cache) – ver­sion v1, v2.
  5. Pro­vide Cacheable Con­tent. Put the Expires in the HTTP header for the resources.
  6. Send con­di­tional requests (Mark con­tent as cacheable and set expi­ra­tion, use Last-Modified in HTTP header)
  7. Cache Data Requests (jQuery.ajax({ has a prop­erty cache:true)
  8. Stan­dard File Cap­i­tal­iza­tion Con­ven­tion – Low­er­case, upper­case, care­less­case. (Three dif­fer­ent net­work resources for each)
  9. Use HTTP header and page meta=tag  if an old web­site needs to run in the IE7 mode.
  10. Always link style sheets at the top of the page, ide­ally in <head> also syn­chro­nously BLOCK paint­ing the page.
  11. Avoid using @import for hier­ar­chi­cal styles. Syn­chro­nously blocks the paint­ing to the screen.
  12. Avoid embed­ded and inline styles. Browser has to con­text switch from the CSS parser to HTML parser. Even fix­ing the small bug in there – NOT OK!!!! (save your­self 15–20%)
  13. Only Include Nec­es­sary Styles. Same style sheets for the same page – NOT RECOMMENDED. The browser has to down­load it and cre­ate all the data struc­ture that will never be used.
  14. Always Link JavaScript at the End of File. Javascript engine to kick off later.
  15. Avoid Link­ing JavaScript in head. (Syn­chro­nously block on javascript)
  16. Avoid Inline JavaScript (same con­text switch­ing – much larger degree – jit­ting run­time issues)
  17. Use the Defer Tag if it is nec­es­sary to put the javascript in the HEAD tag.

3.      Effi­ciently Struc­ture Markup

<script src=“myscript.js” defer=“defer”></script>

  1. Asyn­chro­nously Down­load Script. Use ASYNC key­word in the script tag.)

<script async src=“myscript.js”></script>

  1. Reuse the javascript code.
  2. Stan­dard­ize on a Sin­gle Frame­work (lot of frame­work does the same thing)
  3. Don’t include script to be cool.

 

4.      Opti­mize Media Usage

  1. Min­i­mize num­ber of images. (Aver­age web­site down­loads 58 images)
  2. Avoid Death by 1000 Images – espe­cially from so many dif­fer­ent domains – DNS delay.
  3. Use Image Sprites. (See met­ric in slide) – one image sprite for icon. More images – more connections.
  4. Cre­ate Your Sprites by Hand – most efficient.
  5. Image For­mats: PNG, JPEG, JPEG-XR – in that order.
  6. Use Native Image Res­o­lu­tions – do not scale it down on client.
  7. Replace Images with CSS3 gra­di­ents – old way of doing it is hav­ing an image instead.
  8. Replace Images with CSS3 Bor­der Radius.
  9. Lever­age CSS Trans­forms – instead of dif­fer­ent images.
  10. Use DataURI’s for small sin­gle view Images.
  11. Avoid Com­plex SVG Paths
  12. Video: User Pre­view Images – only down­loads the image not the entire video.
  13. Min­i­mize media plu­gin usage. (more run­times, more slow) – HTML5 is the best.
  14. Proac­tively Down­load Future Media – asynchronously.

 

5.      Write Fast JavaScript

  1. Stick to Inte­ger Math. Float­ing point is slow on javascript – con­vert float­ing num­bers to inte­gers Math.floor.
  2. Minify your JavaScript. Smaller vari­ables and min­i­mized code.
  3. Ini­tial­ize JavaScript on Demand. (see example)
  4. Min­i­mize DOM interactions.
  5. Built-in DOM Meth­ods Always More Effi­cient (even com­pared to third-party library – firstchild, nextsibling)
  6. Use Selec­tor API for Col­lec­tion­sAc­cess — document.querySelectorAll(“.required”); FASTER
  7. Use .inner­HTML to Con­struct Your Page (10 to 15 times faster)
  8. Batch Markup Changes (don’t change the first name and them last name, etc)
  9. Main­tain a small and Healthy DOM (rec­om­mended is 1000 elements)
  10. JSON is always faster than XML
  11. Use Native browser JSON methods
  12. Use Reg­u­lar Expres­sions Sparingly.

 

6.      Know what your appli­ca­tion is doing

  1. Under­stand JavaScript Timers
  2. Com­bine Appli­ca­tion Timers
  3. Align Timers to the Dis­play Frame
  4. Use reques­tAni­ma­tion­Frame for Animations
  5. Know when your app is vis­i­ble. (Page Vis­i­bil­ity API) – HTML5

 

Ref­er­ence

I loved the BUILD 2010 video - 50 per­for­mance tricks to make your HTML5 apps and sites faster

You can find the same in here -

http://channel9.msdn.com/Events/Build/2012/3–132

 

Did you like this? Share it:

  • Tag Cloud

  • Recent Tweets

    Follow Me on Twitter

    Powered by Twitter Tools

  • Categories