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

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

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

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

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

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


comment
@Кну, где? Есть ссылка?   -  person Evan    schedule 08.10.2013


Ответы (3)


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

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;
  };
}

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

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

person Community    schedule 02.05.2015
comment
Разный код работает по-разному в разных браузерах на разном оборудовании. На моем компьютере запуск for(var x=new Date(),i=0;i++<1e4;i<<9&9%9*9+9);console.log((new Date())-x); в IE11 показывает 4–6 мс, а Chrome — 8–10 мс. - person Ismael Miguel; 02.05.2015
comment
Тот же код на виртуальной машине под управлением Android 4.2.2 (в браузере по умолчанию) завершается за 0–1 мс. - person Ismael Miguel; 02.05.2015
comment
Еще нет фреймворка для интерфейса, включающего такие вещи? Постепенно улучшайте анимацию с точками останова, основанными на фактической измеренной производительности устройства. - person Leeroy; 20.12.2018

Даже если вам не нравятся тесты 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>

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

person CP510    schedule 30.09.2013
comment
В настоящее время я использую Modernizr, и IE8 не является моей главной проблемой. Например, многие мобильные браузеры проходят тесты Modernizr, но работают настолько медленно, что многие функции (например, различные типы анимации) становятся непрактичными. Я хотел бы отключить эти пресловутые анимации только для людей, для которых это ухудшит их опыт. - person Evan; 01.10.2013
comment
Это грубый путь, но вы можете использовать PHP-скрипт для обнаружения мобильных устройств, чтобы условно блокировать код, независимо от того, мобильный он или нет. - person CP510; 01.10.2013
comment
Я должен отметить, что эта библиотека Mobile Detect, которую я включил, занимает очень мало места. Просто обновите эту библиотеку, когда сможете, чтобы можно было поддерживать обнаружение новых устройств. - person CP510; 01.10.2013
comment
Мобильный поиск кажется непрактичным для этого. Производительность никак не соотносится с одним мобильным устройством. Это перекрестный продукт производителя, версии ОС, версии браузера и настроек телефона. Кроме того, учитывая невероятную фрагментацию мобильных устройств (тысячи устройств), это звучит очень плохо. - person Evan; 02.10.2013
comment
Тогда, боюсь, у вас нет другого выбора, кроме как поставить отметку времени. Нет применимого способа оценить производительность клиента без его тестирования или запуска дополнительного кода. Если в ваших сценариях не хватает производительности, вам нужно перепроектировать или переосмыслить то, что вы делаете. - person CP510; 02.10.2013

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

Во-первых: в разделе заголовка 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 для тестирования

person Paul Rad    schedule 30.09.2013
comment
У меня уже есть определение версии IE, но IE не является моей главной проблемой. Мои основные проблемы — это очень медленные браузеры для планшетов, медленные компьютеры и более универсальный способ адаптировать удобный опыт для всех. - person Evan; 01.10.2013