如何減少使用JavaScript小部件時的頁面重排？

Question

很多JavaScript庫都有用戶界面小部件。

通常它們是在被加載後創建的。用戶看到頁面重新流動，頁面的一部分轉向或改變外觀。

如何減少頁面加載時發生的迴流量，特別是如果我使用多個小部件？

下面是一些例子。這些都是很基本的，因此迴流並沒有那麼糟糕，但它的存在，尤其是具有清除緩存和互聯網連接速度較慢：

• YUI 3：主要段落菜單導航元素加載後轉移下來。
• BBC Glow：徽標加載爲垂直列表，然後更改爲Carousel控件。
• YUI 2：表格顯得平淡無奇，然後突然改變外觀。
• jQuery DataTables Plugin：整個表格在重新分頁和分頁之前顯示爲純文本。

Answer 1

使用大多數第三方腳本時的問題是，他們會在添加類或重新格式化HTML的JavaScript代碼中爲您執行所有髒/忙工作。

解決頁面重繪的唯一方法是執行其他人對隱藏和顯示的建議，或者您必須具有已啓用css類和正確標記HTML的控件的HTML。

當我編寫小部件時，我在其中構建了這個功能。我向開發人員說，如果他們不關心內容的閃光，或者他們可以編寫後端以便將spefic小部件需要HTML標記。

我不認爲你列出的腳本有能力讓代碼被標記出來，所以你可能被卡住或者隱藏內容。 [隱藏甚至可能搞砸了渲染時依賴於定位數據的腳本！]

Answer 2

用戶可以：

一個）構成一個部件，直到它被完全初始化的元件（例如施加「隱藏」值到它的「可見性」）的隱藏可視性。

b）在窗口的「加載」事件發生之前初始化窗口小部件，例如支持客戶端的「DOMContentLoaded」事件。這可以最大限度地減少閃爍。

Answer 3

將所有東西都包裹成隱形<div>。然後使其在頁面完成加載時顯示（使用onLoad事件）。