內容在離線網絡應用程序加載時消失幾秒鐘

我在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

內容在離線網絡應用程序加載時消失幾秒鐘

回答

相關問題