内容在离线网络应用加载时消失了几分之一秒 [英] Content disappears for fraction of a second on offline web app load

问题描述

我在iOS 4.3到5.0上观察过这个。当您创建一个简单的离线Web应用程序时，意味着一个HTML文件+少量资产（如CSS和JS（均存在于缓存清单中）），它可以脱机工作（我在飞行模式下测试） - 但是，当您将这样的应用程序添加到主屏幕并以全屏模式打开时，它首先显示初始内容，然后一切消失（页面变为白色）半秒或更长时间，然后内容重新出现再次。

I've observed this on iOS 4.3 to 5.0. When you create a even a simple offline web app, meaning one HTML file + few assets such as CSS and JS (all present in the cache manifest), it works offline (I tested in Airplane Mode) – BUT, when you add such an app to your home screen and open it in fullscreen mode, it first displays initial content, then everything disappears (page becomes white) for half a second or more, then content reappears again.

您可以通过添加知名的 Glyphboard 来看到这一点和有用的离线网络应用程序，到您的iOS主屏幕并启动它几次。每次加载时都会看到白色闪光效果。

You can see this by adding Glyphboard, a well-known and useful offline web app, to your iOS home screen and launching it a few times. You should see the white flash effect every time you load it.

这是一个很大的问题，因为它消除了应用程序的非原生性，给人的印象是应用程序未针对性能和错误进行优化。

This is a big problem because it gives away the non-nativeness of an app and gives the impression that the app is non-optimized for performance and buggy.

我已尝试查找有关此内容的报告，但我发现的只是关于iOS 4.3 JavaScript呈现引擎惨败的谣言和误解，根本不需要与这个问题有关。但是在iOS版本3中，我记得没有看到过白色闪光灯。

I've tried finding reports about this but all I can find is rumors and misconceptions about the iOS 4.3 JavaScript rendering engine fiasco, which doesn't need at all be related to this issue. But in iOS version 3 I distincly remember not ever seeing the white flash.

推荐答案

渲染时清除屏幕和其他工件是一个由于HTML的渐进性，HTML呈现的常见问题。这个概念是浏览器应尽可能早地绘制，并在样式/脚本/内容可用时呈现它们。标记可能存在一个问题，即所有渲染都会延迟，直到某些内容或脚本可用。如果出现这种情况，可能会发生这种情况：

Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available. This could happen if:

• 根据图像尺寸，您有动态高度，但您没有
  设置图像尺寸标记或CSS。


• 您的布局基于表，并且您没有在CSS中使用'table-layout：fixed`。


• 您的HTML使用带有document.write（）的内联脚本。


• 您可以使用某种onLoad（）函数来显示/修改内容。


• 您链接到外部样式表。


• 您正在使用不可缓存的外部内容，或者您​​已禁用缓存。


• 您使用的是返回404但无法离线使用的外部内容。

• You have dynamic heights based on image dimensions but you haven't set the image dimensions in the markup or CSS.
• Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
• Your HTML uses inline scripts with document.write().
• You have some kind of onLoad() function that reveals/modifies content.
• You link to an external stylesheet.
• You're using uncacheable external content or you've disabled caching.
• You're using external content that's returning 404 or isn't available offline.

您的HTML / CSS是否在测试之间发生了变化IOS版本？

Has your HTML/CSS changed between testing IOS versions?

这篇关于内容在离线网络应用加载时消失了几分之一秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！