Html 如何在折叠内容上方使用内联CSS

我最近遇到了一些提高网站性能的任务，但由于问题中使用了上面的

和下面的
概念，我对所问的问题感到困惑。(ーー;)

折叠是否意味着页面分成两部分？（根据设计和css规则）因此解决方案是检测用于第二部分的
css
，并将其加载到页面底部？




任务

style.css中的下方折叠样式延迟了上方折叠内容的呈现。请提高上方折叠内容的加载速度

您的解决方案应该只为上面的折叠内容内联CSS，并确保加载main.CSS不会阻止页面的呈现


document.addEventListener（'DOMContentLoaded'，（）=>{
document.getElementById（'scroll-button'）。addEventListener（'click'，（）=>{
document.getElementsByClassName（'conversation-headline'）[0]
.scrollIntoView（正确）；
});
})；
html{
背景色：#FFF；
}
身体{
背景色：#FFF；
颜色：#848484；
字体系列：“Helvetica”，“Arial”，无衬线；
保证金：0；
最小高度：100vh；
}
h1{
字号：28px；
字号：100；
}
氢{
颜色：#FFF；
字号：38px；
字号：100；
}
h3{
颜色：#000；
字号：38px；
字号：100；
线高：125%；
利润率：0.40px；
}
.卡片{
保证金：0自动；
最大宽度：79%；
}
.卡片内容{
对齐项目：居中；
盒影：0 4px 5px 0 rgba（0,0,0,14），
0 1px 10px 0 rgba（0,0,0,12），
0.2px4px-1pxRGBA（0,0,0,2）；
显示器：flex；
证明内容：周围的空间；
填充：10px；
}
.对话诊断{
对齐项目：居中；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.对话标题{
颜色：#000；
字号：38px；
字号：100；
线高：125%；
利润率：0.40px；
}
.对话窗格{
显示器：flex；
弯曲方向：立柱；
高度：40vh；
证明内容：周围的空间；
填充：40px；
}
.翻了{
转换：scaleX（-1）；
}
.标题{
对齐项目：居中；
盒子阴影：0 2px4px-1pxRGBA（0,0,0,0.2），
0 4px 5px 0 rgba（0,0,0,0.14），
1px10px0rgba（0,0,0,0.12）；
显示器：flex；
高度：10vh；
填充：0 16px；
}
.丝带{
对齐项目：居中；
背景色：#848484；
显示器：flex；
弯曲方向：立柱；
高度：90vh；
证明内容：周围的空间；
}
.功能区按钮{
背景色：#FFF；
框阴影：
0.2px2p0 rgba（0,0,0,0.14），
0 3px 1px-2px rgba（0,0,0,0.2），
0 1px 5px 0 rgba（0,0,0,0.12）；
颜色：#848484；
光标：指针；
字体大小：25px；
填充：0.7em 0.57em；
}

亲切型
亲切型
和你的朋友好好谈谈。
真正地
了解更多
让社交媒体重新有意义。
想你！
太想你了！
为了更好地理解折叠上方的内容，请暂时将此应用于您的网站：

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

您现在在屏幕上看到的所有内容都在折叠上方。您看不到的所有内容都在折叠下方

从技术上讲，折叠是屏幕的底边，没有向下滚动

“折叠CSS上方的性能加载”是指为可见内容分离CSS规则，而无需向下滚动并将其放置在单独的较小文件中。此样式表应该是页面中唯一的呈现阻止CSS。

您的CSS的其余部分将被加载到
async
，因为它不会创建

这样，页面的加载和渲染速度将比加载所有CSS渲染块的速度更快

这种技术能够创建FOUC的唯一时间是当有人清空缓存并在向下滚动时硬重新加载页面，这是永远不会发生的。
上面的折叠意味着用户在浏览器窗口中可以在没有滚动的情况下在屏幕上看到的内容。下面的意思是，您必须滚动才能看到内容，因为用户无法进入，因此可能会延迟样式设置如果您的情况是，所有标题和ribbon类都位于折叠上方。