我开发了我的第一个Web应用程序。它正在运行，正在做它应该做的事情，但有些页面存在性能问题。我已经在几个方面调整了应用程序，但我完全迷失了一个问题：
我有一个包含事件的日历，当用户切换选项时，该日历会切换为不可见或可见。整个事情是更新客户端，使用javascript和JQuery函数。更新有点太慢了。
我没有调试这个的经验，所以我根据之前的读数进行了猜测，嵌套表可能是罪魁祸首。 this article描述了我在解开这些问题上工作了几个小时。然后是让css再次工作然后测试的问题。不幸的是，表现比以前更糟糕。
我想知道是否有更好的方法来解决我的问题，因为从长远来看，试验和错误会变老。我可以以某种方式计算浏览器呈现<table>的时间吗？我还能如何调试由于客户端问题/ html结构导致的性能问题？我希望有一个跨浏览器的解决方案，但我主要担心的是IE8和谷歌Chrome。猜猜哪一个是慢的...
我试图制作一个关于我的特定问题的JSFiddle，但它最终变成了20,000行代码，但仍然无法正常工作。我想大小性能问题并不是最适合JSFiddles格式的。
答案 0 :(得分：1)
听起来像你有太多DOM个节点！
一个好的工具是yahoo's yslow和google's pagespeed insights
这些工具都会查找常见的性能错误，并为您提供有关如何解决这些错误的提示。他们还帮助SEO，因为在对页面进行排名时，pagespeed是一个相当大的指标。
如果我的假设是正确的，并且你有太多的DOM节点，那么2个工具会告诉你。
答案 1 :(得分：1)
您的问题可能与您的网页或部分内容的重绘/重绘有关。
Google Chrome为您提供了一些很好的工具，可以查看重绘的位置。您可以首先使用开发人员工具中的“时间轴”来查看您网站的效果。
要查看涂料，只需打开您的Google Chrome开发者工具，请按“esc”（该按钮上的一小部分现在应该显示）。然后在“渲染”中选中“显示绘制矩形，显示FPS计”，如果您喜欢“启用连续页面重新绘制”和“显示潜在的滚动瓶颈”。 这些可能会让您了解如何提高绩效。
另请参阅Chelsea Derrick撰写的关于“调试CSS＆amp; Render Performance”的视频https://www.youtube.com/watch?v=gqc88qWuiI4