【问题标题】:How to diagnose performance issues on my website如何诊断我网站上的性能问题
【发布时间】:2021-03-16 21:20:41
【问题描述】:

我创建了一个网站,显示来自 Instagram、Facebook 和 Twitter 的某些帖子。该网站以卡片形式显示这些帖子,并带有某些动画和过渡。它在桌面上运行良好,但目标是在树莓派上运行它,当从其中一个运行时,动画和视频会卡顿。我想减少或消除口吃,我正在考虑几种方法:

  • 网络工作者将一些动画计算卸载到单独的 CPU 内核
  • 服务器上的动态视频压缩取决于播放视频的设备
  • 不同的动画方法

要弄清楚这些是否有帮助,我想先弄清楚到底是什么导致了口吃,但我不知道该怎么做。我需要一种方法来确定减速的哪一部分是由于什么问题。比如,加载图像/视频、播放视频、动画元素等有什么影响。最好的方法是什么?

Here 是该网站的工作版本,如果这将有助于提供建议。请注意,我对 JS 或一般编程的经验并不丰富,而且我在创建它时才刚刚开始,所以它远非最佳,但现在我需要找出改进它的最佳方法。

【问题讨论】:

  • 例如使用 Chrome devTools。在“性能”选项卡中,您将看到从脚本评估时间到动画 fps 所需的一切。您还可以使用“灯塔”扩展来查找性能问题,但它不像“性能”选项卡那样具体。总之,性能选项卡将为您提供数据,但不会告诉您需要改进的地方。 Lighthouse 会为您提供要修复的问题列表,但不会考虑所有问题。
  • 这个问题太宽泛了。预计您自己进行一些研究并缩小您的问题范围。 Stack Overflow 不是一个您可以链接到一个网站并要求志愿者诊断您的性能问题的网站;我们中的许多人都专业地这样做。见Something in my website or project doesn't work. Can I just paste a link to it?。此外,要求“最佳方式”会导致垃圾邮件,以及转介到人们的专业服务。 Stack Overflow 不想要的东西。
  • 我不是在寻求解决方案,只是一个起点,我深入研究了 chrome 开发工具并找出了问题并开始了另一个更具体的问题 (stackoverflow.com/questions/66643608/…)。该链接不存在,因此有人可以为我诊断该站点,只是为了帮助选择最佳工具来分析它,因为我不确定是否有很多选择以及它们是否取决于您使用它们的内容和。如果不是评论,我会接受 chrome devtools 的回答。

标签: javascript reactjs google-chrome raspberry-pi


【解决方案1】:

这可能是性能问题,但也可能是其他问题。如果您使用的是 VNC Viewer 或其他形式的远程桌面,可能就是因为这个原因。但是,如果它只是连接到显示器,则很可能是 CPU 无法处理它。您可以尝试安装更轻量级的浏览器,因为 Chromium 确实会对 CPU 造成影响。转到 Chrome DevTools,然后转到性能选项卡。这应该基本上向您展示您需要知道的一切。我不确定您是否使用 CSS 过渡或其他东西,所以我无法真正帮助您。不过,您可以尝试将 NetSurf 或 Dillo 作为更轻量级的浏览器。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多