如果侧边栏不可见，如何不请求侧边栏元素

问题描述

让我们想象一个博客。

例如：https://around.createx.studio/blog-grid-rs.html

在这里我们可以看到有一个内容区域和一个侧边栏。侧边栏在窄屏幕上不可见。换句话说，它存在，但不可见。

我们可以通过图像的例子清楚地揭示它。让我们专注于戴虚拟现实眼镜的女孩的形象。那是图片th01.jpg。

如果没有侧边栏，同样加载 th01.jpg。

我想摆脱它。侧边栏可能真的有很多图片或其他东西。它可能包含广告脚本等。如果侧边栏不可见，如果我们不为它的元素请求服务器，那么性能将得到巨大提升。

如果侧边栏不可见，你能告诉我如何避免对侧边栏元素的请求吗？即使我无法使用它们，我也想要这些方法的完整列表。即使我只用一个，我也只想知道所有这些。

解决方法

如果您可以在请求中收到侧边栏数据：

const wrapper = document.querySelector('.wrapper');
fetch('https://jsonplaceholder.typicode.com/albums/1/photos')
  .then(response => response.json())
  .then(result => result.forEach((el) => {
    const img = new Image();
    img.src = el.thumbnailUrl;
    img.onload = function() {
        wrapper.append(img);
    };
  }))

html web-performance