經過requestAnimationFrame判斷瀏覽器幀率

時間 2019-11-06

標籤經過 requestanimationframe 判斷瀏覽器欄目瀏覽器简体版

原文原文鏈接

/** 
** 獲得瀏覽器每秒幀數fps 
**  
** @Date Mar 13 2013 
**/ 
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || //Chromium  
        window.webkitRequestAnimationFrame || //Webkit 
        window.mozRequestAnimationFrame || //Mozilla Geko 
        window.oRequestAnimationFrame || //Opera Presto 
        window.msRequestAnimationFrame || //IE Trident? 
        function(callback) { //Fallback function 
        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 ); 
    }; 
    //顯示fps; 若是未指定元素id，默認<body>標籤 
    appendFps = function(fps){ 
        if(!e) e=document.createElement('span'); 
        pe=pid?document.getElementById(pid):document.getElementsByTagName('body')[0]; 
        e.innerHTML = "fps: " + fps; 
        pe.appendChild(e); 
    } 
    return { 
        setParentElementId :  function(id){pid=id;}, 
        go          :  function(){step();} 
    } 
})();

相關標籤/搜索

瀏覽器

瀏覽

requestanimationframe