10

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

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

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

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

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

+0

@Knu, где? У вас есть ссылка? – Evan

ответ

1

Несмотря на то, что вам не нравятся тесты 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. Я также включил небольшой условный пример.

+1

Я в настоящее время использую Modernizr, и IE8 не является моей основной проблемой. Многие мобильные браузеры, например, пройдут тесты Modernizr, но работают так медленно, что делают многие функции (например, различные типы анимаций) непрактичными. Я хотел бы отключить эти пресловутые анимации только для людей, для которых это ухудшит их опыт. – Evan

+0

Это приблизительный маршрут, но вы можете использовать скрипт обнаружения мобильных устройств PHP для условного блокирования кода, если он мобилен или нет. – CP510

+0

Я должен отметить, что с той библиотекой Mobile Detect, которую я включил, площадь очень маленькая. Просто обновите эту библиотеку, когда сможете, чтобы новые устройства могли поддерживаться для обнаружения. – CP510

-1

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

Первый: в голове разделе 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 to test

+2

У меня уже есть обнаружение версии IE, но IE не является моей главной проблемой. Моими основными проблемами являются супер медленные планшетные браузеры, медленные компьютеры и более общий способ настройки хорошего опыта для всех. – Evan

2

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

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().

+1

Различные коды работают по-разному в разных браузерах под другим оборудованием. На моем компьютере выполняется 'for (var x = new Date(), i = 0; i ++ <1e4; i << 9 и 9% 9 * 9 + 9); console.log ((новая дата()) - x); 'в IE11 показывает 4-6 мс, а Chrome занимает 8-10 мс. –

+0

Тот же код на виртуальной машине под управлением Android 4.2.2 (в браузере по умолчанию) занимает 0-1 мс. –

 Смежные вопросы

  • Нет связанных вопросов^_^