Response.redirect 时屏幕闪烁答案

【问题标题】：Screen Flicker On Response.redirectResponse.redirect 时屏幕闪烁
【发布时间】：2011-01-06 21:09:18
【问题描述】：

我遇到了一个问题，即在呈现新页面时，重定向时屏幕会变白一毫秒。

这会导致屏幕闪烁，让我很恼火。

我在网上搜索了一下，发现这个 IE 解决方案适用于 IE，但它不适用于 chrome 或 FireFox。

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />

另外，我确信使用这种方法会对更新面板和 Ajax 控件产生一些影响。

有没有办法设置服务器在给它客户端之前呈现整个页面，这样就没有适用于所有浏览器的白色毫秒。

欢迎任何想法。

【问题讨论】：

你会用javascript吗？也许。不过，它会减慢重定向速度。
我不认为这会起作用，因为可悲的是重定向是由按钮点击或选择 gridview 行等触发的。
你怎么能接受一个回答说你根本做不到，而不是我的 - 这给了你 3 种有效的方法？
您帖子的标题具有误导性，因为 Response.Redirect 不是您的问题的根源，而是正常的回发“......就像按钮点击......”。
问题是由单击按钮的代码中触发的 response.redirect 引起的，如有任何混淆，请见谅。

标签： asp.net response.redirect

【解决方案1】：

抱歉，聚会迟到了！我一直在努力解决我的应用程序上的这个问题。我设计的解决方案对我有用。非常像@Pike65 建议的...

为叠加层创建支架：

<div id="overlayContent" class="overlay">
    <div id="loaderContent" class="loader">
        Loading...
    </div>
</div>

此支架的 CSS：

.overlay {
    position: fixed;    
    border: 0; margin: 0; padding: 0;
    height: 100%; width: 100%;
    top: 0; left: 0;
    background-color: #272727;
    text-align: center; vertical-align: middle;
    z-index: 900; display: none;
    -moz-opacity: 0.1; opacity: 0.1;
    filter: alpha(opacity=10);
}

.overlay .loader {
    position: relative;
    width:40%;
    margin: 20% auto;
    padding: 10px;
    background-color:black;
    border: solid 1px gray;
    color: #cccccc;
    font-weight: bold;
}

Javascript (jQuery)：

$('a, input[type=button]').live("click", function (e) { 
    $("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8); 
});

就是这样。您可以根据自己的喜好修改“js”。每当单击任何链接或按钮时，它将导致出现半透明覆盖。根据浏览器的性质，它会等到它收到对新页面（标题）的响应。因此，在至少为新页面返回某些内容之前，它不会消失当前页面。一旦新页面开始出现，它会自动删除覆盖！

【讨论】：

【解决方案2】：

有没有办法设置服务器在给客户端之前渲染整个页面

简短的回答：不。这就是网络浏览器的工作原理。

即使使用最快的服务器（如您所描述的那样使用静态缓存页面），您也只是减少了平均“白色”时间，而不是一并消除。正如您在 IE 中看到的那样，默认页面转换是浏览器代码的一部分，而不是服务器端可以控制的东西。如果您编写自己的浏览器，则可以将其编写为洗黑、洗白或保持过渡直到整个页面加载完毕，就像 IE 一样。

正如其他人所说，缩小页面大小会减少“白色”时间。这个时间不仅是服务器生成页面的时间，也是页面、图像、javascript、css等的所有网络传输时间。这就是为什么你永远无法完全摆脱它——只能使用浏览器隐藏它技巧。

我不是在谈论“客户端”任何东西。那是行不通的。当浏览器决定粉刷画布时，甚至没有下载“客户端”代码，更不用说运行了。这是每个人都习惯的“互联网”的标准部分；它的设计初衷不是作为幻灯片查看器或图形完美的渲染器。不幸的是，如果您非常关心转换，那么 HTML 可能不是您工作的正确媒介。

【讨论】：

【解决方案3】：

您看到的是正常现象。以下是重定向期间发生的情况：

服务器向浏览器发送响应（重定向在客户端完成）。
浏览器加载响应，发现有重定向并停止页面加载
浏览器加载新页面

您使用的元标记仅适用于 IE，不会影响任何其他浏览器。唯一能同时消除闪烁的将是以下之一：

您说重定向发生在用户单击按钮或网格行或其他内容时。如果这会触发对 location.href 的更改而不是回发，那么用户将不会看到浏览器闪烁。
使用Server.Transfer（这将导致浏览器的地址栏显示旧页面而不是新页面（重定向将更改地址栏）。这仅在您将用户重定向到同一服务器上的页面。
发送HTTP 301 响应（永久移动）。 Tis 将消除闪烁，但请谨慎使用此方法。它还有其他影响（可能会影响搜索引擎排名）。

要执行 #3，请在服务器上使用此代码。

Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");

【讨论】：

【解决方案4】：

最好在客户端执行此操作。例如，您可以有一个 div 覆盖整个页面，并在 DOM 完全组合后淡出。在 jQuery 中，是这样的：

$(document).ready(function() { $('#overlay').fadeOut(); });

从用户体验的角度来看，虽然它可能有点令人不安。我实际上更喜欢一点点闪烁，所以我知道事情正在发生。

【讨论】：

不错的建议，但它会以纯色覆盖页面并且看起来比 fliker 更奇怪，我正在努力实现页面之间的无缝流动。变化的内容将表明事情正在发生变化。

【解决方案5】：

MSDN 示例建议设置

Response.BufferOutput

打电话之前

Response.Redirect("http://www.mydomain.com/default.aspx");

您可能还想尝试使用

Server.Transfer("default.aspx", true);

【讨论】：

阅读stackoverflow.com/questions/224569/… 会期望 Server.Transfer 应该解决浏览器的任何问题。
补充一下Filburt的评论，使用Server.Transfer时根本不会发生重定向，所以不可能因为重定向而发生闪烁。
是的，但是当使用Server.Transfer时，浏览器的地址栏会显示原始页面（而不是他们被转移到的页面）。也许这不是 OP 想要的。
@Gabriel：据我了解 OP，任何解决闪烁的解决方案都是可以接受的。
@Filburt：什么时候会这样？您总是必须考虑其他影响。永远不要用狭隘的眼光编码。

【解决方案6】：

默认情况下，服务器会在发送之前缓冲完整的响应。 “白色”将是 HTML 内容的结果，可能是它的大小。使用诸如 firebug 或 IE Developer Tools（我的首选是Fiddler）之类的工具来检查生成的内容。猜测你有一些非常大的 ViewState。

【讨论】：

视图状态似乎不影响这一点有些页面有一行有十行。
@Paul：好的，是什么让这种闪烁与我们在使用浏览器时都可以容忍的正常网络导航闪烁不同？