hascan: only serve the ones your care about
Posted by Dion Almaer 9 months ago on performance testing
Give Hascan a user-agent string and it will build a version of your code which eliminates has(‘feature’) branches intended for other browsers. Using data from Browserscope, Hascan can determine which features a browser supports, statically analyze your code using Uglify, and safely remove branches not intended for that browser.
Joe Hewitt has been talking about this library, and I am very excited to see it see the light of day. Why make the client do a ton of runtime tests and pay the price of a download? Use hascan.js in eliminate mode.
If you don’t want the complexity, why not make 100% sure that the has.js that you download only has the items that you absolutely need to test for? Use hascan.js in build mode.
// Eliminating code
var hascan = require('hascan');
var sourceCode = 'if (has("svg")) { a() } else if (has("canvas")) { b() } else { c() }';
var featureMap = {svg: false, canvas: true};
var smallerCode = hascan.eliminateFeatureTests(sourceCode, featureMap);
console.log(smallerCode);
// prints: {b()}
// Getting features supported by a user-agent
var hascan = require('hascan');
var userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.803.0 Safari/535.1";
hascan.getFeatureDB(['canvas', 'svg', 'activex'], function(err, featureDB) {
var featureMap = featureDB.getFeatureMap(userAgent);
console.log(featureMap);
});
// prints: { canvas: true, svg: true, activex: false }
Awesome stuff…. and fits in so nicely with the world of mobile (while being useful in the desktop world too).