以正确的方式加速页面转换
Posted
技术标签:
【中文标题】以正确的方式加速页面转换【英文标题】：Speeding up page transitions the right way 【发布时间】：2012-10-03 22:19:08 【问题描述】：我想要一些提示。
我正在尝试 300ms 延迟
phonegap + JQM + html5BoilerPlate + ios6.
尽管我安装并调用了 new FastClick()，但我仍然会遇到同样的延迟！
有没有办法测试 FastClick 的实际性能是否最佳？
我正在关注和误导另一个正常的〜300ms延迟吗？
<a> click 与其页面加载事件完成之间的预期时间转换是多少？
注意：html文件包含所有页面。
<body ... onload='init()' ...>
function init() new FastClick(document.body);
...
$.mobile.bind('vclick', ...
$.mobile.changePage('#...', transition: "none");
稍后在讨论中添加：
【问题讨论】：
预期转换时间：~300 毫秒是浏览器在触发事件之前等待的默认时间，正如您所知，这是因为它等待双击/单击。检查一次：forum.jquery.com/topic/google-s-fastbutton 他们基本上是在玩触摸事件，但我们需要一个带有 onClick 的非触摸设备的后备。据我所知，console.log() 的时间（以毫秒为单位）是衡量这种逻辑性能的唯一近乎完美的方法。希望它有所帮助。 @Futur，您预期的 300MS 是否对应于（a ms; 代表上图中变量 a 中的毫秒数）？但是我无法在 ios 上使用 console.log() 并在 xcode 上看到它们。同时我使用 div 直接查看设备的日志。 ...同时我用一个div来查看直接保存在设备上的日志。 如上所述，300 毫秒（毫秒）触发点击事件，我喜欢你的设备日志想法，我想知道你是如何直接获取设备日志的。如果可以发布或提供链接会很酷:) 日志功能将很快在 github 存储库中提供，因为它对我们的开发人员来说是通用的，它没有什么花哨的，但它确实可以完成工作。 【参考方案1】：如果你想加快速度，请尝试删除过渡
$(document).bind("mobileinit", function()
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
您还可以创建自定义过渡 http://jquerymobile.com/demos/1.0.1/docs/pages/page-transitions.html
您可以在此处更改 .in、.out 规则以设置自定义时间
.in, .out
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 200ms;
希望这会有所帮助。
【讨论】：
您好 Aravind，我已经使用了设置为 none 的转换，不过，您的技术更通用，谢谢。我不知道输入和输出 css 设置。我会调查的。以上是关于以正确的方式加速页面转换的主要内容，如果未能解决你的问题，请参考以下文章