我怎样才能“性能检测”浏览器
[英]How can I “performance detect” browsers
问题描述
Some mobile browsers and IE8 javascript is not just a little bit slower, it's many times 10x slower! 
一些移动浏览器和IE8 javascript不仅有点慢，它的速度要慢10倍！ There are lots of things that pass feature detection tests (js css manipulations, etc) but are so slow they degrade the user experience. 有很多东西通过特征检测测试（js css操作等），但速度很慢，会降低用户体验。
Modernizr will tell me that a feature exists, but it won't tell me if it's below some performance threshold. Modernizr会告诉我一个功能存在，但它不会告诉我它是否低于某个性能阈值。
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. 检测IE8适用于IE8用户，但它不适用于运行旧版FF，Safari，移动Opera等的慢速移动设备，平板电脑和计算机。
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 个解决方案
解决方案1
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. 然后根据某种设备嗅探和该设备性能的经验知识，安排在身体上放置transitions-are-slow类。
That's for CSS, but you also mention JS. 那是CSS，但你也提到了JS。 However, I can't think of cases where some particular JS API is particularly slow on some particular device. 但是，我想不出某些特定JS API在某些特定设备上特别慢的情况。 JS will slow down uniformly on slower devices. JS将在较慢的设备上统一减速。 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. 因此，我真的不明白为什么或如何考虑基于设备性能问题关闭单个JS功能。
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: 没有明显的方法来为CSS性能添加时间戳，但对于JS，我认为你可以做到以下几点，小心使用：
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. 这将返回一个函数，该函数在第一次执行时间超过threshold毫秒时将变为无操作。 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() . 我之前使用过performance.now ，因为它具有更高的分辨率，但是在某些旧版浏览器中，你可能需要回Date.now() 。
解决方案2
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. 即使您不喜欢js测试，Modenizr.js也是一个自信的库，用于执行您可能需要的所有css / js测试。
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. IE的另一种选择。 is the good 'ol HTML conditionals. 是一个很好的'HTML条件。
<!--[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. 您可以让PHP任务解析浏览器提供的用户代理字符串以获取浏览器版本，甚至操作系统类型并以这种方式重新路由请求，或者在文档中放入条件语句。 There is an available lightweight library for this here... 这里有一个可用的轻量级库...
https://github.com/serbanghita/Mobile-Detect 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. 这段代码的作用是检测（使用用户代理字符串）它是什么类型的设备，然后在文档中打印它将放置javascript文件的设备类型。 So a tablet user's browser would load in the js file js/main.tablet.min.js . 因此，平板电脑用户的浏览器将加载到js文件js/main.tablet.min.js 。 I also included a small conditional example. 我还包括一个小的条件示例。
解决方案3
-1 2013-09-30 22:08:04
I suggest this method: 我建议这个方法：
First : in your HTML head section, place this code 首先 ：在HTML头部分中，放置此代码
<!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. 然后 ，您可以使用一些JS函数轻松检测IE的当前版本是什么，并禁用某些功能。
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 ;-)");
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.