samyk/jiagra

jiagra: Javascript/Website Performance Enhancement

by Samy Kamkar, [email protected]
06/15/2011, http://samy.pl/jiagra

jiagra is a stand-alone javascript API for automatic website
performance enhancement.

Currently features:
  - tracking timers/intervals to see if they've been fired or not
      window.checkTimeout(timeoutID)
      // returns 'active', 'fired', 'firedActive', 'cleared' or 'firedCleared'
      // active has never fired (interval or timeout)
      // cleared has never fired and been cleared (interval or timeout)
      // fired is a timeout that has fired
      // firedActive is an interval that has fired and still active
      // firedCleared is an interval that has fired and cleared

  - get a list (array) of timers that are either active, cleared or fired
      window.activeTimeouts()  // active or firedActive
      window.clearedTimeouts() // cleared or firedCleared
      window.firedTimeouts()   // fired, firedActive or firedCleared

  - clearInterval/clearTimeout now returns 'true' if cleared,
      'false' if already cleared/fired, or undefined if no such timer
      Note that a timeout that is already 'fired' won't adjust to 'cleared'

  - document.currentScript polyfill + improvements over browser implementations
      Returns the script object which document.currentScript is getting called from.
      Unlike Opera/FF's built-in implementation, it will even work in callbacks and event handlers.
      It will also work on browsers which don't have a native implementation such as IE/Chrome/FF3.

  - prerendering/prefetching polyfill (pre-caching) for all browsers
    even if your browser doesn't support either.

  - John Resig's "degrading script tags", http://ejohn.org/blog/degrading-script-tags/
    which now applies to ALL script tags on a page!
      // can be globally enabled/disabled, and individually enabled/disabled
      <script src="path/to/script.js">
          code() // this gets executed after script.js loads
      </script>
      <script src="path/to/script.js" data-degrade="true">
          code() // this will run even if degradeEnabled is turned off
      </script>
      <script src="path/to/script.js" data-degrade="false">
          code() // this will NOT run
      </script>


Currently, it contains a pseudo-polyfill for pre-rendering/pre-fetching,
improved document.currentScript polyfill for determining the script
tag that's being executed, advanced timeout/interval functions and
degrading script tags,

Timeout/interval functions: these functions allow advanced
setting, monitoring, clearing and checking of timeouts/intervals,
even if executed from other scripts you don't control.

Pre-rendering/pre-fetching: This allows the page to load/cache
files you expect the user to be accessing, such as the next link.
Using actual browser prerendering is only supported in a handful
of bleeding-edge browsers, however this polyfill should work in
any browser! This allows pages to be pre-cached by the browser and
ready to load as soon as the user clicks, specifically determined
by the website maintainer (or smarty-pants code that figures out
which pages are accessed most).


INSTALLATION:

Simply add the script to your page like so:
<script src="jiagra.js"></script>

Then add pre-render/pre-fetch links to any URLs you want ready ASAP:
<link rel="prerender" href="http://example.org/index.html">
or
<link rel="prefetch"  href="/images/big.jpeg">

That's it!


Read more about Chrome Prerendering:
http://code.google.com/chrome/whitepapers/prerender.html

Read more about Firefox Prefetching:
https://developer.mozilla.org/en/Link_prefetching_FAQ