通過隱藏或刪除元素來優化移動Web應用程序？

我正在創建最近製作的Web應用程序的移動版本。我試圖優化應用程序以儘可能快地完成它。應用程序中有一些元素不應在移動版本中可見。通過隱藏或刪除元素來優化移動Web應用程序？

我應該如何處理這些元素？

我是否使用JavaScript從DOM完全刪除元素？我是否使用CSS媒體查詢並將元素的可見性更改爲隱藏？我是否使用JavaScript並將元素的可見性更改爲隱藏？

我在尋找最有效的方法，因爲我的目標是提高性能（即使它只是一個非常小的差異）。

來源

2014-01-15 jskidd3

只隱藏或更改元素的可見性不會減少頁面重量。它可能會縮短頁面渲染時間，但在移動設備上將它們從DOM中移除（或者不添加它們）會更有價值。 –

正如你所說，它應該優化性能。要記住的一件事是使用正確大小的圖像。爲此，您可以對某些元素使用css background-image，並使用css媒體查詢來選擇正確大小的背景圖像。

如：

#banner{ 
background-image: big-image.jpg; 
} 

@media all and (max-width: 640px){ 
#banner{ 
background-image: small-image.jpg; 
} 
} 

@media all and (max-width: 420px){ 
#banner{ 
background-image: tiny-image.jpg; 
} 
}

你可以僅僅刪除元素（）如果真的笨重的HTML的休息或隱藏如果非常幾行。

來源

2014-01-15 12:12:39

爲了避免在移動設備上加載桌面圖像，通過向數據屬性添加數據屬性而不是src來延遲加載它們是一個很好的技巧。

<img data-lazy-load-event="immediately" data-lazy-load-for-media="desktop" data-lazy-load-src="image.jpg" />

在JavaScript中，你可以用數據延遲加載-SRC搜索您的DOM的所有圖像，然後加載它們根據自己的媒體類型，通過增加數據延遲加載-src屬性的SRC屬性。

對於無法避免加載的元素，請使用JavaScript將它們從DOM中刪除。

來源

2014-01-15 12:23:44 emjrose

通過隱藏或刪除元素來優化移動Web應用程序？

回答

相關問題