标签: css-layer

带图层和链接的 CSS @import 的性能对比

假设 CSS 文件中没有内部嵌入,那么在以下服务器端渲染场景中使用 CSS 层和@import对比是否存在任何性能缺陷:<link>

\n

使用<link>

\n
<html>\n<head>\n  <link rel="stylesheet" href="reset.css">\n  <link rel="stylesheet" href="helpers.css">\n  <link rel="stylesheet" href="grid.css">\n  <link rel="stylesheet" href="theme.css">\n</head>\n<body>\n  <link rel="stylesheet" href="header.css">\n  <header><!-- Site header, logo, nav etc --></header>\n\n  <main>\n    <link rel="stylesheet" href="carousel.css">\n    <div class="carousel-module"><!-- Carousel module --></div>\n\n    <link rel="stylesheet" href="cards.css">\n    <div class="cards-module"><!-- Cards module --></div>\n  </main>\n\n  <link rel="stylesheet" href="footer.css">\n  <footer><!-- Site footer --></footer>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

@import与图层一起使用:

\n
<html>\n<head>\n  <style>\n    @layer default, theme;\n    @import url("reset.css") layer(default);\n    @import url("helpers.css") layer(default);\n    @import url("grid.css") layer(default);\n    @import …
Run Code Online (Sandbox Code Playgroud)

css performance css-import css-layer

5
推荐指数
0
解决办法
377
查看次数

标签 统计

css ×1

css-import ×1

css-layer ×1

performance ×1