Giter VIP home page Giter VIP logo

jiagra's Introduction

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

jiagra's People

Contributors

samyk avatar c0sco avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.