我有一些浏览器密集的CSS和动画在我的网页,我想确定用户是否具有快速的PC或没有,所以我可以按比例调整的事情,提供最好的体验。
我使用http://detectmobilebrowser.com的脚本来检测所有的移动设备,并且我要包括该子句/android|ipad|ipod|playbook|silk/i.test(a)
包括所有平板设备如好。
然而,这并不并不能真正解决企业的实际硬件。 它不会走很远都画的什么,我正在寻找一个画面。
一个iPhone 4S,例如,将是相当多的比许多由移动用户代理检测器相匹配的设备的能力更强,并且这没有提供方法为它自己设定开。 有人可能奔腾II机(不知)上运行谷歌Chrome和想查看我的网页。 (此人可能不会有iPhone 4S)
显然,真正得到一个想法,为了这个,我将不得不做一些实际的性能测试,并作为与任何类型的应用程序的性能测试,是有意义的只是测试该应用实际执行的任务类型的性能。
即使考虑到这一点我觉得这将是很难得到任何合理准确的数字前的性能测试例程将采取太长,用户将不得不变得不耐烦。 因此,这可能意味着它继续前进,除非我想第一个初步印象是完美的。 好吧,这其实正好是这种情况。 所以我不能逃脱性能测试“后第一次运行”,后来调整参数。
所以我已经就剩是基本上尝试在初始页面加载执行类似的任务,在某种程度上是依赖于浏览器的渲染和处理速度,而不会呈现任何东西给用户(使用户他们还是认为页是装载),然后优选在一两秒钟获得足够精确的数字来设置参数的实际页动画和存在于令人满意的方式,不象幻灯片。
也许我可以把一整页白色<div>
在我的测试案例,这样我可以防止用户看到正在发生的事情,并希望浏览器将无法避免做所有的工作聪明。
有没有人做过这个?
我知道人们会说,“你可能并不需要这样做”,或“有一定有一个更好的方式”或“减少的影响额”。
之所以这样做任何我在做网页上的事情,使它看起来不错。 这就是它的全部要点。 如果我不关心尽可能多这个问题就不存在了。 我们的目标是让JavaScript来确定足够的参数提供了强大的计算机上的真棒经验,也能力较弱的计算机上的通行体验的能力。 当更多的电力可用,应该加以利用。 所以希望这可以解释为什么这些建议都是无效的问题的答案。
而不是一次测量用户的CPU性能,并确定有多少花哨的视觉效果,从使用,我会衡量由CPU密集型位每次执行时所用的时间量(使用new Date()
比较,为预期最小值和最大值(你必须确定),并动态调整“的效果水平”上下适当的。
如果用户在吃了大量的CPU时间的背景下启动的程序说。 如果使用这样的想法,你的页面会自动淡化视觉效果,以节省CPU周期。 当后台程序完成时,奇特的效果,会回来的。 我不知道如果你的用户会喜欢这样的效果(但我相信他们会喜欢,当CPU过载他们的浏览器响应停留的事实)。
我觉得这是一个很大的问题,因为它使用户的体验第一位的。
一些想法浮现在脑海中:
微软发表了许多试验表明IE 9的性能和10的许多测试集中在图形性能,如这一个 ,这似乎用这个JavaScript文件来衡量绩效。 可能有一些代码/概念就可以使用。
媒体密集的页面可能需要几秒钟反正加载,所以你有一点点喘息的空间,如果你开始你的测试则加载内容的其余部分。 例如,启动AJAX /图像请求,运行测试,然后处理响应。
为了测试图形性能,有关使用加载图形的性能测试是什么? 我不是通常的“加载”屏幕的粉丝,但如果该网站可能需要几秒钟的加载,而最终的结果是更好的UX,那么它是不是一个坏主意。
如果你画了一堆白色的形状就可以了(不知道任何引擎有足够的智慧来优化这个了,因为它是相同的颜色)的白色屏幕想法可能工作。
最终,我会犯错的更好的性能和更低的保真度,和一个不太准确的(但快)测试对比让用户等待时间过长的一面。
这是一个贫穷的解决方案,但它工作的时候:我用来产生约100×100的两个随机矩阵相乘他们(学校的男孩路)100次和时间了。 它承担了常规机不到1秒,有点超过2秒,最慢的机器,我能找到(1000H的EeePC)。 从那以后,我可以说,“好了,这个CPU可以做X浮动每秒浮点运算”,这是非常不准确的,可能是错的,但结果是非常稳定的,具有非常低的标准偏差,所以我想你可以把它叫做一个贫穷的措施Javascript的数学表现,这可以告诉你一些有关该计算机的CPU。
您还可以检查它是否启用了WebGL技术,并会留下了操作比Vista旧的系统的所有窗口。 由于那些不具备运行Vista或更高的硬件,这些都是比较慢的电脑。 您可以使用此检查:
function hasWebGL () {
if (typeof window.WebGLRenderingContext !== 'undefined') {
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') || canvas.getContext('webkit-3d') || canvas.getContext('moz-webgl');
if(gl) {
return(true);
} else {
return(false);
}
}
}