Question

如果您在CSS中声明某些内容为display: none;，浏览器是否仍会下载数据？

我总觉得它确实如此。我的理解是，在下载网页时，浏览器会从服务器中提取所有内容，然后读取CSS，然后显示或不显示CSS指定的内容。因此，如果您在DIV中有大量图片，并且将DIV设置为display: none;，则图片仍然会被下载，而不会被渲染。

就是这样，那么如果一个“响应”网站有一个巨大的图像显示为宽屏显示器，如果有人在他们的手机上查看该页面，那么他们仍在下载那些巨大的图像，但只是不能看他们。对于支付数据传输费率的人来说，这是一种刻录，更不用说下载内容所需的额外时间，让用户满意。

我错了吗？响应式网站是否以某种方式使较低规格设备上的人员无法下载他们看不到的内容？如果不依靠浏览器检测和服务器上的代码来确定要发送的内容，CSS中是否有一种方法可以解决下载不需要的数据的问题？

Answer 1

首先，网站上的图片不应该很大。有一些不成文的规则，如果一个网页及其所有资源都大于500kb，那么它就是一个大页面，需要优化。可悲的是，主题森林中有许多臃肿的主题。

这里有一些让网页更小的技巧：

当我为网络准备图像时，我倾向于为定义页面的单个大图像寻找大约70-90kb的大小，或者如果图像位于页面的核心，则倾向于150kb（如屏幕一半的照片。）
使用自适应布局。 CSS媒体查询（最大宽度）与使用背景图片而不是<img>标签相结合，可以帮助您转发特定屏幕尺寸所需的图像。
长页面上的动态内容加载。这就像谷歌图像所做的那样，以及许多tumblr主题。基本上，您需要一个用于滚动和调整大小的脚本，并在window.onload事件上执行，它的作用是确定是否有更多要加载的内容。如果有 - 使用AJAX作为内容，或使用javascript创建它，从与页面一起传递的JSON。在创建内容时，将加载图像。不久如果您指望大多数用户不在页面上滚动太远，或者页面真的很大，那么AJAX方法可以更好地减少流量。在所有其他情况下，预加载的JSON更好。

然后是加载时间，它定义了主题的两种冲突方法。如您所知，浏览器会下载队列中的引用。引用不是以并行方式下载的，至少不是一次性下载，因此具有很多引用的页面将需要很长时间才能加载。这就是为什么通常的做法是将图像作为精灵或字体字形，并且引用组合CSS和Javascript的脚本而不是单独的CSS和JS文件变得流行。例如，请将其命名为：

<script type="text/javascript" src="/combine_js.php?jquery&custom-script&lightbox"></script>

而不是：

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/custom-script.js"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

这种方法的缺点是，所有页面都将包含所有脚本和CSS样式，是否需要它们，或者单独的页面将加载不同的脚本集，但它们不会从浏览器中提取高速缓存中。

因此，更好地加载时间和服务器负载将图像组合成精灵，将脚本和样式组合成2个单个请求。但是最好是节省流量以旧式方式执行，通过单独引用，只对那些您实际需要的文件。

Answer 2

通过使用Firebug在a web page that uses responsive design上运行某些测试，我确定浏览器不下载媒体的媒体屏幕尺寸超出您当前显示的尺寸。至少，不是在Ubuntu上的Firefox 29上。当我调整浏览器窗口大小并触发CSS中的新屏幕尺寸声明时，会下载相关图像。

因此，与之前我所理解的相反，这意味着最终用户可以节省数据，因为他们只获取CSS为其设备指定的数据。

在＆＃34;进步＆＃34;设计网站，在低规格设备上为人们节省了数据吗？

2 个答案: