Запуск быстрого теста Javascript при первой загрузке

Question

Что я хотел бы сделать, это запустить простой и быстрый тест Javascript, когда пользователь сначала получит доступ к моему веб-приложению, чтобы определить его способность компьютера анимировать элементы. Я помню, как учитель сделал это в колледже, чтобы адаптировать частоту кадров своей игры в зависимости от машины пользователя.

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

Answer 1

Чтобы ответить на вопросы, которые вы просили в своем сообщении:

1) можно запустить тест JavaScript, когда человек первый загружает сайт, который будет проверять их потенциал для CSS/JavaScript скорость анимации, но будет жертвует несколькими ресурсами. Вы должны учитывать людей, которые будут получать доступ к вашему сайту. Если они собираются получить доступ к вашему сайту с помощью мобильного устройства, последнее, что вы хотите сделать, - приостановить работу своего устройства и либо заморозить их браузер, либо поднять другие приложения из памяти. Вы не хотите, чтобы на рабочем столе или мобильный пользователь считал, что сайт не отвечает на запросы.

2) Одна из проблем, ожидающих несколько секунд после загрузки страницы, заключается в том, что в зависимости от того, что вы хотите сделать с сайтом, люди начнут прокручивать ваш контент. Если они начнут прокручивать и понимать, что сайт «заикается», они могут подумать, что с их устройством что-то не так.

Еще одно предостережение заключается в том, что если вы хотите, чтобы самые плавные анимации были возможны, вы можете в конечном итоге использовать requestAnimationFrame (см. https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/). Если кто-то загружает ваш сайт и затем от него удаляется на другую вкладку во время запуска вашего теста, браузеры применяют практику уменьшения частоты кадров на неактивных вкладках в пользу тех, кто находится на активной вкладке. Тестирование, основанное на этой (неправильной) частоте кадров, приведет к тому, что части вашего сайта будут отключены для людей, которые отлично способны запустить ваш сайт со всеми анимациями без изменений, поэтому вам может понадобиться принять во внимание.

В некоторых тестах, которые я провел пару месяцев назад, версия анимации CSS3 была почти всегда более гладкой, чем версия анимации для JavaScript. Тем не менее, теперь есть библиотеки jQuery, которые перекрывают этот пробел, используя анимацию CSS3, когда это возможно, например, jQuery Transit (http://ricostacruz.com/jquery.transit/).