Question

我有一个非常大的（如功能丰富的）响应式网站。它包含150多个不同的UI页面，到目前为止，移动设备上的渲染和性能都很好（我使用的是iPhone5进行测试，偶尔使用其他设备）。

除了我正在编码的一页。这是临时dev网址：

http://www.jungledragon.org/apps/jd3/daylight

在Mobile Safari上，此页面性能极差： - 加载需要几秒钟，比所有其他页面慢得多 - 一旦加载，触摸滚动可能需要5-10秒才能完成任何操作 - 移动Safari整体上没有响应或接近它

我正在尝试解决问题的根本原因，但到目前为止还没有运气。我无法在使用小视口的任何桌面浏览器上重现这一点，甚至在桌面Safari上也是如此。在桌面上，我检查了几个Web调试器以检查任何长时间运行的进程，但没有找到。

关于页面的作用的一些解释：

它将尝试检测您当前的位置（使用警报，我发现这需要很少的时间）
根据您当前的位置和当前日期，它将计算当天的太阳时间。这也几乎是即时的
基于suntimes，它将动态生成一个表，然后最终在屏幕上显示

以下是我在移动Safari上详细了解的内容：

服务器响应正常，页面加载很快并很快显示网站标题
接下来，内容正文为空白并且保持空白几秒钟（我无法解释）
最后，suntimes表呈现。
这样就完成了页面，但到目前为止，页面和浏览器都非常缓慢，滚动需要永远，而Safari控件几乎没有响应。它看起来和感觉好像浏览器可能随时崩溃。

根据我迄今为止的研究，并且在网站的所有其他页面上都表现出色，我完全不知道是什么导致了这一点。

编辑：使用BrowserStack我做了一些测试：

iPhone 4S：没有问题
iPhone 5S：没有问题
Galaxy SII：没有问题
HTC One X：没有问题
iPhone 5：与上述相同的问题

所以我没有在任何桌面浏览器上看到这个问题，除了iPhone 5（iOS7）之外没有任何移动设备。

Edit2 ：根据收到的评论添加更多调查结果和解释：

这个问题似乎与动画无关。为此，我有一些证据。一个简单的证明点是页面没有进行任何视觉呈现，这与网站上没有性能问题的任何其他100多个页面有很大不同。

第二个证明点可以通过了解此特定页面中发生的事情来解释。会发生什么：

系统将检测当前用户的时间和地点。现在假设用户实际上允许位置共享。使用简单的警报，我已经证明了位置检测不是瓶颈。
根据用户的时间和地点，计算日光时段。这是通过使用Suncalc JS库（https://github.com/mourner/suncalc）完成的。
Suncalc库返回给定日期和位置的日光周期数组。我将该数组渲染为具有彩色背景行的表。这就是全部。

渲染具有12行和不同背景颜色的表格不太可能导致如此巨大的问题。因此，我的理论在于第2步是根本原因。 Suncalc库中有很多高级数学。我在想（没有证据）我的移动处理器在这些操作中是非常糟糕的，和/或由于某种原因的具体计算会导致内存使用量达到峰值（甚至是泄漏）。

作为额外的证明点：一旦页面加载到移动设备上，请使用日期旁边的向右箭头导航到“明天”。你会再次看到非常糟糕的表现。在该步骤中，没有网络活动，没有位置检测，什么都没有，只是计算和一些非常简单的渲染。这证实了我的理论，也许问题在于计算。

Answer 1

可悲的是，该平台上的本机Javascript分析器看起来不存在。您可能还想尝试Javascript Microtime function引用的in this answer。您需要在您认为存在瓶颈的地方通过调用来播种脚本。

Answer 2

刚刚在我的S3上通过Chrome远程调试器（https://developers.google.com/chrome-developer-tools/docs/remote-debugging）运行了它，看起来像Modernizr的cancelZoom函数（在jd3_0006.js中显示）被递归调用太多次或者也被调用广泛的选择器。我已将个人资料上传到dropbox：https://www.dropbox.com/s/kubxk44smm6qqkx/jungledragon_debug..zip

您可以在＆＃34;个人资料＆＃34;上将它们导入Chrome的调试器中。标签

Answer 3

我相信你的性能问题主要围绕在runMap（）函数中使用navigator.geolocation.getCurrentPosition（）

if (urlDate != null) {
    urlPos(latitude,longitude);
} else {
    if (navigator.geolocation) {
        $(".img-loading").show(100);
        navigator.geolocation.getCurrentPosition(successPos, errorPos{maximumAge:600000,timeout:10000});
    } else {
        errorPos('');
    }
}

考虑使用watchPosition()代替回调，这不会停止脚本线程的处理。您可以使用clearWatch（）

取消watchPostion（）更新

Answer 4

所以我更多地玩了这个，然后跑了＃34; Timeline＆＃34; Chrome上的功能（将此文件加载到您的Chrome时间轴工具：https://www.dropbox.com/s/2vpl6z1ntuk3aqj/TimelineRawData-20140328T105820.json），看起来这可能是您的主要问题。

您的脚本和图书馆（包括加载Google地图和jQuery）在解析HTML并运行Google Analytics后会得到评估，因为它们位于body的底部，而不是head。除非你有充分的理由这样做，否则我建议你将它们移到head。

滚动似乎存在单独的问题，但可能会通过此更改解决。

仅针对一个网页在移动Safari上出现严重的性能问题

4 个答案: