什么是响应式网站（响应式网站）

响应式网页设计网站的挑战在于，很容易意外地提供不必要的内容，例如过大的图像或未使用的 CSS 和 JavaScript。因为创建响应式设计网站的过程通常包括添加标记和功能以优化您的布局和内容以适应较小的屏幕，所以许多网站在没有设计人员和开发人员的情况下向移动设备提供相同的页面重量或额外的页面重量也就不足为奇了意识到它。许多响应式网站的创建者已经在他们的决策过程中超越：重排内容，选择隐藏或显示各种元素，做出关于层次结构的明智决策等等。我们需要在这个响应式网页设计工作流程中增加一个步骤：确保我们只提供页面重量和请求方面的必要内容，而不仅仅是信息架构。Guy Podjarny 发现大多数响应式设计的网站目前在大小屏幕上提供的页面重量大致相同。但它不一定是这样：响应式网页设计本质上并不会对性能产生不利影响，而且我们可以聪明地对待我们向用户提供的内容。通过有意识地设计响应式网站并仔细考虑需要用户下载哪些类型的资产，您可以构建出色的用户体验，无论屏幕大小如何都表现良好。故意加载内容因为我们经常通过添加诸如针对各种屏幕尺寸的更多媒体查询之类的东西来创建响应式站点，所以很容易忘记我们可能还会为我们的用户增加大量额外开销。当设计从桌面版本开始，然后被编辑为缩小屏幕以适应更小的屏幕时尤其如此：那些针对桌面视图优化的资产会发生什么情况？很多时候这些都保持原样；图像始终以相同的大小提供（只是通过 CSS 在视觉上按比例缩小），或者字体继续交付和实现，就像它们在桌面上一样。我们需要仔细考虑如何加载内容，并确保我们只提供用户绝对需要的字节。图片图像应以它们在页面上显示的大小提供，以消除用户不必要的开销。在图 5-1 中，我们可以看到打开 Chrome DevTools 的谷歌主页截图。显示 Google 徽标的大小小于徽标文件的实际高度和宽度。这意味着用户正在下载不必要的字节，因为他们的浏览器下载的图像对于它的显示方式来说太大了。当您在 Chrome DevTools 中检查图像时，您将能够看到图像在页面上显示时的高度和宽度以及图像的“自然”尺寸，这通常与显示尺寸不同（图 5-2)。在图 5-2 中，我们可以看到 Google 可能正在向用户发送视网膜大小的图像。由于 Retina 将两倍的像素填充到屏幕中，因此设计人员或开发人员可以发送两倍大的图像并将其缩小以在浏览器中显示。这种技术使图像在视网膜显示器上看起来很清晰。不幸的是，这也意味着不使用视网膜显示器的用户将下载不必要的图像文件字节。图 5-1。在此示例中，我们可以看到显示 Google 徽标的大小小于徽标文件的实际大小。图 5-2。Chrome DevTools 会告诉你图像的自然大小以及它在页面上的实际显示尺寸。检查您网站上的图像，看看是否有机会提供适当大小的文件。您有几种不同的方式来告诉浏览器要提供哪个图像：RESS 解决方案、CSS 媒体查询和新的图片规范。RESS 代表具有服务器端组件的响应式网页设计，是创建和提供正确尺寸图像的一种选择。您可以通过选择在服务器端为用户提供哪些资产来提高性能，而不是在客户端优化它们。您的服务器可以通过查看用户代理字符串来做出明智的决定，它可以从中猜测用户的屏幕尺寸、触摸等设备功能等。自适应图像之类的工具会检测用户的屏幕大小，并会根据您定义的断点自动创建、缓存和提供大小正确的图像（参见图 5-3）。在他的书中高性能响应式设计(O'Reilly)，Tom Barker 概述了许多 RESS 技术以及如何实现它们。图 5-3。在来自 [自适应图像站点](http://adaptiveimages.com/) 的此示例中，您可以看到使用自适应图像工具从单个图像生成不同的像素宽度和高度，以及不同的文件大小结果图像。然而，RESS 解决方案有许多缺点。RESS 不会响应客户端大小的变化（例如，如果用户将设备从纵向旋转到横向）。假设您正在使用 RESS 向用户的浏览器发送完美调整大小的图像。如果该用户旋转她的设备并且您的响应式布局发生变化，您的服务器将不知道发送新图像以适应新布局。这就是为什么媒体查询和新图片规范等技术往往是响应式图像的更好解决方案。已经进行了大量研究，以确定在响应式设计中使用 CSS 显示正确大小的图像的最佳方法，特别感谢Tim Kadlec和Cloud Four。但是，浏览器可能会做一些意想不到的事情，因为它们会使用 CSS 确定为您的页面下载哪些图像，这就是为什么测试您的网站的性能并确保您要求用户的浏览器仅下载必要的资源很重要的原因。例如，简单地设置一个元素不会阻止浏览器下载图像：display: none<div id="hide">
<img src="image.jpg" alt="Image" />
</div>
/* Seriously, don't do this.
Browsers will still download the image. */

@media (max-width: 600px) {
#hide {
display: none;
}
}
应用于带有;的元素也是如此。图像仍将被下载：display: nonebackground-image<div id="hide"></div>/* Again, don't do this.
Browsers will still download the image. */

#hide {
background: url(image.jpg);
}

@media (max-width: 600px) {
#hide {
display: none;
}
}
相反，如果您想在响应式设计中使用 CSS 隐藏图像，您可以尝试使用 隐藏元素的父元素background-image：<div id="parent">
<div></div>
</div>/* Hide the parent element;
Browsers will not download the image. */

#parent div {
background: url(image.jpg);
}

@media (max-width: 600px) {
#parent {
display: none;
}
}
或者，您可以应用不同的媒体查询来告诉浏览器background-image哪个屏幕尺寸适合下载。浏览器将在匹配媒体查询时下载图像：<div id="match"></div>@media (min-width: 601px) {
#match {
background: url(big.jpg);
}
}

@media (max-width: 600px) {
#match {
background: url(small.jpg);
}
}
请注意，如果媒体查询重叠，旧版浏览器将下载这两个图像。但是用 CSS 提供视网膜图像呢？我们可以通过使用媒体查询为视网膜版本提供服务，确保为大多数浏览器只下载视网膜版本：<div id="match"></div>#match {
background: url(regular.png);
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min–moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-device-pixel-ratio: 1.5) {
#match {
background: url(retina.png);
}
}
不幸的是，运行 Android 2.x 且设备像素比等于或高于 1.5 的设备会下载图像的两个版本（regular.png和Retina.png），但正如 Kadlec 在他的文章中指出的那样，您不太可能会下载遇到运行 Android 2.x 的视网膜设备。在现代浏览器中显示正确大小的图片的最佳选择是利用pictureHTML 中的元素。picture目前在 Chrome 38、Firefox 33 和 Opera 25 中得到支持，并且是新图片规范的一部分。这个新规范允许您告诉浏览器要下载哪个图像文件以及何时下载，并且它包括不支持该picture元素的浏览器的后备。picture这是一个使用媒体查询来确定要下载哪个图像文件的元素的简单示例。第一个source匹配的，从上到下，是为浏览器选择下载的资源：<picture>
<source media="(min-width: 800px)" srcset="big.png">
<source media="(min-width: 400px)" srcset="small.png">
<img src="small.png" alt="Description">
</picture>
看看这有多神奇。我们不仅能够匹配媒体属性来告诉浏览器要下载哪个图像文件，而且我们还有一个低分辨率图像将由不支持该picture元素的浏览器下载。Picturefill是一种 polyfill，它可以picture在当前不支持它的浏览器中支持该元素，因此您可以立即开始使用picture！一个好的经验法则是，在同一个picture元素中定义的所有图像都应该能够用相同的alt属性来描述。您也可以使用该picture元素在适用时提供视网膜图像！<picture>
<source media="(min-width: 800px)"
srcset="big.png 1x, big-hd.png 2x">
<source media="(min-width: 600px)"
srcset="medium.png 1x, medium-hd.png 2x">
<img src="small.png" srcset="small-hd.png 2x"
alt="Description">
</picture>
在这个例子中，srcset告诉浏览器在不同的像素密度下选择哪个图像。同样，我们通过精确告诉浏览器准确地检索和显示哪个单个图像文件来为我们的用户节省开销。picture元素的另一个超能力是type属性：<picture>
<source type="image/svg+xml" srcset="pic.svg">
<img src="pic.png" alt="Description">
</picture>
我们可以告诉用户的浏览器忽略图像源，除非它识别出type属性的内容。在此示例中，识别 SVG 的浏览器将下载 SVG 文件，其余浏览器将下载备用 PNG。同样，我们能够准确地告诉浏览器哪个单个图像文件是正确的下载和显示文件，从而使我们的用户免于不必要的页面重量开销。但是流体设计呢？或者，如果您只有少量不同的图像尺寸，并且希望用户的浏览器选择最合适的资源而不列出特定的视口尺寸或屏幕分辨率，该怎么办？sizes图片规范也可以通过使用属性来帮助解决这些问题。sizes遵循以下语法：sizes="[media query] [length],
[media query] [length],
etc…
[default length]"
属性中的每个媒体查询sizes都与图像在页面上显示的长度相关，相对于视口大小。因此，如果您的长度为33.3vw，则浏览器会理解图像将以视口宽度的 33% 显示。如果您的长度为100vw，则浏览器会理解图像将以 100% 的视口宽度显示。这个数学有助于浏览器选择最适合检索并显示给用户的图像。sizes很聪明，因为它会在确定要下载的正确图像之前查看每个媒体查询以查看哪个适用。在这个例子中，我们可以告诉浏览器，在更大的屏幕上，图像将显示在视口的 33%，但图像的默认宽度是视口的 100%：sizes="(min-width: 1000px) 33.3vw,
100vw"
浏览器在srcset图像列表中查看它们的尺寸。我们可以使用语法告诉浏览器列表中每个图像的宽度image.jpg 360w，其中image.jpg是图像文件的路径，并360w表示该图像是 360 像素宽：<img srcset="small.jpg 400w,
medium.jpg 800w,
big.jpg 1600w"
sizes="(min-width: 1000px) 33.3vw,
100vw"
src="small.jpg"
alt="Description">
使用 中的图像srcset列表和显示宽度列表sizes，浏览器可以根据媒体查询和视口大小选择最佳图像以获取并显示给用户。当您使用内容管理系统时，这也会派上用场；允许您的 CMS 为您的图像生成源代码和标记。这样，CMS 用户只需上传一个版本，而不必担心它在不同屏幕尺寸下的显示方式。请注意，如本例所示，您可以在不使用picture元素的情况下使用新图片规范！您可以协同使用这个新规范的所有部分，让您的用户浏览器在选择应该下载和显示哪个图像时拥有强大的能力。您将能够选择在不同的屏幕尺寸下提供不同的裁剪图像，以及针对高像素密度设备的视网膜优化图像，并且您可以让浏览器根据工作选择正确的图像媒体查询。所有这些都非常适合性能。字体字体文件可能会给您的网站增加大量开销，因为它们需要额外的请求并增加页面重量。正如“优化 Web 字体”中所讨论的，有几种方法可以优化字体文件，以确保它们尽可能高性能。您可以在响应式设计中考虑的另一项考虑是仅在较大的屏幕上加载您的自定义字体文件。这是我们在 Etsy 所做的事情，因为如果我们的用户在移动设备上，我们宁愿让他们免于下载额外的字体文件开销。为此，请在您的内容上设置正常的后备字体。然后使用媒体查询仅将您的网络字体应用于大断点处的内容：@font-face {
font-family: 'FontName';
src: url('fontname.woff') format('woff');
}

body {
font-family: Georgia, serif;
}

@media (min-width: 1000px) {
body {
font-family: 'FontName', Georgia, serif;
}
}
只有当用户的设备与媒体查询匹配时，才会下载并应用字体文件。所有浏览器（除了 Internet Explorer 8 和更低版本）都非常聪明，只有在适用时才下载字体文件。Internet Explorer 8 和更低版本将下载@font-face页面的 CSS 文件中引用的所有文件，即使它们没有在页面上使用。方法虽然您将在实际设计和开发过程中就如何创建网站的响应式网页设计做出许多决定，但在开始任何工作之前先考虑一下您的整体方法以及它将如何影响性能是很重要的。在项目文档中构建性能，花时间从移动优先的角度看待您的网站，并弄清楚您将如何衡量您的网站在媒体查询中的性能，这将帮助您创建一个快速、响应式设计的网站.项目文档如果可能，将性能纳入任何项目的项目文档中（不仅仅是响应式网页设计！）。对于响应式网站，您需要基准测试并继续测量相同的标准性能指标，例如总页面重量、总页面加载时间和使用速度指数的感知性能。但是您还希望能够为设备和媒体查询设置目标，而不仅仅是使用您的设计的平均整体页面。正如我们将在“使用性能预算接近新设计”中讨论的那样，在开发过程中，有一些方法可以在站点速度上做出妥协。通过设置性能预算，您将能够在平衡美观和性能时做出让步。对于任何响应式网页设计，您都会做出同样的让步；也许您希望在特定的媒体查询中提供大图像，这会使您超出预算，因此您将决定不提供额外的字体粗细来弥补时间。表 5-1 概述了响应式网页设计的示例性能预算。表 5-1。示例响应式网页设计预算措施目标笔记总页面加载时间2 秒对于所有断点总页重500 KBmin-width: 900px总页重300 KBmax-width: 640px速度指数1,000对于所有断点在您的项目文档中设置一些期望，以了解您希望如何避免不必要的页面重量或对任何设备的请求。此外，请明确说明您将针对每个媒体查询或屏幕尺寸以及您的目标来衡量这些内容，如表 5-1 所示。这些类型的预算可能会有点模糊。例如，如果您旋转设备并在预算之间切换会发生什么？必须有一个基线来表明绩效的重要性，以便为从事该项目的人员设定期望。请记住，这不仅会使您的移动用户受益，还会使您的桌面用户受益。移动优先设计任何网站的移动优先方法将在许多领域为您提供帮助。它会提示您：预先提出关键问题（“此页面的核心目的是什么？”）。为您的用户确定最重要的功能和内容。建立设计模式以及它们将如何随着屏幕尺寸的变化而变化。从可访问性的角度考虑您的网站（“对于连接速度较慢或功能较弱的设备的人来说，这将如何访问？”）。通过从移动优先的方法开始，您可以尝试避免许多设计师和开发人员在尝试为移动设备重塑桌面体验时陷入的方钉/圆孔心态。您可以通过添加功能、合并更强大的动画和样式以及利用更新设备的功能来逐步增强您的网站，同时跟踪添加时对性能的影响。移动体验不应该是简单的。这应该是一种刻意的体验；设计人员和开发人员应利用其网站将在其上呈现的每个平台的优势，并了解其局限性。移动不仅仅是桌面的附加组件，桌面也不仅仅是移动的附加组件。内容平等并不意味着每个平台的体验应该相同。我们应该在设计和开发时考虑到用户的需求。移动优先的方法迫使您尽早询问有关核心用户需求的这些重要问题，并将帮助您提高网站的性能。对用户有意图的体验将帮助您专注于向他们交付的资产类型。在小屏幕尺寸下对功能和内容层次结构做出艰难决定的方法将帮助您降低总页面重量和请求数量。一个以最重要的内容和资产开始的网站，而不是通过媒体查询来处理较小的屏幕尺寸，将极大地帮助您控制性能。对于您的响应式网站，请首先考虑您的最小屏幕尺寸。重新排序您的 CSS 以首先提供小屏幕样式，并使用渐进增强来随着屏幕尺寸变大添加内容和功能。交付大小正确的资产，确保没有滚动卡顿，并尽可能快地使页面的核心功能具有交互性。从那里，您可以决定如何在更大的屏幕上共享更大的资产，重排层次结构中的内容，并继续考虑整体用户体验的性能。衡量一切在第 6 章中，我们将介绍如何在迭代和测试设计时继续测量性能。您将在响应式设计的网站上使用所有这些策略，就像在任何其他网站上一样。但是，衡量响应式网页设计还有一些额外的考虑因素。首先，您需要确保在每个断点只加载适当的内容。不要加入其他72% 的网站，这些网站在不同的屏幕尺寸上提供相同尺寸的响应式设计网站。如果可以，请实施自动化测试，以测量您选择的每个断点的总页面重量。Tom Barker 在他的《高性能响应式设计》一书中包含了一个关于连续 Web 性能测试的优秀章节，其中概述了如何实现 Phantom JS 测试来测量每个断点的性能，包括 YSlow 分数和总页面重量。您也可以手动测试。使用 Chrome DevTools 模拟设备并使用资源面板查看正在为该设备下载的图像大小。这是一组示例媒体查询，我选择根据断点提供不同的图像：@media (min-width: 601px) {
section {
background: url(big.png);
}
}

@media (max-width: 600px) {
section {
background: url(small.png);
}
}
我想确保不仅为特定设备大小下载了正确的图像，而且没有下载两个图像。我使用禁用缓存的 Chrome DevTools 来模拟匹配较大媒体查询的 Google Nexus 10（图 5-4）和匹配较小媒体查询的 Google Nexus 4（图 5-5）。图 5-4。在此示例中，我模拟了 Google Nexus 10 以查看将下载哪个图像。在 Network 面板中，我们可以看到 big.png 被调用。每个模拟设备仅正确下载所需的图像。我们还可以看到传输的总页面大小：较大设备为 7.3 KB，较小设备为 2.9 KB。继续检查交付到项目计划中确定的每个断点的资源和总页面权重，以确保您实现目标。要测量每个断点处的总页面加载时间和速度指数，请查看 WebPagetest 的浏览器下拉列表（图 5-6）和连接速度（图 5-7）。Dulles, Virginia, WebPagetest 位置在浏览器下拉列表中包含许多移动浏览器。此测试位置包括您可以测试的物理设备，例如 iPhone 4 和 Nexus 5。图 5-5。将模拟器切换到 Google Nexus 4 并刷新页面后，我们可以看到调用的是 small.png 而不是 big.png。图 5-6。您可以在 WebPagetest 运行中从各种移动浏览器中进行选择。图 5-7。您可以从 WebPagetest 运行中的各种模拟连接速度中进行选择。Connections 下拉列表中列出的不同连接是使用流量整形创建的。这意味着 Chrome DevTools 将模拟用户在这种类型的连接上可能遇到的情况，但测试结果会更加一致，因为测试实际上是在 WiFi 上进行的。比较每个断点的结果，以确保您的总页面加载时间和速度指数达到或超过项目文档中列出的目标。