javascript - 如何调试客户端浏览器/HTML 结构性能问题？

Question

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

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

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

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

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

Answer 1

在我看来你有太多DOM节点!

开始使用的好工具是 yahoo's yslow和 google's pagespeed insights

这些工具都可以查找常见的性能错误，并为您提供修复这些错误的提示。他们还帮助 SEO因为在对页面进行排名时，pagespeed 是一个非常重要的指标。

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