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

Question

我正在創建我最近制作的Web應用程序的移動版本。 我正在嘗試優化應用程序以使其盡可能快。 應用程序中有一些元素對於移動版本不可見。

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

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

我正在尋找最有效的方法，因為我的目標是提高性能（即使只有很小的差別）。

Answer 1

正如您所說，應該針對性能進行優化。 要記住的一件事是使用適當大小的圖像。 為此，您可以對某些元素使用css背景圖像，並使用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;
}
}

對於其余元素，您可以只刪除remove（）如果html確實很笨重，或者隱藏起來，如果它的行數很少。

Answer 2

為了避免在移動設備上加載桌面圖像，有一個不錯的技巧，可以通過將數據屬性（而不是src）添加到圖像標簽中來延遲加載它們。

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

在JavaScript中，您可以在DOM中搜索所有帶有data-lazy-load-src的圖像，然后通過將data-lazy-load-src屬性添加到src屬性來根據其媒體類型加載它們。

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