假设 CSS 文件中没有内部嵌入,那么在以下服务器端渲染场景中使用 CSS 层和@import对比是否存在任何性能缺陷:<link>
使用<link>:
<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>\nRun Code Online (Sandbox Code Playgroud)\n@import与图层一起使用:
<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)