防止在頁面刷新時顯示無格式頁面 - 刷新

Question

如何防止我的頁面在加載頁面時顯示無格式視圖？ 我想這可能是因爲加載不同的JavaScript文件的順序。 是否有最佳做法，例如在我自己的代碼之前加載插件？ 應該在document.ready或windows.load之後調用每個jQuery/.js函數嗎？

link to page

感謝

Answer 1

YSlow會給你一些好的想法本頁上的出發點。從運行它的引用www.cewas.org：

1. D級on減少DOM元素的數量。頁面上有1489個DOM元素。複雜的頁面意味着需要下載更多的字節，這也意味着JavaScript中的DOM訪問速度較慢。減少頁面上DOM元素的數量以提高性能。

2. E級關於減少HTTP請求本頁有11個外部JavaScript腳本。嘗試將它們合併爲一個。該頁面有5個外部樣式表。嘗試將它們合併爲一個。減少頁面上組件的數量可減少呈現頁面所需的HTTP請求數量，從而加快頁面加載速度。減少組件數量的一些方法包括：合併文件，將多個腳本合併成一個腳本，將多個CSS文件合併到一個樣式表中，並使用CSS Sprites和圖像映射。

3. 使用gzip壓縮組件的F級。有15個純文本組件應該被壓縮發送...壓縮通過減少HTTP響應的大小來縮短響應時間。 Gzip是目前最流行和最有效的壓縮方法，通常可將響應大小減少約70％。目前大約90％的互聯網流量都通過聲稱支持gzip的瀏覽器。

4. 添加的F級過期標題。有61個靜態組件沒有遠期到期日期....網頁變得越來越複雜，其中包含更多腳本，樣式表，圖像和Flash。首次訪問頁面可能需要多個HTTP請求才能加載所有組件。通過使用Expires頭文件，這些組件變爲可緩存的，這可以避免在隨後的頁面瀏覽中不必要的HTTP請求。過期標題通常與圖像相關聯，但它們可以並且應該用於所有頁面組件，包括腳本，樣式表和Flash。

---

要添加自己的2美分：你可能想隱藏，直到整個頁面加載的所有元素。這似乎是您打算使用進度條的原因，但頁面中元素和腳本/樣式的絕對數量似乎阻止了它。您可以加載CSS/JS/HTML的最小子集來設置進度條，然後以一些異步的Javascript加載剩餘的元素，僅在全部加載完畢後才顯示整個頁面（一個Gmail）。

Answer 2

我假設你正在使用外部樣式表？ 如果您只是將所有樣式嵌入到頁面中，它將不會顯示爲無風格。 另外，將樣式表定義放在標題中的任何JavaScript代碼之前。

Answer 3

它通常被稱爲FOUC - 無版內容的Flash。上述答案中的選項具有突出的意義，但在任何情況下都可能無法消除。最初它是IE和IE的問題，但最近在Safari中發生了很多，並且可能與瀏覽器應用程序本身使用的基礎方法有關，因此可能無法解決。

有時插件如jQuery和typekit會加劇問題，因此密切關注並測試加載它們的不同場景。

Answer 4

您的網站的主要問題是，您正試圖加載一切一次在初始頁面加載。 Web開發人員工具欄的文檔大小報告總共顯示1.1mb的內容 - 這將近750kb的圖像和385kb的腳本。一次性加載此量的內容爲真的不建議使用，尤其是對於較慢的連接速度。

顯而易見的解決方案是隱藏所有內容，只在腳本準備就緒時顯示它，但這是一個非常糟糕的解決方案 - 您的訪問者將查看10秒或更長時間的空白頁。你應該做的是重組網站 - 重新考慮你的架構。網站並不是一次性下載 - 數據太多，也是用戶不喜歡Flash網站的原因之一，因爲Flash必須一次性下載所有資源，因此用戶必須長時間坐下等待時間。

您應該將頁面拆分爲傳統的常規HTML文檔，或者使用ajax按順序加載內容。讓腳本智能地重新排序內容的加載 - 首頁內容，然後當用戶選擇他要去的地方時，他背後的站點加載這些頁面的資源。圖像是這裏最大的問題 - 你有.7mb，並且加載所有這些都會阻止網站的加載，包括腳本在內的很長一段時間。

這些都不是一件容易的事，但這是糾正問題的最好方法。

你的問題的一些更直接的解決方案包括@matt b說的大部分內容 - 啓用gzip壓縮，將所有腳本和樣式表合併到一個文件中，等等。您還應該考慮使用CSS sprites來減少HTTP請求的數量。有大量的jQuery插件是整合的主要候選者，並且您還要加載jQuery兩次 - 爲需要加載的內容添加近100kb的內容。