如何诊断我网站上的性能问题

Question

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

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

要弄清楚这些是否有帮助，我想首先弄清楚究竟是什么导致了口吃，但我不知道该怎么做。我需要一种方法来确定放缓的哪一部分是由于什么问题。例如，加载图像/视频的影响是什么，播放视频的影响是什么，为元素设置动画等等。这样做的最佳方法是什么？

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

Answer 1

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