内容在离线网络应用程序加载时消失几秒钟

我在iOS 4.3至5.0上观察到此情况。当你创建一个简单的离线web应用程序时，意味着一个HTML文件+少量资产，比如CSS和JS（全部出现在缓存清单中），它离线工作（我在飞行模式下测试） - 但是，这样的应用程序到您的主屏幕并以全屏模式打开它，它首先显示初始内容，然后一切消失（页面变成白色）半秒钟或更长时间，然后内容再次出现。内容在离线网络应用程序加载时消失几秒钟

您可以在iOS主屏幕上添加Glyphboard（一款众所周知且实用的离线网络应用程序）并将其启动几次。每次加载时都会看到白色的闪光效果。

这是一个很大的问题，因为它放弃了应用程序的非本地性，并给人以应用程序未针对性能和bug进行优化的印象。

我试过找到关于这方面的报告，但是我能找到的所有关于iOS 4.3 JavaScript渲染引擎惨败的谣言和误解，根本不需要与这个问题有关。但是在iOS版本3中，我特别记得从未看到白色闪光灯。

来源

2011-09-23 mislav

清除屏幕和其他工件时，由于HTML的渐进性，呈现是HTML呈现的常见问题。其概念是浏览器应尽早绘制，并尽可能经常绘制样式/脚本/内容。标记有可能会延迟所有渲染，直到某些内容或脚本可用。

您有基于图像尺寸动态的高度，但你没有设置标记或CSS图像尺寸：如果可能发生这种情况。
您的布局基于表格，并且您未在CSS中使用'table-layout：fixed`。
您的HTML使用带有document.write（）的内联脚本。
你有某种onLoad（）函数可以显示/修改内容。
您可以链接到外部样式表。
您正在使用不可缓存的外部内容，或者您禁用了缓存。
您正在使用返回404或不可离线使用的外部内容。

您的HTML/CSS在测试IOS版本之间有变化吗？

来源

2011-10-13 05:19:36 SpliFF

不，HTML/CSS没有改变。不过，关于外部资产的好处。我会看看是否有助于将CSS内联。 – mislav

你解决了这个问题吗？你知道是什么原因造成的吗？ –

我觉得这里发生的事情是，当iOS添加到主菜单时，iOS会从页面获取屏幕截图。然后在应用程序加载（WebKit加载）期间显示此屏幕截图。 WebKit开始渲染页面，并且页面本身的构造方式使得页面内容不是即时可用的，导致当页面内容尚未存在时呈现页面的白色闪光，

您可以避免通过构建您的JS/CSS，使其快速加载最初的HTML视图，然后在后台延迟加载/构建其余资源，从而将问题提升到一定水平。您也可以设置自定义加载屏幕，而不是iOS使用的默认屏幕截图。

也许如果你可以把你自己的应用程序的截图，然后有这样的事情：

<body style="background: white url('my-initial-loading-screen.png')" />

...，并确保图像信息，并将来自清单。

或者甚至更好，有加载屏幕，不需要任何外部资源显示（只是纯HTML），所以你知道浏览器不需要加载任何东西。

来源

2011-09-24 10:10:16

你说得对，iOS开始截图，首先启动它，然后重新绘制页面。不过，为什么它需要清理整个页面呢？此外，Glyphboard（清楚地显示该问题）具有“apple-touch-startup-image”和背景颜色，并且所有这些仍然消失。这看起来好像你无法从页面做任何事情来防止这种情况发生。 – mislav

稍后重画页面可能与您的Javascript代码，HTML布局或内容有关 - 我确信您可以避免它。你看到的是浏览器触发重排https://code.google.com/speed/articles/reflow.html –

我发现这是通过使用造成的：

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">

以最小的页面，我得到了苹果触摸启动图像，如果我使用的页面内容之间的白色闪光视口元标记。如果我拿出标签，不要闪光。

可以通过编程设置标签来解决问题。

来源

2012-07-05 18:08:09

内容在离线网络应用程序加载时消失几秒钟

回答

相关问题