关于响应式布局和不显示某些元素

Question

我目前正在为移动设备开发响应式布局，使用媒体查询为每种类型的屏幕尺寸加载当前 css。我正在为一些我不想在移动设备或桌面上显示的元素做display:none;。

我的问题是关于性能的。我有许多元素/div 需要在移动屏幕上进行修改，我认为这些元素/div 不会显示桌面元素并显示当前元素。

如果我使用这种方法，浏览器会处理 all display:none 元素吗？如果发生这种情况，我会得到性能降低吗？

如果是这样，在不影响性能的情况下如何做会更好？

假设移动优先。是否只有屏幕超过一定宽度才能加载部分内容？

我了解如何使用 CSS 媒体查询根据屏幕大小显示/隐藏内容。但是，如果您想避免不必要地加载将隐藏在较小屏幕上的内容，该怎么办。

非常感谢任何帮助。

提前致谢。

-- 编辑：

我正在尝试理解这种方法但没有成功：

我已将此脚本放在主 html 页面中：

<script>
    var url = screen.width > 1024 ? '/api-test.php' : '/api-test2.php';
    fetch(url).then(response => document.querySelector(".containerAnime2").innerHTML = response);
</script>

在“api-test.php”中，我放置了我想要加载的 div：

<!DOCTYPE html>
<html lang="pt-br">
    <div class="containerAnime2">
        <div class="animeinfoLeft">
            <img src="/images/background_animes/<?= $get_anime['url_nome']; ?>.jpg"/>
        </div>
        <div class="animeinfoRight">
            <p><?= $get_anime['nome']; ?> Todos os Episódios Online</p>
            <div class="extra">
                <span class="elementExtra"><img src="/images/star-icon.png" style="width:16px; height:16px;vertical-align:-1px;"/> <?= $get_anime['nota']; ?></span>
                <span class="elementExtra"><img src="/images/iconDate.png" style="width:16px; height:16px;vertical-align:-1px;"/> <?= $get_anime['ano']; ?></span>
                <span class="elementExtra"><?= $episodios_count['0']; ?> Episódio<?= (($episodios_count['0'] > 1) ? 's' : ''); ?></span>
            </div>
            <div class="tags">
                <?php foreach ($tags_array as $genero) {
                    echo '<a href="/letras/'. $genero .'/"><span class="elementTag">'. $genero .'</span></a>';
                } ?>
            </div>
            <div class="description">
                <p><?= $get_anime['nome']; ?> Todos os Episódios Online, Assistir <?= $get_anime['nome']; ?> Anime Completo, Assistir <?= $get_anime['nome']; ?> Online.<br><br><?= $description; ?></p>
            </div>
            <a href="#">
                <div class="errorButton">
                    RELATAR ERRO OU EPISÓDIO NOVO
                </div>
            </a>
        </div>
    </div>
</html>

但它还没有起作用..我做错了什么？

我在 chrome 上遇到了这个错误： (index):129 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

Answer 1

从技术上讲，是的，性能会受到影响，因为浏览器需要下载其请求响应中的所有 HTML，包括不显示的项目。任何用户注意到这一点的可能性都可以忽略不计，除非您谈论的是数以万计的 DOM 元素，这些元素使浏览器下载了兆字节大小的 HTML 文件。

如果您对此非常担心，那么一种解决方案是查看服务器上浏览器的用户代理，并根据用户代理字符串是否与类似于移动设备的内容匹配以适当的 HTML 进行响应。

另一种选择是根据屏幕尺寸通过 JavaScript 动态加载内容。您需要调用 API 来检索移动设备或桌面设备，然后服务器会以相应的 HTML 内容进行响应。

例如：

var url = screen.width > 1024 ? '/my/api/desktop' : '/my/api/mobile';

fetch(url).then(response => document.querySelector("#container").innerHTML = response);