Как я могу обнаружить "браузеры с проверкой производительности"

Некоторые мобильные браузеры и javascript IE8 не просто немного медленнее, он много раз 10x медленнее! Есть много вещей, которые проходят тесты обнаружения объектов (js css-манипуляции и т.д.), Но они настолько медленны, что ухудшают работу пользователей.

Modernizr скажет мне, что существует функция, но она не скажет мне, если она ниже некоторого порога производительности.

Обнаружение IE8 будет работать для пользователей IE8, но оно не будет работать на медленных мобильных устройствах, планшетах и компьютерах, на которых установлены старые версии FF, Safari, мобильных Opera и т.д.

Каковы эффективные способы умерить или отключить медленные функции, не наказывая современных пользователей браузера?

Являются ли лучшие методы, чем блоки выполнения кода времени?

Ответ 1

Нет общедоступной базы данных производительности по функциям с помощью устройства, а также автоматизированного способа включения и отключения потенциально медленных функций. Вам нужно будет решить, какие функции вы считаете медленными на каких устройствах и отключите их, например

body.transitions-are-slow * {
  transition-property: none !important;
}

Затем организуйте размещение класса transitions-are-slow на теле на основе какого-либо устройства, обнюхивающего и эмпирического знания об этой производительности устройства.

Что для CSS, но вы также упоминаете JS. Однако я не могу придумать случаи, когда какой-то конкретный JS API особенно медленный на каком-то конкретном устройстве. JS будет медленно замедляться на более медленных устройствах. Поэтому я действительно не понимаю, почему, или как, вы хотели бы думать об отключении отдельных функций JS на основе проблем с производительностью устройства.

Существуют ли лучшие методы, чем блоки выполнения кода времени?

Нет очевидного способа отметки производительности 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;
  };
}

Это вернет функцию, которая превратится в no-op в первый раз, когда ее выполнение займет больше, чем threshold миллисекунды. Вы, очевидно, не хотите использовать это на чем-то другом, кроме чего-то чисто необязательного. Он также не поможет вам в асинхронных ситуациях.

Я использовал performance.now выше из-за его более высокого разрешения, однако на некоторых старых браузерах вам может понадобиться вернуться к Date.now().

Ответ 2

Даже если вам не нравятся тесты js, Modenizr.js - это надежная библиотека для выполнения всех тестов css/js, которые вам могут понадобиться.

В противном случае проверка возможностей реального компьютера невозможна, не пытаясь опросить его самостоятельно (т.е. принимать временные измерения во время загрузки).

Другой вариант для IE. это хорошие условные выражения HTML.

<!--[if lt IE 8]>
    HTML CODE OR SCRIPTS
<![endif]-->

Вы можете задавать PHP для анализа строки User-Agent, которую поставляют браузеры для получения версий браузера, и даже типа ОС, и перенаправлять запросы таким образом, или помещать условные заявления в документ. Для этого есть доступная облегченная библиотека...

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>

Что этот код будет делать, это обнаружить (используя строку user-agent), какое устройство оно есть, а затем в документе, который он печатает в типе устройства, где будет создан файл javascript. Таким образом, пользовательский браузер планшета загрузится в файл js js/main.tablet.min.js. Я также включил небольшой условный пример.

Ответ 3

Я предлагаю этот метод:

Сначала: в разделе заголовка 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>

Затем вы можете легко обнаружить с помощью небольшой функции 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 ;-)");
}

JSBin для тестирования