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

【问题标题】：Optimize mobile web app by hiding or removing elements?通过隐藏或删除元素来优化移动 Web 应用程序？
【发布时间】：2014-01-15 12:05:33
【问题描述】：

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

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

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

我正在寻找最有效的方法，因为我的目标是提高性能（即使只是很小的差异）。

【问题讨论】：

仅仅隐藏或更改元素的可见性不会减少页面重量。它可能会缩短页面呈现时间，但在移动设备尺寸下将它们从 DOM 中移除（或者更确切地说不添加它们）会更有价值。

标签： javascript jquery html css dom

【解决方案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;
}
}

对于其余的元素，如果 html 真的很庞大，你可以删除() 或者如果它的行很少，则可以隐藏。

【讨论】：

【解决方案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 中删除。

【讨论】：