CSS HTML 中的预加载错误

Question

我有问题，当我想为 CSS 做预加载时：

<link rel="preload" href="{{ asset('css/vendor.min.css') }}" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="{{ asset('css/iziToast.min.css') }}" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="{{ asset('css/styles.min.css') }}" as="style" onload="this.rel='stylesheet'">

加载页面时，我 HTML 有几秒钟没有样式。我如何进行预加载和样式设置？ HTML 页面很大。

Answer 1

您正在经历的事情叫做FOUC。处理它的典型方法是使用 rel="stylesheet"，这使您的页面将它们加载为 render-blocking（DOM 构建和 javascript 执行延迟，直到加载所有渲染阻塞资源并构建 CSSOM）。

确实如此，Google Pagespeed 建议人们异步加载样式，因为这意味着页面渲染速度更快，javascript 执行启动速度更快。

如果您想满足两个条件，正确的方法是提供一个替代的最小 CSS 内联布局（大小、定位和纯色背景颜色）规则（在 <head> 内的 <style> 标签中），

隐藏普通元素
绘制一些简单的形状而不是内容。

在你的异步加载中CSS你需要添加规则来隐藏示意图元素并显示普通元素。
如果操作得当，示意图和实际内容之间的变化看起来很自然，就像聚焦效果。

调整示意图元素的大小时，请记住它们需要在所有屏幕宽度上进行测试。

如果您决定使用此技术，最好在网站达到最终形式后使用，包括所有内容（没有 lorem ipsum，没有虚拟图像）。如果您事先这样做，很可能每次您决定更改内容或布局时都需要调整它，因为示意图与实际内容不匹配。

这是我模拟加载过程的一个简单示例。我没有应用稍后加载的样式表中较慢的样式，而是在确定的时间量 (1s) 后应用了一些 class，因此您可以看到用内容替换原理图的效果。

请注意，此 概念验证 中的代码仅用于演示效果，并非 copy/paste 解决方案。对于此任务，您需要根据网站的外观和行为方式专门为网站内容设计原理图元素的样式。

setTimeout(function() {
  let loaders = document.querySelectorAll('.loading');
  loaders.forEach(function(item) {
    item.classList.add('loaded');
  });
}, 1000)

* {
  box-sizing: border-box;
}

.loading {
  display: block;
  position: relative;
}

.content,
.dummy-content {
  transition: opacity .3s ease-in-out;
}

.content {
  opacity: 0;
}

.loaded .content {
  opacity: 1;
}

.dummy-content {
  position: absolute;
  width: 100%;
  top: -20px;
  left: 0;
  opacity: 1;
  pointer-events: none;
}

.loaded .dummy-content {
  opacity: 0;
}

.dummy-content>* {
  background-color: #eee;
  content: '';
}

.dummy-content h2 {
  height: 27px;
}

.dummy-content p {
  height: 114px;
  background: repeating-linear-gradient(180deg,   #fff,   #fff 6px,   #eee 6px,   #eee 18px)
}

<div class="loading">
  <div class="dummy-content">
    <h2></h2>
    <p></p>
    <p></p>
  </div>
  <div class="content">
    <h2>Home</h2>
    <p>Lorem ipsum dolor amet sartorial tilde typewriter chillwave, hell of tousled vegan lyft narwhal ramps craft beer cornhole unicorn. Crucifix pinterest tilde, bespoke jianbing iceland letterpress hoodie kinfolk you probably haven't heard of them cold-pressed. Disrupt occupy fanny pack lyft, lo-fi mustache butcher seitan deep v PBR&B jean shorts offal XOXO. Intelligentsia art party helvetica actually.</p>
    <p>Succulents kale chips crucifix 3 wolf moon. Blog umami green juice VHS, swag everyday carry post-ironic portland scenester heirloom chillwave art party meh pour-over cold-pressed. Forage chia kale chips lo-fi asymmetrical bicycle rights kombucha vape williamsburg tilde waistcoat pug franzen. Air plant shabby chic blue bottle viral, +1 microdosing next level palo santo vape hexagon ethical bespoke sartorial heirloom. Iceland glossier drinking vinegar seitan chillwave letterpress schlitz you probably haven't heard of them mlkshk adaptogen. 90's tattooed whatever, typewriter swag fam green juice brooklyn pug YOLO messenger bag. Mixtape roof party organic intelligentsia dreamcatcher health goth succulents drinking vinegar schlitz woke artisan hexagon everyday carry asymmetrical keytar.</p>
  </div>
</div>

CSS HTML 中的预加载错误

CSS preload bug in HTML

html

css

preload