如何为你的网站加入FPS监测

原创于 2020-07-25 18:04:41 发布 · 655 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

JavaScript

14 篇文章

订阅专栏

本文介绍了一种在网页中实时监控并显示帧率(FPS)的方法，适用于前端开发者优化页面性能。通过JavaScript代码实现，可直接集成到项目中，或封装为npm包用于Vue、React等框架。

 $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
        var showFPS = (function () {
            var requestAnimationFrame =
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
            var e, pe, pid, fps, last, offset, step, appendFps;

            fps = 0;
            last = Date.now();
            step = function () {
                offset = Date.now() - last;
                fps += 1;
                if (offset >= 1000) {
                    last += offset;
                    appendFps(fps);
                    fps = 0;
                }
                requestAnimationFrame(step);
            };
            appendFps = function (fps) {
                console.log(fps + 'FPS');
                $('#fps').html(fps + 'FPS');
            };
            step();
        })();