通过隐藏或删除元素来优化移动Web应用程序？

Question

我正在创建我最近制作的移动版Web应用程序。我正在尝试优化应用程序以使其尽可能快。应用程序中有一些元素不应该对移动版本可见。

我应该如何处理这些元素？

我是否使用JavaScript从DOM中完全删除元素？我是否使用CSS媒体查询，只是将元素的可见性更改为隐藏？我是否使用JavaScript并将元素的可见性更改为隐藏？

我正在寻找最有效的方式，因为我的目标是提高性能（即使它只是一个非常小的差异）。

Answer 1

正如你所说，它应该针对性能进行优化。要记住的一件事是使用正确尺寸的图像。为此，您可以将css background-image用于某些元素，并使用css media query选择正确大小的背景图像。

例如：

#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或隐藏它的极少行。

Answer 2

为避免在移动设备上加载桌面图像，可以通过向图像标记而不是src添加数据属性来延迟加载它们。

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

在JavaScript中，您可以使用data-lazy-load-src在DOM中搜索所有图像，然后根据其媒体类型加载它们，方法是将data-lazy-load-src属性添加到其src属性中。

对于无法避免加载的元素，请使用JavaScript将其从DOM中删除。