如何快速制作HTML渲染

Question

我正在开发一个在C＃/ ASP.NET上开发的Web应用程序。我们使用第三方控件在页面中显示网格，标签，树和其他复杂控件。问题是这些控件会渲染大量的HTML。由于这个原因，页面的大小已经大量增加，浏览器需要一段时间来加载页面。我想找到一些通用的技术来快速在浏览器（Internet Explorer，Firefox等）中进行HTML渲染。

请注意，所有页面都关闭了ViewState。

Answer 1

有一个Firefox扩展，YSlow（http://developer.yahoo.com/yslow/）可以分析任何网页并列出要进行的具体更改，以提高速度。它建议的一些更改与Web服务器有关，而不是HTML的内容，但无论如何它都非常有用。
YSlow网页的屏幕截图：

Answer 2

gzip HTML - 不会提高渲染速度，但会大幅缩小页面大小。

确保您没有使用基于表格的布局，并确保使用的任何javascript或css在头部缩小，gzip和链接，以便可以缓存它。

Answer 3

打开常规页面，在URL中输入，然后按enter键：

javascript:var tags = document.getElementsByTagName('*');alert('Page weight: ' + tags.length + ' tags.');

（您甚至可以将其另存为Bookmarklet）

如果您有超过500个标签，您可能希望尽可能清理一些“标签汤”。

Digg的主页重约1,000个标签！因此渲染速度非常慢（第一次）

MSN的主页重约700多个标签......因此渲染速度很慢

雅虎的主页重约600个标签......因此提速更快

谷歌的主页重约92个标签！...因此呈现闪电！

Answer 4

对于第三方控件，您所能做的只是提供支持以改善其性能。

但是在编码时你可以使用几种技术。 一个关键是要理解JavaScript DOM调用比html解析慢。 因此，如果将innerHTML =“....”设置为包含数千行，那么与通过循环中的document.createElement（）调用呈现它相比，它将非常快。

以下是MSDN的提示：

http://msdn.microsoft.com/en-us/library/ms533019.aspx

Answer 5

1. 使用第三方工具或至少使用IIS6内置压缩选项（Microsoft TechNet）压缩HTML。

2. 评估第三方控件以查看是否有必要。如果是，请根据自己的需要编写自己的和/或使用他们的控件，如果它们是“支持AJAX的”。最受欢迎的第三方控件确实具有AJAX功能，并允许在其余页面加载后填充数据，从而向用户显示一些进展。

3. 如果不需要，请关闭ViewState。使用第三方控件时，ViewState会变得很大。

更新：我在http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx

撰写了博客文章

Answer 6

压缩根本不会加速渲染，只会加速内容传递。

我建议做一些'profiling' - 用很多某种你的html对象（比如表行或一些常见的div-container）制作测试页 - 然后使用像YSlow这样的插件来测试多少渲染例如10K这样的元素所花费的时间。在分析后，您将看到实际渲染的botleneck ..

不过，问题实际上可能是内容传递，而不是渲染。 YSlow也将展示它的位置。您还可以使用一些可视化工具来验证网站加载速度，例如http://Site-Perf.com/

Answer 7

我会看一下页面上控件的Viewstate。如果可能的话，你应该禁用它，因为它被序列化（我认为是Base64编码）并填充在页面中。如果您更新每个回发后控件中的数据，您应该能够安全地禁用viewstate，并可能节省大量带宽。

Answer 8

我强烈建议您查看Yahoo CSS & JavaScript Compressor，这不仅会降低您的CSS和JavaScript文件大小，但也引起任何错误＆amp;可能在您的代码中重复。在任何Web开发人员的工具箱中都必须明确。

Answer 9

如果问题在于控件本身，可能会为新供应商购物。我确实意识到这将涉及对时间和金钱的再投资，但如果您无法通过前面提到的压缩方法获得所需的结果，我可能需要提交下一个主要修订版。

请记住，将EnableViewstate设置为false，您可以

Answer 10

要加快网格渲染速度，请使用网格分页 通过减少显示的网格线数量，网格分页将减少渲染。

我们通常从每页50行开始，并始终将网格数设置为系统参数，在部署后可以轻松减少或增加。

使用标准ASP.NET控件时，还发现使用CSS Friendly控件适配器时它们更快。 CSS Friendly control adapters