启动图像（启动画面）和应用主页之间的白色闪烁 [英] White flicker between launch image (splash screen) and app homepage
问题描述
我有一个非常简单的HTML5 iPhone Web应用程序，几乎可以完美运行;只有一个问题：在启动图像和应用程序主屏幕之间，会出现一个完全白色的屏幕（即闪烁）约一秒钟。
我正在下载应用程序通过使用添加到主屏幕按钮从网络发送到我的手机。 JavaScript文件（ functions.js ）和样式表都是非常小的文件。
有没有人有这个问题？有什么方法可以解决它吗？
index.html
<！doctype html>
< html manifest =demo.manifest>
< head>
< meta charset =UTF-8>
< title> HTML5应用程式< / title>
< link rel =stylesheettype =text / csshref =style.css/>
< link rel =apple-touch-icon-precomposedhref =Icon@2x.png/>
< link rel =apple-touch-startup-imagehref =Default@2x.png/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =viewportcontent =user-scalable = no，width = device-width/>
< / head>
< body>
< div id =wrapper> ...< / div>
< / body>
< script type =text / javascriptsrc =function.js>< / script>
< / html>
demo.manifest
CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css
.htaccess
AddType text / cache-manifest .manifest
编辑＃1 ：我已经做了一些更多的研究，并发表了：
清除屏幕和由于HTML的渐进性，渲染是HTML渲染的常见问题。其概念是浏览器应尽早绘制，并尽可能经常绘制样式/脚本/内容。这可能是标记有一个问题，所有渲染延迟，直到有些内容或脚本可用。这可能发生在以下情况：
- 基于图片尺寸的动态高度，但您没有
设置标记或CSS中的图片尺寸。
- 您的布局基于表格，而且您没有使用表格-layout：fixed` in CSS。
- 您的HTML使用内联脚本和document.write（）。
- 您可以使用某种onLoad（）函数来显示/修改内容。 / li>
- 您链接到外部样式表。
- 您正在使用不可缓存的外部内容，或者您禁用了缓存。
- 您正在使用的外部内容返回404或不可离线使用。
我已经在这个答案中遵循了所有的建议，但它并没有摆脱我的网络应用程序的白色闪烁。有没有什么黑客可以解决这个问题？
编辑＃2 ：我试过仅使用Javascript和样式表：
body {background-color：black}
但是仍然有白色闪烁。由于这似乎是所有这样的网络应用程序的问题，我的问题是：是否有任何黑客来解决这个问题？
CSS选择器在iOS上非常慢（贪婪的CSS重置脚本也具有糟糕的性能）。
头部启动的JavaScript自加载DOM准备脚本和CSS选择器一起运行，进一步增加了问题的复杂性。由于您头脑中同时存在CSS和JavaScript请求，因此处理身体的时间会很短但明显延迟，尤其是身体的背景颜色。
大多数HTML5框架正在转向延迟脚本加载。作为minmum，你希望首先加载样式表，然后担心javascript。尝试将顶部的 css 和脚本放在底部，然后内置默认背景颜色（不是图像 - iOS5渲染缩放背景图像和CSS渐变有明显的延迟）。 你也可以尝试异步属性在 iOS5 + 上，但我没有尝试过。
希望这有助于：）
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon@2x.png" />
<link rel="apple-touch-startup-image" href="Default@2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
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:
- 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.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
这篇关于启动图像（启动画面）和应用主页之间的白色闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
