Question

我正在创建一个投资组合网站，该网站使用鼠标位置/移动加速器（陀螺仪）的实时计算来移动3D面板以响应这些读数。它在功能强大的计算机/ iPhone上运行良好，但对于较弱的笔记本电脑等则不是很好。

我为不同的设备类型设置了一些不同的变量，但我想检测用户的计算机处理JS / CSS的速度有多快，并根据该结果更改位置更新率。

我已经看到了与使用Date.now()和performance.now()测试效果相关的答案，但没有找到任何关于对用户的测试结果做出反应的内容。

我正在使用的那段代码：

function ifWin(){
    return ( ( navigator.platform.indexOf("Win") != -1) ); }
    if(ifWin()) {initialize_pc(); runPc = setInterval( run_pc, 30 );
    } else {
        /*do nothing*/
    }

我希望能够检测用户处理的速度，并根据该速率更改setInterval速率。快速（30ms）和较慢的计算机速率较慢（150ms）。我是一个JS新手，有人能解释这样做的最佳方法吗？

更新：我尝试使用requestAnimationFrame，但在弱机器上的性能没有变化。更改setInterval Rate肯定有帮助，但requestAnimationFrame似乎没有根据性能降低速率。

如果有帮助，这就是我使用requestAnimationFrame运行的整个函数：

function run_pc() {

    requestAnimationFrame(run_pc);

    perspective.cx += ( perspective.tx - perspective.cx ) * .5;
    perspective.cy += ( perspective.ty - perspective.cy ) * .5;

    page1.style.webkitTransform = 'translate3d(' + perspective.cy * -.5 + 'vw, ' + perspective.cx * .5 + 'vw, ' + perspective.cx  * -2 + 'vw) rotateX(' + perspective.cx * 1.3 + 'deg) rotateY(' + perspective.cy * -1 + 'deg) rotateZ(0deg)';

    detailPanel.style.webkitTransform = 'translate3d(' + perspective.cy * -.5 + 'vw, ' + perspective.cx * -1 + 'vmin, ' + perspective.cx * -10 + 'vw) rotateX(' + perspective.cx * 1.2 + 'deg) rotateY(' + perspective.cy * -1 + 'deg) rotateZ(0deg)';

}

function ifWin(){
    return ( ( navigator.platform.indexOf("Win") != -1) ); }
    if(ifWin()) {initialize_pc(); run_pc();
    } else {
        /*do nothing*/
}

更新：我从perspective.cx += ( perspective.tx - perspective.cx ) * .5;

中移除了“* .5”，从而提升了效果

我猜这对于某些机器而言计算太多了。这样做的目的是为动作添加缓和效果。宽松很好，所以。我会尝试找到一种数学密集程度较低的方法。

测试最终用户的JS / CSS性能并相应地更改变量

0 个答案: