Faster AJAX LibrariesServer bandwidth has been a tad high recently - so I decided to profile some of the busiest sites using the excellent resource measuring tools in Google Chrome. The most obvious culprit on the sites I looked at was AJAX libraries like Prototype, jQuery and extJS. I needed to speed this up, now I already know about Google AJAX libraries API - so that seemed like a good place to start. Google AJAX libraries API provides an interface to load remote AJAX libraries using Google bandwidth. Google automatically handles caching and minifying to make the files load as quickly as possible. This is great but there are a few limitations. You have to declare which version of the library to load. I manage a lot of sites and generally I just want the most efficient, up-to-date version without having to update many different websites. So I've added a PHP function to ShiftLib called load_js(). You can send this function an array of libraries and it will load the most up-to-date versions using Google AJAX Libraries. I've also added support for lightbox and extJS - which are not supported by Google AJAX Libraries. My function will also detect if the page is running under SSL and subsequently load all the scripts by HTTPS if it is. It loads all the scripts in the correct order to avoid conflicts and works out dependencies - e.g. lightbox requires prototype to work. So instead of having a block of code like this: <link rel="stylesheet" type="text/css" href="/_lib/js/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/_lib/js/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/_lib/js/ext/ext-all.js"></script> <script type="text/javascript" src="/_lib/js/prototype.js"></script> <script type="text/javascript" src="/_lib/js/scriptaculous/scriptaculous.js"></script> <script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script> <script> jQuery.noConflict(); </script> I now have: <? load_js(array('extjs','scriptaculous','jquery')); ?> Much nicer. 12/07/2010 permalink | Posted in web development | 0 Comments » Leave a reply |
About meAdam Jimenez is a freelance web developer who has been professionally developing websites since 2000.Find me
Projects
Archive |