我有问题，当我想为 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 页面很大。
您正在经历的称为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>| 归档时间： |
|
| 查看次数： |
1017 次 |
| 最近记录： |