内容在离线网络应用加载时消失了几分之一秒

时间:2011-09-23 22:54:12

标签: ios html5 offline web

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

您可以通过将Glyphboard(一个众所周知且有用的离线网络应用)添加到您的iOS主屏幕并启动它几次来看到这一点。每次加载时都会看到白色闪光效果。

这是一个很大的问题,因为它会泄露应用程序的非原生性,并给人一种应用程序未针对性能和错误进行优化的印象。

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

3 个答案:

答案 0 :(得分:5)

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

  • 您有基于图像尺寸的动态高度,但您没有 在标记或CSS中设置图像尺寸。
  • 您的布局基于表格,并且您没有在CSS中使用“table-layout:fixed”。
  • 您的HTML使用带有document.write()的内联脚本。
  • 您有某种onLoad()函数可以显示/修改内容。
  • 您链接到外部样式表。
  • 您正在使用不可缓存的外部内容,或者您​​已禁用缓存。
  • 您使用的是返回404或无法离线使用的外部内容。

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

答案 1 :(得分:2)

我发现这是由于使用:

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

使用最小页面,如果我使用视口元标记,我会在apple-touch-startup-image和页面内容之间出现白色闪烁。如果我拿出标签,没有闪光灯。

可以通过以编程方式设置标记来解决此问题。

答案 2 :(得分:1)

我认为这里发生的事情是iOS在页面添加到主菜单时会截取屏幕截图。然后在应用程序加载期间显示此屏幕截图(WebKit加载)。 WebKit开始渲染页面,页面本身的构造方式使页面内容不会立即可用,导致白色闪存,当页面内容尚未出现时,它是一个呈现的页面,

您可以通过构建JS / CSS来避免问题达到一定程度,以便快速加载初始HTML视图,然后在后台懒惰地加载/构建其余资源。您也可以设置自定义加载屏幕,而不是iOS在页面中使用的默认屏幕截图。

也许你可以自己截取你的应用程序的截图,然后有这样的东西:

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

...并确保图像可用并来自清单。

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