How can I “performance detect” browsers
Question
Some mobile browsers and IE8 javascript is not just a little bit slower, it's many times 10x slower! There are lots of things that pass feature detection tests (js css manipulations, etc) but are so slow they degrade the user experience.
Modernizr will tell me that a feature exists, but it won't tell me if it's below some performance threshold.
Detecting IE8 would work for IE8 users, but it won't work for slow mobile devices, tablets, and computers running old versions of FF, Safari, mobile Opera, etc.
What are effective ways to temper or disable slow features without penalizing modern browser users?
Are the better methods than time-stamping code execution blocks?
3 answers
solution1
3
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() .
solution2
1 2013-09-30 21:57:53
Even though you don't like the js tests, Modenizr.js is a confident library for doing all the css/js testing you could need.
Otherwise, testing the abilities of the actual computer is impossible without trying to poll it yourself (ie. taking time measurements during loading).
Your other option for IE. is the good 'ol HTML conditionals.
<!--[if lt IE 8]>
HTML CODE OR SCRIPTS
<![endif]-->
You can task PHP to dissect the User-Agent string that browsers supply to pick up browser versions, and even OS type and re-route the requests that way, or put in conditional statements in the document. There is an available lightweight library for this here...
https://github.com/serbanghita/Mobile-Detect
<?php
require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
?>
<html>
<body>
<script src="js/main.<?= $deviceType ?>.min.js" type="text/javascript></script>
<script>
<? if($deviceType==='phone') { ?>
alert('You're on a phone!');
<? } ?>
</body>
</html>
What this code would do is detect (using the user-agent string) what kind of device it is, and then in the document it prints in the device type where the javascript file would be put in place. So a tablet user's browser would load in the js file js/main.tablet.min.js . I also included a small conditional example.
solution3
-1 2013-09-30 22:08:04
I suggest this method:
First : in your HTML head section, place this code
<!doctype html>
<!--[if lt IE 7 ]> <html class="6"> <![endif]-->
<!--[if IE 7 ]> <html class="7"> <![endif]-->
<!--[if IE 8 ]> <html class="8"> <![endif]-->
<!--[if IE 9 ]> <html class="9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="10+"> <!--<![endif]-->
<head>
Then , you can easily detect with a little JS function what is the current version of IE and disable some features.
var modern_browser = true;
var internet_explorer_version = null;
var detectBrowser = function() {
var html = document.getElementsByTagName('html')[0];
if (html.className === 'notie')
{
return ;
}
internet_explorer_version = html.className;
modern_browser = false;
return;
}();
if (modern_browser === false)
{
alert ("You use Internet Explorer : version " + internet_explorer_version);
}
else
{
alert ("You use a modern Browser ;-)");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.