Проверьте, может ли система отображать эффекты JS плавно - PullRequest
4 голосов
/ 03 июня 2011

Мне интересно, есть ли простой способ реализовать быстрый браузер для скорости рендеринга в браузере?

Приятно иметь эффектные анимационные эффекты, но только если машина справится с этим. С SVG и всеми эффектами, которые jQuery дал массам, есть возможность отображать большие объемы данных визуально и анимированно. Тем не менее, не существует простого способа (который я пока могу найти), чтобы проверить и проверить, должен ли пользовательский агент предоставлять версию данных flashy animated svg, static svg или tabled.

Спасибо

Ответы [ 3 ]

1 голос
/ 27 июня 2011

Единственный способ, которым я знаю, - это запустить репрезентативную анимацию и измерить ее скорость, либо по времени для рендеринга x кадров, либо по общему количеству кадров за фиксированное время.Библиотеки анимации в jQuery и YUI адаптируют количество отображаемых кадров в зависимости от скорости рендеринга каждого кадра по ходу.Вы можете посмотреть, как они это делают, чтобы получить некоторые идеи, как измерить это, или если вы используете одну из этих библиотек, вы даже сможете получить информацию из них после анимации.

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

0 голосов
/ 03 июня 2011

Я использовал Enhance.js , чтобы сделать это до

Взгляните на пример загрузки css и js исключительно для экранных и мобильных устройств

enhance({
        loadStyles: [
                {media: 'screen', excludemedia: 'screen and (max-device-width: 480px)', href: 'css/screen.css'},
                {media: 'screen and (max-device-width: 480px)', href: 'css/handheld.css'}
        ],
        loadScripts: [
                {media: 'screen', excludemedia: 'screen and (max-device-width: 480px)', src: 'js/screen.js'},
                {media: 'screen and (max-device-width: 480px)', src: 'js/handheld.js'}
        ]       
});

Enhance.js также имеет другие типы проверок, и вы также можете добавить или создать собственную проверку, если необходимо

На Страница группы филаментов , это еще не все

0 голосов
/ 03 июня 2011

Попробуйте использовать вкладку Net в Firebug.Просто загрузите страницу, которую хотите протестировать, откройте Firebug, нажмите маленькую стрелку вниз на вкладке «Сеть» и выберите «Включить», а затем обновите страницу.Вы получаете симпатичные графики времени загрузки каждого элемента на странице.

...