使用 JavaScript 获取当前页面帧率 FPS

            
            <p>当前FPS：<span id="fps"></span></p>


<!-- 测试动画 -->
<div class=demo>
  <canvas id=canvas width=300 height=150></canvas>
    <div style=font-size:14px;color:#777>
      （放个测试动画，使帧率产生波动方便查看效果，点击下方按钮可调节当前动画性能开销）
    </div>
    <div>
      <button onclick=updatePointCount(500)>连接点 +500</button>
      <button onclick=updatePointCount(-500)>连接点 -500</button>
    </div>
    <script>
        var c = document.getElementById("canvas"),
            ctx = c.getContext("2d"),
            points = [],
            pointCount = 500,
            point = function(t, i, o, n) {
                this.x = t, this.y = i, this.vx = o || 1, this.vy = n || 1
            };

        function updatePointCount(t) {
            (pointCount += t) < 0 && (pointCount = 0), init()
        }

        function loop() {
            ctx.clearRect(0, 0, c.width, c.height);
            for (var t = 0, i = points.length; t < i; t++) points[t].update();
            window.requestAnimationFrame(loop)
        }

        function init() {
            points = [];
            for (var t = 0; t < pointCount; t++) addPoint()
        }

        function addPoint() {
            var t = [Math.floor(Math.random() * c.width), Math.floor(Math.random() * c.height)],
                i = new point(t[0], t[1], Math.floor(2 * Math.random() - 1), Math.floor(2 * Math.random() - 1));
            points.push(i)
        }

        function iToX(t, i) {
            return t % (4 * i) / 4
        }

        function iToY(t, i) {
            return Math.floor(t / (4 * i))
        }

        function coordsToI(t, i, o) {
            return 4 * (mask.width * i + t)
        }
        point.prototype.update = function() {
            ctx.beginPath(), ctx.fillStyle = "#95a5a6", ctx.arc(this.x, this.y, 1, 0, 2 * Math.PI), ctx.fill(), ctx.closePath(), (this.x + this.vx >= c.width || this.x + this.vx < 0) && (this.vx *= -1, this.x += 2 * this.vx), (this.y + this.vy >= c.height || this.y + this.vy < 0) && (this.vy *= -1, this.y += 2 * this.vy);
            for (var t = 0, i = points.length; t < i; t++)
                if (points[t] !== this) {
                    var o = Math.sqrt(Math.pow(this.x - points[t].x, 2) + Math.pow(this.y - points[t].y, 2));
                    o < 5 && (ctx.lineWidth = .2, ctx.beginPath(), ctx.moveTo(this.x, this.y), ctx.lineTo(points[t].x, points[t].y), ctx.stroke()), o < 20 && (ctx.lineWidth = .1, ctx.beginPath(), ctx.moveTo(this.x, this.y), ctx.lineTo(points[t].x, points[t].y), ctx.stroke())
                } this.x += this.vx, this.y += this.vy
        }, loop(), init()
    </script>
</div>