东莞网页制作：如何减少页面加载时的内容转移

2019.08.13 mf_web

118

你有没有开过一个网站，开始阅读，经过一段时间后，所有资产都已完成加载，你发现你丢失了你的滚动位置？我每天都经历这种情况，尤其是在我的移动设备上通过慢速连接进行冲浪时 - 这是一种令人沮丧和分心的经历。

每次浏览器必须重新计算文档中元素的位置和几何时，都会发生重排。当新的DOM元素添加到页面，图像加载或元素的维度发生变化时，会发生这种情况。在本文中，我们将分享技术，以尽量减少这种内容转移。

媒体

加载网站时，需要一些时间才能加载图像并且浏览器能够计算所需的空间。以节流设置为3G录制的以下GIF演示了该效果。

避免这种情况的一种方法是为所有图像设置固定的宽度和高度，但这对于响应式网站来说并不实用，因为我们希望图像和视频适应可用空间。

内在比率

使用固有比率（也称为padding-bottom黑客），我们可以定义媒体占用的大小。

内在比率的公式

获取值的公式padding-bottom是：

(height of the asset / width of the asset) * 100(%)

复制

如果我们的图像宽度为1600像素，高度为900像素，则值为：

 (900 / 1600) * 100(%) = 56.25%

复制

这是一个Sass mixin，我们可以用来定义图像，视频，iframe，对象和嵌入内容的宽高比。

@mixin aspect-ratio($width, $height) {
  position: relative;
  padding-bottom: ($height / $width) * 100%;
  img,
  video,
  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }}

复制

.ratio-sixteen-nine {
  @include aspect-ratio(1600, 900);}

复制

<figure class="ratio-sixteen-nine">
  <img src="waterfall.jpg" alt="Waterfall in Iceland"></figure>

复制

为了使体验更好，我们可以通过向包装器添加背景来设置占位符的样式。

figure {
  background: #ddd url(camera-icon.svg) no-repeat center center;}

复制

对于图像，我们可以使用图标向用户指示将显示图像。通过实现宽高比占位符，用户可以决定是等待图像还是继续阅读，而不会丢失当前的滚动位置。

小工具

除了媒体内容之外，您的网站可能正在使用通过JavaScript添加的小部件或第三方内容，如果处理不当，也会转移内容。

/* On small screens show 320x250 banner */@media all and (max-width: 500px) {
  .ad-container-s {
    width: 320px;
    height: 250px;
  }}/* On medium screens show 728x90 banner */@media all and (min-width: 800px) {
 .ad-container-m {
   width: 728px;
   height: 90px;
 }}

复制

在我们的示例中，我们有一个中矩形（300×250）和一个排行榜（728×90）。在小屏幕上，我们将显示矩形，而在更大的屏幕上，我们将显示排行榜。通过为占位符设置固定尺寸，广告的加载不会触发内容转移。

许多人永远不会看到广告，只会看到空占位符，因为他们会使用广告拦截器，或广告不会出于其他原因。因此，您应该为占位符设置样式，以指示通常有广告。如果您已使用广告拦截器检测脚本，则可以使用消息或产品宣传替换占位符。

如果广告的劣势较少，用户甚至可能会重新考虑在您的网站上使用广告拦截器 - 这会分散注意力。

动态内容

对于其他小部件，我们可能事先不知道它们的确切大小，但我们可以定义小部件所需的最小高度。

.widget {
  min-height: 400px;}

复制

通过使用min-height，我们将为大多数情况保留足够的空间，并在窗口小部件需要更多空间时避免大的跳跃。

找到合适的尺寸min-height需要一些时间，但用户会感谢他们的阅读体验没有突然中断。

网络字体

字体具有不同的x高度。因此，我们的后备字体和Web字体将占用不同的空间量。

目前，加载Web字体的一个最佳实践是使用Font Face Observer脚本来检测何时加载了字体，以便之后可以在CSS中应用它。

在此示例中，一旦Web字体可以使用，我们就将webfont-loaded该类应用于该html元素。

var font = new FontFaceObserver('Lato');font.load().then(function () {
  document.documentElement.className += " webfont-loaded";});

复制

在CSS中，我们在成功加载后应用Web字体。

p {font-family: sans-serif;}.webfont-loaded p {font-family: 'Lato', sans-serif;}

复制

当web字体最终完成加载时，我们会注意到快速跳转。为了最大限度地减少这种情况，我们可以修改后备字体的x高度，以尽可能地匹配Web字体，从而减少跳跃。

字体大小调整

该font-size-adjust属性允许您指定使用后备字体时的最佳宽高比。对于大多数字体，比率介于0.3和0.7之间。

要为您的网络字体找到正确的宽高比，我建议您将浏览器设置为并排显示两个段落，一个使用网络字体，另一个使用后备字体，然后使用浏览器的开发人员工具调整属性。

p {
  font-size-adjust: 0.5;}

复制

因为font-size-adjust目前仅支持 Firefox和Chrome（标志后面），我们可以使用letter-spacing和组合line-height来调整其他浏览器中后备字体的大小。

p {
  font-family: sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 0.95;}/* Older browsers */p {
  letter-spacing: 1px;
  line-height: 0.95;}/* If browser supports font-size-adjust, use this */@supports (font-size-adjust: none) {
  p {
    letter-spacing: 0;
    line-height: 1;
    font-size-adjust: 0.59;
  }}/* Once the web font has loaded, apply this */.webfont-loaded p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0;
  line-height: 1;}

复制

在这里，我们首先定义letter-spacing并line-height作为后备，我们正在使用@supports功能检测，然后font-size-adjust在支持时应用。

我们不会为所有字体提供完美的解决方案，但它会在字体更改时最大限度地减少分心。

布局

到目前为止，我们已经介绍了媒体，小部件和字体，但是当应用主布局的CSS时，内容也会发生变化。

FLEXBOX与网格

如Jake Archibald所示，Flexbox 可以导致水平移动。

使用flexbox时，内容控制布局的显示方式，而使用网格布局时，将根据网格定义显示布局。因此，使用网格作为主要布局更好。

如果您在具有良好Internet连接的快速计算机上进行开发，您可能不会看到内容转移，但是在慢速连接上进行冲浪的用户将会。

.wrapper {
  display: flex;}.sidebar {
  flex: 1 1 30%;}.content {
  flex: 1 1 70%;}/* Use grid instead of flexbox if supported */@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: 30% 70%;
  }
  .sidebar {
    grid-column: 1;
  }
  .content {
    grid-column: 2;
  }}

复制

目前对CSS网格布局的支持并不是很好，但是在Safari 10发布的下个月它将会增加，而基于Firefox和Blink的浏览器可能会默认启用它。为了面向未来，我们应该使用flexbox作为基础，并在支持的情况下增强网格布局的体验。

小小的细节

根据用户交互更改CSS属性通常会导致水平移位。使用其他CSS属性可以避免这种情况。

粗体文字的文字阴影

更改文本的字体粗细时，元素的大小将发生变化，并且会发生内容转换。

a:hover,
a:focus {
  font-weight: bold;}@supports (text-shadow: none) {
  a:hover,
  a:focus {
    font-weight: normal;
    text-shadow: 1px 0 0 currentColor;
  }}

复制

重绘text-shadow可能在计算上比更改更密集font-weight，但它是在更改为较重的文本时防止跳转效果的唯一方法。

我们再一次使用特征检测来text-shadow代替font-weight用户的交互。由于@supports支持的浏览器数量较少text-shadow，我们还可以考虑使用Modernizr检测该功能并在所有支持的浏览器中应用此改进。

小细节往往会带来很好的体验。您的用户将会欣赏避免的每一次内容转移。