link和@import
在CSS中，link和@import都可以用来引入外部样式表，但它们有一些区别。
<link href="a.css" rel="stylesheet">
<style> @import url('a.css'); </style>
-
用法：
link是HTML标签，还可以用来定义RSS、rel链接等，而@import只能用来引入样式表。 -
加载顺序：
link标签在页面加载时同时被加载，而@import在页面加载完成后才会被加载。因此，link可以让页面更快地加载，而@import会导致页面加载速度变慢。 -
浏览器兼容性：
link标签的兼容性更好，可以被所有浏览器支持，而@import在一些旧版本的浏览器中可能不被支持。 -
DOM操作：
link标签可以通过JavaScript来操作DOM，而@import不可以。 -
FOUC问题：
link最大限度地支持并行下载，@import过多嵌套会导致串行下载，出现FOUC。 -
优先级：
link > @import
FOUC
什么是FOUC
FOUC(Flash of Unstyled Content):用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁，在网速较慢或过多使用@import时出现，影响用户体验。
如何避免FOUC
- 把CSS代码放在文档的
<head> - 尽量使用
link代替@import
总结
link标签优于@import方法