通过 CSS 自定义属性实现按顺序渲染文档

// 在 head 标签中的 link 是同步渲染。

// 自定义属性值为 initial 时使用fallback 值；即var 的第二个参数；

在head中常规加载基础样式，各个模块 display: none; 并设置代表组件自定义属性值为 none

利用 js 异步加载其它组件样式

然后在组件样式表中加入依赖代码（在组件样式表中改变自定义属性的值）：

////// main.css

:root { --main-blocker: initial;} // 覆盖初始样式中自定义属性的值

main { display: var(--main-blocker, block); } // --main-blocker值属性无效使用block

////// comment.css

:root { --comments-blocker: var(--main-blocker);} // 依赖main组件的样式渲染

.comments { display: var(--comments-blocker, block);}

/////// about.css 根据设备响应式调整依赖样式渲染

:root { --about-me-blocker: var(--comments-blocker);} // 常规依赖comment组件渲染

.about-me { display: var(--about-me-blocker, block);}

@media (min-width: 600px) { // 宽屏

:root { --about-me-blocker: initial; } // 立即渲染

}

//////// footer.css 在main 和 about 之后渲染

:root { --footer-blocker: var(--main-blocker, var(--about-me-blocker));} // main和about都渲染了 footer才会是initial；

footer { display: var(--footer-blocker, block);} // footer等于initial才会渲染成block