如何快速渲染 HTML答案

【问题标题】：How to make HTML rendering fast如何快速渲染 HTML
【发布时间】：2010-09-13 04:05:35
【问题描述】：

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

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

【问题讨论】：

您使用哪个第三方供应商进行控制？

标签： asp.net html

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用第 3 方工具或至少使用 IIS6 内置压缩选项 (Microsoft TechNet) 压缩 HTML。
评估第三方控件是否有必要。如果是，请根据自己的需要编写自己的控件和/或使用它们的控件（如果它们是“启用 AJAX”的）。大多数流行的第 3 方控件确实具有 AJAX 功能，并且允许在页面的其余部分加载后填充数据，从而向用户显示一些进度。
如果不需要，请关闭ViewState。使用第三方控件时，ViewState 会变得很大。

更新：我已经在 http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx 写了博客

【讨论】：

【解决方案3】：

我强烈建议您查看Yahoo CSS & JavaScript Compressor，它不仅会减少您的 CSS 和 JavaScript 文件大小，还会在您的代码中引发任何错误和可能的重复。任何 Web 开发人员的工具箱中都必须有。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

压缩根本不会加速渲染，它只会加速内容交付。

我会建议做一些“分析”——用很多你的 html 对象（比如表格行或一些常见的 div 容器）制作测试页面——然后使用像 YSlow 这样的插件来测试多少渲染例如 10K 这样的元素所花费的时间。分析后你会看到实际的渲染瓶颈..

顺便说一句，问题实际上可能出在内容交付上，而不是渲染上。 YSlow 也会显示它的位置。您还可以使用一些可视化工具来验证网站加载速度，例如http://Site-Perf.com/

【讨论】：

【解决方案6】：

如果问题出在控件本身，或许可以四处寻找新的供应商。我确实意识到这将涉及对时间和金钱的再投资，但如果您无法使用前面提到的压缩方法获得所需的结果，我可能需要提交下一次重大修订。

记住，尽可能将 EnableViewstate 设置为 false

【讨论】：

【解决方案7】：

打开您的普通页面，在 URL 中输入此内容，然后按 Enter：

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

（您甚至可以将其保存为书签）

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

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

MSN 的主页包含大约 700 多个标签...因此呈现速度很慢

Yahoo 的主页有大约 600 个标签...因此渲染速度更快

Google 的主页有大约 92 个标签！...因此呈现得像闪电一样！

【讨论】：

finance.google.com/finance 它渲染了大约 1143 个标签，而且速度非常快。脚本是一个很棒的技巧，但我只是想指出还有其他因素。

【解决方案8】：

对于第三方控件，您所能做的就是对那里的支持进行 bug 以提高其性能。

但在编码时，您可以使用多种技术。一个关键是要了解 JavaScript DOM 调用比 html 解析慢得多。因此，如果您将 innerHTML = " .... " 设置为数千行，与通过循环调用 document.createElement() 进行渲染相比，它会非常快。

以下是来自 MSDN 的提示：

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

【讨论】：

该链接提供了一些提高 DOM/javascript 性能的好技巧。谢谢。

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

Gzip 压缩已应用。是的，使用了表格布局。感谢您的回复。
Gzip 很棒不是吗 - 非常适合加快速度！
head标签中的javascript真的不能缓存吗？
我可能是想说“所以它不会阻塞渲染”。