我正在开发一款使用C#/ASP.NET技术的Web应用程序。我们使用第三方控件来显示网格、选项卡、树形结构和其他复杂控件。问题在于这些控件会渲染大量的HTML代码，导致页面体积变得非常大，浏览器加载速度缓慢。我想找到一些通用的技巧，使浏览器（如Internet Explorer、Firefox等）中的HTML渲染更快。
请注意，所有页面都已关闭ViewState。
请注意，所有页面都已关闭ViewState。
10个回答
15
有一个Firefox扩展程序，YSlow (http://developer.yahoo.com/yslow/)，可以分析任何网页并列出需要进行的具体更改以提高速度。它建议的一些更改与Web服务器有关，而不是HTML内容，但是它还是非常有帮助的。
来自YSlow网页的屏幕截图：
来自YSlow网页的屏幕截图：
- Aurelio Martin
7
对HTML进行gzip压缩 - 不会提高呈现速度，但会大大减小页面大小。
确保不使用基于表格的布局，并确保使用的任何JavaScript或CSS都经过了最小化处理、gzip压缩，并链接到头部以便可以被缓存。
- Rich Bradshaw
4
Gzip压缩已应用。是的，表格布局被使用了。感谢回复。 - Umer Azaz
Gzip 真是太棒了，不是吗？可以加速许多东西！ - Rich Bradshaw
放在 head 标签中的 JavaScript 确实无法被缓存吗？ - user605334
我可能想说“所以它不会阻塞渲染”。 - Rich Bradshaw
6
打开您的普通页面，在URL中输入以下内容，然后按回车键：
javascript:var tags = document.getElementsByTagName('*');alert('Page weight: ' + tags.length + ' tags.');
（您甚至可以将其保存为书签）
如果您的标签超过500个，您可能需要尽可能清理一些“标签混乱”的内容。
Digg的主页有大约1000个标签！因此渲染速度非常慢（第一次）
MSN的主页有700多个标签……因此渲染速度相当慢
Yahoo的主页有600个标签…… 因此渲染速度更快
Google的主页只有92个标签！……因此渲染速度像闪电一样快！
- scunliffe
1
4它渲染了大约1143个标签，并且速度非常快。该脚本是一个很好的技巧，但我只想指出还有其他因素。 - ojrac
3
对于第三方控件，你唯一能做的就是向他们提供支持，以改善其性能。
但是在编码时，你可以使用几种技术。其中一个关键是要了解JavaScript DOM调用比html解析要慢得多。因此，如果你使用innerHTML = "...."设置成千上万行，与通过document.createElement()循环呈现相比，它将非常快速。
以下是MSDN提供的提示： http://msdn.microsoft.com/en-us/library/ms533019.aspx
但是在编码时，你可以使用几种技术。其中一个关键是要了解JavaScript DOM调用比html解析要慢得多。因此，如果你使用innerHTML = "...."设置成千上万行，与通过document.createElement()循环呈现相比，它将非常快速。
以下是MSDN提供的提示： http://msdn.microsoft.com/en-us/library/ms533019.aspx
- Tahir Akhtar
1
提供的链接给出了一些有关如何提高DOM / JavaScript性能的好建议。谢谢。 - Umer Azaz
2
使用第三方工具压缩HTML或至少使用IIS6内置的压缩选项 (Microsoft TechNet)。
评估第三方控件是否必要。如果是必要的，根据自己的需求编写自己的控件和/或使用它们的控件，如果它们是“AJAX启用”的。大多数流行的第三方控件都具有AJAX功能，并允许在页面其余部分加载后填充数据，从而向用户显示一些进度。
如果不需要，关闭
ViewState。在使用第三方控件时，ViewState可能会变得非常庞大。
更新：我已经在http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx上撰写了相关博客。
- Jason N. Gaylord
1
压缩并不会加速渲染，它只会加速内容传递。
我建议进行一些“分析” - 制作一个包含大量某种类型的HTML对象（如表格行或某些常见的div容器）的测试页面 - 然后使用像YSlow这样的插件测试渲染例如10K此类元素需要多长时间。分析后，您将看到实际的渲染瓶颈..
顺便说一句，问题实际上可能是与内容传递有关，而不是渲染。 YSlow也会显示出问题所在。您还可以使用一些视觉工具来验证站点加载速度，例如http://Site-Perf.com/。
- zuborg
0
为了加速网格的渲染，请使用网格分页。
网格分页将通过减少显示的网格线条数来减少渲染量。
我们通常每页开始使用50行，并始终将网格行数设置为系统参数，可以在部署后轻松减少或增加。
当使用标准ASP.NET控件时，还发现使用CSS友好控件适配器时速度更快。 CSS友好控件适配器
网格分页将通过减少显示的网格线条数来减少渲染量。
我们通常每页开始使用50行，并始终将网格行数设置为系统参数，可以在部署后轻松减少或增加。
当使用标准ASP.NET控件时，还发现使用CSS友好控件适配器时速度更快。 CSS友好控件适配器
- Keb
0
我会查看页面上控件的Viewstate。如果可能的话，您应该禁用它，因为它会被序列化（我认为是Base64编码）并塞入页面中。如果您在每个post-back中更新控件中的数据，则应该能够安全地禁用viewstate，并且很可能节省大量带宽。
- ckramer
0
我强烈建议您查看Yahoo CSS和JavaScript压缩器，它不仅可以减小CSS和JavaScript文件的大小，还可以检测代码中的任何错误和可能的重复。这是任何网页开发者工具箱中必备的工具。
- Toby Mills
0
如果问题出在控件本身，那么可能需要寻找新的供应商。我知道这将涉及到时间和金钱的再投资，但是如果您无法通过之前提到的压缩方法获得所需的结果，那么这个问题可能需要被放置到下一个主要版本中。
还有，请记住，在您可以的情况下将EnableViewstate设置为false。
- Jon P
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接