如何使用渐进增强技术逐步加载慢速页面？
Posted
技术标签:
【中文标题】如何使用渐进增强技术逐步加载慢速页面？【英文标题】：How can I use progressive enhancement techniques to progressively load a slow page? 【发布时间】：2011-10-29 05:32:50 【问题描述】：我在 ASP.NET MVC 中有一个门户页面，其中包含几个不同的部分（部分视图），其中一些在用户第一次访问它们时不可避免地会变慢，因为它们必须拉到 -来自外部互联网来源的日期数据。
其中一些数据几乎可以立即加载，但旧的“Web 1.0”设计只是进入“加载”页面，直到所有数据可用.我试图通过立即显示 本地 数据来改善用户体验，然后在几秒钟后使用几个 ajax 更新来显示远程数据。
当然，我想使用渐进增强来做到这一点，以防 javascript 中断、被阻止或由于任何原因不受支持。我的第一个想法是使用元刷新并使用 javascript 禁用它，但 apparently that's impossible。我也强烈反对 window.location 重定向的想法，因为 (a) 它是高度可感知的，不像服务器重定向，并且 (b) 它完全在 JS 的可能性范围内重定向到工作，但 ajax 仍然中断（想想 IE6、行为不端的移动设备等）
有没有什么方法可以构建一个分阶段加载的页面，但仍然可以使用纯 html？
【问题讨论】：
这可能是一个不好的建议，但是当我们在网站上展示广告时，我们会使用 iframe 并在其中呈现广告，因为 iframe 中的内容加载不会减慢当前页面的加载。我突然想到，您可能可以使用 iframe 而不是使用 AJAX 来更新某些页面。这当然取决于您的设计是否可以支持它，当然还有您的浏览器支持 iframe 的问题。 【参考方案1】：我过去通过两种方法解决了这个问题：一种是为慢速内容创建单独的页面，以便由于某种原因没有或没有获得 JS 的用户可以点击链接到获取内容。体验不同，但有效。
另一种方法是在延迟的区域中有一个“显示”链接。 JS 删除链接并插入内容。如果用户想要查看他们单击链接的内容，则会触发不会延迟内容的刷新。
【讨论】：
【参考方案2】：正如 Ali 在他的评论中指出的那样，使用 iframe 来处理加载缓慢的内容似乎是可行的方法。
如果您的 ajax 例程不仅仅是加载内容（例如，如果您正在以某种方式重新格式化数据），您可以更进一步并使用 javascript 删除加载时的 iframe，然后使用您的正常 ajax 例程根据需要加载内容。
所以禁用 javascript 的用户仍然可以看到内容，但您的本地内容加载速度很快，而启用 javascript 的用户将获得良好的 ajax 体验。
要使用 jquery 删除 iframe，您可以执行以下操作：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<head>
<body>
<div>Fast Loading Content...</div>
<iframe id="slowContent" src="http://example.com/slowLoadingContent.htm"></iframe>
<script type="text/javascript">
$('#slowContent').remove(); // removes both the iframe and any bound events
// execute your ajax routines to pull in the slowLoadingContent and modify as appropriate
</script>
</body>
</html>
【讨论】：
【参考方案3】：我想这取决于您要提取的数据的性质，但在这种情况下，“渐进式增强”可能会为页面提供没有外部内容的客户让 javascript 可用，然后尽可能使用 javascript 拉入和插入内容。就我个人而言，我会（稍微）关心“没有可用的 javascript”的情况，但不关心“javascript 中断”的情况，因为 javascript 中的错误处理可以处理“ajax 无法正常工作”的情况。
【讨论】：
“您的 javascript 中的错误处理可以解决“ajax 无法正常工作”的情况” - 究竟是怎么回事？无论如何，在没有 ever 内容的情况下提供它绝对是 not 一个合适的选择。 一个例子是 jquery ajax "error" 事件。我们在谈论什么样的外部内容？你能把它拉到服务器端并缓存它而不是为每个请求获取它吗？ 已经被缓存了；问题是初始负载。 ajax“错误”事件的前提是脚本实际上已经达到了那么远。各种疯狂的事情都可能发生，例如下载中断、用户点击停止按钮或浏览器缓存损坏/过期。这并不重要——渐进增强的目的是让网站工作在普通的旧HTML中，然后用JSenhance。你在这里建议的是不太优雅的退化。【参考方案4】：如果您绝对必须全有或全无地呈现页面，则可以有“在一分钟内重新加载此页面以查看其余内容”消息/链接。
否则“框架”（使用 ）或单独的页面是一个不错的计划。
【讨论】：
以上是关于如何使用渐进增强技术逐步加载慢速页面？的主要内容，如果未能解决你的问题，请参考以下文章