html - 关于响应式布局和不显示某些元素
问题描述
我目前正在为手机开发响应式布局,媒体查询为每种类型的屏幕尺寸加载当前 css。我正在display:none;
为一些我不想在移动设备或桌面上显示的元素做。
我的问题是关于性能的。我有许多元素/div 需要在移动屏幕上进行修改,我认为这些元素/div 不显示桌面元素并显示当前元素。
如果我使用这种方法,浏览器将处理所有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
解决方案
从技术上讲,是的,性能会受到影响,因为浏览器需要下载其请求响应中的所有 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);
推荐阅读
- sql - 选择最近 3 条记录
- r - 将变量函数应用于 data.table 中的列
- ruby-on-rails - 在 Rails 控制器中获取用户和令牌时遇到问题
- postgresql - PostgreSQL 范围查询索引
- c++ - 当使用比格式支持的精度更高的精度来显示数字时,会写出哪些数据?
- python - pandas.errors.ParserError:错误可能是由于使用多字符分隔符时忽略引号引起的
- path - 使用 Gremlin API cosmosDB 返回简单路径中顶点的特定属性
- java - Java - 如何比较番石榴范围?
- javascript - 从 response.write(string) 获取 'undefined' 是 JS
- apache-spark - Spark Structured Streaming Kafka Writer 是否支持将数据写入特定分区?