Javascript 特定于配置文件的动画CPU_Javascript_Jquery_Html_Css_Cpu

Javascript 特定于配置文件的动画CPU

javascript jquery html css

Javascript 特定于配置文件的动画CPU,javascript,jquery,html,css,cpu,Javascript,Jquery,Html,Css,Cpu,情况与问题我的站点中有多个动画（css和javascript/jQuery），有时会让我的站点结巴。我的问题如何查看特定动画（CSS、JavaScript和jQuery）在运行时和执行时使用了多少cpu 我知道如何查看整个站点的CPU使用情况，但不了解特定动画。单击F12，转到配置文件，单击开始。重新加载页面等待页面重新加载，然后单击停止单击您的配置文件并查看结果（Y）前言：这不是一个“完整”的答案，而是在合理的时间内我能想到的最好答案。虽然我的结果不是一个完美的答案，但我还是很遗

情况与问题
我的站点中有多个动画（css和javascript/jQuery），有时会让我的站点结巴。

我的问题
如何查看特定动画（CSS、JavaScript和jQuery）在运行时和执行时使用了多少cpu

我知道如何查看整个站点的CPU使用情况，但不了解特定动画。

单击F12，转到配置文件，单击开始。重新加载页面

等待页面重新加载，然后单击停止

单击您的配置文件并查看结果（Y）

前言：这不是一个“完整”的答案，而是在合理的时间内我能想到的最好答案。虽然我的结果不是一个完美的答案，但我还是很遗憾没有公布我的结果

它还只包括

jQuery.animate

；我没有调查CSS动画

至少对于jQuery来说，这是困难的；它不像浏览器“知道”关于 jQuery动画。实际上，jQuery所做的就是使用

setTimeout（）

或

setInterval（）

，其中每个函数调用都会将元素移动几个像素（或稍微更改其他内容），从而产生平滑动画的错觉

不知何故，您的浏览器必须跟踪函数调用属于哪个函数到哪个动画。因为这些都是匿名函数，所以这并不是真的容易的。。。可以使用某种特殊的调试语句，但AFAIK不会浏览器实现了这样的功能

我们可以做的是测量更新的次数

jQuery.animate

使用

步骤

回调：

为每个动画元素的每个动画属性调用的函数。此函数提供了修改Tween对象以更改设置属性之前的属性值

这最多只能给你一个近似值。但也许它是好的足够地我创建了一个示例（见下文），它在我的系统：

您的系统可能会有所不同，但建议：

```
a
```
是最便宜的
```
b
```
稍微更具说服力，但实际上也相当便宜
```
c
```
比
```
a
```
或
```
b
```
贵几倍

为了检查这是否大致准确，我一次只启用了一个动画时间，并检查这是否符合Chromium&Firefox开发者工具报告的内容：

铬：
```
a
```
40ms非空闲时间；Firefox:2次调用
```
n.fx.tick
```
铬：
```
b
```
40ms非空闲时间；Firefox:4次调用
```
n.fx.tick
```
铬：
```
c
```
130ms非空闲时间；Firefox:36次调用
```
n.fx.tick
```

这确实大致准确，但并不完全准确

这对您的应用程序足够有用吗？我不知道。也许，也许不是

测试HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Animations test</title>
        <style>
            div { width: 200px; height: 100px; position: relative; color: #fff; }
            #test_a { background-color: green; }
            #test_b { background-color: red; }
            #test_c { background-color: blue; }
        </style>
    </head>

    <body>
        <div id="test_a"></div>
        <div id="test_b"></div>
        <div id="test_c"></div>

        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="anim.js"></script>
    </body>
</html>

为了方便起见，编译了相同的JS：

// Generated by CoffeeScript 1.7.1
(function() {
  var go;

  go = function() {
    var a, b, c, log;
    a = b = c = 0;
    log = function(n, t) {
      var str;
      eval("u = " + n);
      str = "" + n + ": " + u + " updates; " + (parseInt(u / t, 10)) + " upd/s";
      $("#test_" + n).html(str);
      return console.log(str);
    };
    $('#test_a').animate({
      left: '500px'
    }, {
      duration: 500,
      step: function() {
        return a += 1;
      },
      complete: function() {
        return log('a', .5);
      }
    });
    return;
    $('#test_b').animate({
      top: '100px',
      left: '100px',
      opacity: 0.3,
      width: '500px'
    }, {
      duration: 200,
      step: function() {
        return b += 1;
      },
      complete: function() {
        return log('b', 2);
      }
    });
    return $('#test_c').animate({
      left: '500px',
      top: '300px',
      opacity: .75,
      height: '50px',
      width: '400px'
    }, {
      duration: 3000,
      step: function() {
        return c += 1;
      },
      complete: function() {
        return log('c', 3);
      }
    });
  };

  $(document).ready(function() {
    return setTimeout(go, 500);
  });

}).call(this);

您可以尝试在每个jQuery动画开始时运行

console.profile（）

实例，然后一次禁用一个动画以进行调试

据我所知，您无法配置CSS动画。只有起始值和结束值可以通过JavaScript访问

函数AnimateRotate（元素、角度、dur）{
变量$elem=$（elem）；
//我们为动画使用一个伪对象
//（从'0'到'angle'，您可以根据需要命名它
$({
度数：0
}).制作动画({
度：角度
}, {
持续时间：dur，
步骤：功能（现在）{
//在步骤回调中（动画的每个步骤都会触发该回调），
//您可以使用包含当前
//动画位置（`0`到`angle`）
$elem.css({
变换：'旋转（'+now+'deg）'
});
}
});
}
$（'#1'）。单击（函数（）{
console.profile（'Animation#1'）；
$（此）。设置动画({
“高度”：“100px”，
“宽度”：“100px”
}，函数（）{
console.profileEnd（'Animation#1'）；
});
});
$（'#2'）。单击（函数（）{
console.profile（'Animation#2'）；
动画制作（这个，3000，400）；
$（此）。设置动画({
“高度”：“300px”，
“宽度”：“300px”
}，函数（）{
console.profileEnd（'Animation#2'）；
});
});
div{
高度：10px；
宽度：10px；
背景色：红色；
变换原点：60%100%；
}



也许您可以使用Firefox来控制台.profile（）。

将console.profile（）
放在要测量的函数之前，将console.profileEnd（）
放在方法之后
<html>
  <body>
    <script>
      myFunc = function() {
        var a = [];
      }             

      console.profile();
      myFunc();
      console.profileEnd();
    </script>
  </body>
</html>


myFunc=函数（）{
var a=[]；
}             
console.profile（）；
myFunc（）；
console.profileEnd（）；


在这里您可以找到更多的调试方法
编辑：我刚刚找到另一个站点，其中包含firebug扩展的有用信息：
您看过Chrome开发工具吗？查看和了解更多信息info@pomeh是的，我做了，但是我看不出哪一个CSS动画使用了很多CPUI在前面尝试过这个，但后来继续，通过禁用三个动画中的两个，三次来分析网站。CSS动画使用GPU周期，而不是CPU周期。常规的JavaScript分析器应该为您提供执行时间和CPU使用率，但由于CSS动画有一种完全不同的工作机制，这些分析器不是您所需要的。CSS动画的全部要点是它们是硬件加速的，这意味着CPU不是它们背后的主要驱动程序；它不在乎原因是什么，也不在乎工作是如何完成的，只在乎有多少。我给你奖金是因为你最接近于回答我的问题。谢谢。我就是找不到如何检查css动画的cpu使用情况。如果我找到了，我也会把它贴在这里。
// Generated by CoffeeScript 1.7.1
(function() {
  var go;

  go = function() {
    var a, b, c, log;
    a = b = c = 0;
    log = function(n, t) {
      var str;
      eval("u = " + n);
      str = "" + n + ": " + u + " updates; " + (parseInt(u / t, 10)) + " upd/s";
      $("#test_" + n).html(str);
      return console.log(str);
    };
    $('#test_a').animate({
      left: '500px'
    }, {
      duration: 500,
      step: function() {
        return a += 1;
      },
      complete: function() {
        return log('a', .5);
      }
    });
    return;
    $('#test_b').animate({
      top: '100px',
      left: '100px',
      opacity: 0.3,
      width: '500px'
    }, {
      duration: 200,
      step: function() {
        return b += 1;
      },
      complete: function() {
        return log('b', 2);
      }
    });
    return $('#test_c').animate({
      left: '500px',
      top: '300px',
      opacity: .75,
      height: '50px',
      width: '400px'
    }, {
      duration: 3000,
      step: function() {
        return c += 1;
      },
      complete: function() {
        return log('c', 3);
      }
    });
  };

  $(document).ready(function() {
    return setTimeout(go, 500);
  });

}).call(this);

<html>
  <body>
    <script>
      myFunc = function() {
        var a = [];
      }             

      console.profile();
      myFunc();
      console.profileEnd();
    </script>
  </body>
</html>