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"，这会使您的页面加载为渲染阻止（DOM构建和javascript执行被延迟，直到加载所有渲染阻止资源和CSSOM建成）。

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

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

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

在异步加载的CSS中，您需要添加规则来隐藏原理图视图元素并显示正常元素正确完成后，原理图视图和实际内容之间的变化看起来很自然，就像焦点效果一样。

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

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

这是一个简单的例子，我模仿了加载过程。我没有在稍后加载的样式表中应用样式，而是在确定的时间（1s）之后应用了一些类，因此您可以看到用内容替换原理图的效果。

请注意，此概念验证中的代码仅用于演示效果，而不是用作复制/粘贴解决方案。对于此任务，您需要根据网站的外观和行为，专门为您网站的内容设置原理图元素的样式。

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>

HTML中的CSS预加载错误

1 个答案: