如何调试客户端浏览器/HTML 结构的性能问题？答案

【问题标题】：how do I debug client side browser/HTML-structure performance issues?如何调试客户端浏览器/HTML 结构的性能问题？
【发布时间】：2014-08-26 11:52:02
【问题描述】：

我开发了我的第一个 Web 应用程序。它正在运行，并且正在做它应该做的事情，但有些页面存在性能问题。我已经在几个方面调整了应用程序，但我完全迷失了一个问题：

我有一个带有事件的日历，当用户切换选项时它会切换不可见或可见。整个事情是更新客户端，使用 javascript 和 JQuery 函数。更新有点慢。

我没有调试过这个的经验，所以我根据之前的阅读猜测，嵌套表可能是罪魁祸首。正如this article 所描述的那样，我花了几个小时来解开这些问题。然后是让 css 再次工作，然后进行测试的问题。不幸的是，性能比以前更差了。

我想知道是否有更好的方法来解决我的问题，因为从长远来看，反复试验会变老。我可以以某种方式计时<table> 的浏览器渲染吗？由于客户端问题/html 结构，我还能如何调试性能问题？我希望有一个跨浏览器的解决方案，但我主要关心的是 IE8 和 Google Chrome。猜猜哪个是慢的...

我试图为我的具体问题制作一个 JSFiddle，但它最终变成了 20.000 行代码，并且仍然无法正常工作。我猜尺寸性能问题并不是最适合 JSFiddles 格式的。

【问题讨论】：

【解决方案1】：

听起来你的DOM 节点太多了！

这些工具都可以查找常见的性能错误，并为您提供如何修复这些错误的提示。他们还对SEO 有所帮助，因为在对页面进行排名时，页面速度是一个相当大的指标。

如果我的假设是正确的，并且您的 DOM 节点太多，这 2 个工具会告诉您。

【讨论】：

这两个第一个答案都很有趣！我会花一些时间检查工具。我很快就会回来接受答案:) 谢谢
"页面有 1410 个 DOM 元素" 足以被 yslow 判断为 D 级
@KjetilNordin 首先尝试将其最小化，也许您有一些事件处理程序过于通用并且添加到太多 DOM 元素中
也许吧。我将首先思考如何最小化 DOM 元素的数量。我非常有信心我的一些 Javascript 函数正在变慢，因为要迭代的元素太多了。我会说你给了我继续我的性能调整所需的确切答案，现在少了一点“疯狂猜测”。谢谢。

【解决方案2】：

您的问题可能与页面或部分页面的重绘/重绘有关。

Google Chrome 为您提供了一些很好的工具来查看重绘发生的位置。您可以先使用开发者工具中的“时间线”来查看您的网站的表现。

要查看绘画，只需打开您的 Google Chrome 开发者工具，按“esc”（现在应该会显示按钮上的一个小区域）。然后在“渲染”中选中“显示绘制矩形，显示 FPS 仪表”，如果您喜欢“启用连续页面重绘”和“显示潜在的滚动瓶颈”。这些可能会让您对如何提高绩效有所了解。

还可以观看 Chelsea Derrick https://www.youtube.com/watch?v=gqc88qWuiI4关于“调试 CSS 和渲染性能”的视频

【讨论】：