通过隐藏或删除元素来优化移动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中删除。