在设备上测试网站的内存问题?

Test for memory issues with website on a device?

我遇到了一个很难调试的问题。我在我网站的许多不同位置使用 Javascript 库(JQuery Flexslider 插件)。一切正常,除了一个特定的 phone 无法正常工作并减慢页面上的所有内容。

到目前为止,我只在这台设备上看到过这种情况。其他同型号设备无此问题。这个人有一个iOS,版本过时了几个,内存也不多,所以我认为是内存问题。

一个老办法是用 Javascript 移动页面上有问题的轮播元素,但我想找到并修复根本问题。

我该如何开始调试呢?我不确定如何测试设备上的内存问题。

如果您使用的是 Mac,那么您可以通过 Safari 插入并使用远程调试,在那里您可以访问工具,包括探查器(不确定 Safari 支持的状态在 Windows)。有很多资源可以展示如何远程调试设备,除非它是 真正 旧版本的 iOS 你应该没问题,你必须启用 develop 菜单通过设置,但如果你知道你的调试工具,那么它就一帆风顺了。

我同意这听起来不像内存问题,尽管 jQuery 在这方面往往很饿,我不知道有问题的插件,但插件的质量在 jQuery-land。旧的 phone 和旧版本的 jQuery 肯定从来没有一起玩过。

当你说一个 phone 时,你是指一种 phone + iOS 版本?问题不清楚,它几乎读起来就像你有 2 个相同的 phones/os,其中 1 个有效,1 个无效。

这可能不是内存问题,而是 cpu 问题。 jQuery 做动画的方式在旧设备上受处理器限制。最容易处理的因素包括:

  • 页面大小(html 长度和复杂度)
  • 动画步骤、长度和复杂性

您在这里有几个选择,但简单的答案是您对旧处理器的要求过高。假设您正在使用此插件 http://www.woothemes.com/flexslider/,您可以尝试禁用或简化一些过渡效果。 animationanimationSpeed 将是我建议的第一个。

如果您不想改变大多数用户的体验,您可以考虑在回调中绑定开始和结束函数 api 并检查执行第一次转换所花费的时间,然后重新初始化一个该设备的更简单版本的幻灯片。

困难在于没有真正正确的答案。如果上述选项之一无法解决问题,您可能会查看 choosing/building 不同的幻灯片,降低每个人的体验,或者确定您对选择获得降级体验的人感到满意的最佳方式。

如果您使用 Chrome,您可以使用堆分析器

首先打开你的开发者工具,开始录制。

接下来开始使用您的页面并尝试重现您的问题,停止记录并查看统计信息。