There is no public database of performance by feature by device, nor any automated way to turn potentially slow features on and off. You'll have to decide for yourself what features you think are slow on what devices and turn them off, such as
body.transitions-are-slow * {
transition-property: none !important;
}
Then arrange to place the transitions-are-slow class on the body based on some kind of device sniffing and empirical knowledge of that device's performance.
That's for CSS, but you also mention JS. However, I can't think of cases where some particular JS API is particularly slow on some particular device. JS will slow down uniformly on slower devices. Therefore, I don't really see why, or how, you would want to be thinking about turning off individual JS features based on device performance issues.
Are there better methods than time-stamping code execution blocks?
There's no obvious way to timestamp CSS performance, but for JS I suppose you could do the following, use with care:
function kill_if_slower_than(fn, threshold) {
var killed = false;
return function() {
if (killed) return;
var start = performance.now();
var result = fn.apply(this, arguments);
killed = performance.now() - start > threshold;
return result;
};
}
This will return a function which will turn into a no-op the first time its execution takes longer than threshold milliseconds. You obviously don't want to use this on anything other than something purely optional. It also is not going to help you with asynchronous situations.
I have used performance.now above due to its higher resolution, however on some older browsers you might need to fall back to Date.now().
