Как измерить производительность анимации jQuery и преобразования CSS3? - PullRequest
Новая
       1

Как измерить производительность анимации jQuery и преобразования CSS3?

5 голосов
/ 09 декабря 2010

Мне было любопытно, есть ли способ измерить, какое использование процессора происходит, когда речь идет о преобразованиях CSS3 по сравнению с анимациями на основе JavaScript (jQuery, Dojo). Конечно, есть элегантное решение для отслеживания использования ресурсов в такой ситуации. Вот простой пример: 

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#object1').hover(function(){
                $(this).animate({marginLeft: '120px'}, 1000);
            }, function(){
                $(this).animate({marginLeft: '0px'}, 1000);
            });
        });
    </script>

    <style>
        #object1 {
            height: 400px;
            width: 400px;
            background: #4f9a23;            
        }

        #object2 {
            height: 400px;
            width: 400px;
            background: #343434;    
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }

        #object2:hover {
            margin-left: 120px;
        } 
    </style>
  </head>

  <body>
    <div id="object1"></div>
    <div id="object2"></div>
  </body>

</html>

Ответы [ 3 ]

4 голосов
/ 31 декабря 2010

Вы смотрели на JPU?Это букмарклет Javascript, который пытается измерить загрузку процессора.Для некоторых вещей он работает хорошо, но для такой простой анимации я не уверен, что для регистрации на счетчике достаточно сока.

1 голос
/ 09 декабря 2010

вы не можете отслеживать использование процессора пользователем и не можете видеть со стороны сервера, так как он там не работает,

2 вещи, которые вы можете отслеживать, это fps и длительность времени, а также простая задача, подобная этойя сомневаюсь, что вы заметили большую разницу, вы могли бы создать 1000 объектов с той же анимацией, но кто бы посещал ваш сайт, тогда

, что вам нужно сделать, это несколько раз протестировать его на своем компьютере, используя 2 различных метода, и посмотретьИзменения в использовании вашего процессора и что делает diffrence thoose 2

0 голосов
/ 31 марта 2011

Я бы сделал 1000 из каждого объекта, тогда должно быть эмпирически ясно, что происходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...