- link和@import的区别
- link是HTML标签，@import是css提供的。
- link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
- link没有兼容性问题，@import不兼容ie5以下。
- link可以通过js操作DOM动态引入样式表改变样式，而@import不可以（比如
var link = document.createElement("link");document.head.appendChild(link)）
关于link标签的补充：
-
<link href="main.css" rel="stylesheet">其中rel表明了被引用的文档和当前文档的关系 - link标签还有很多其他属性比如sizes，type，media等，如
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
<link href="print.css" rel="stylesheet" media="print">
- 和性能及安全性相关的新特性, preload：
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
crossorigin属性：指定在加载相关图片时是否必须使用CORS，值为anonymous则发起跨域请求但不发认证信息；值为use-credentials则发起一个带有认证信息的跨域请求 - media属性：规定外部资源适用的媒体类型
- prefetch属性：当资源被请求时，使用户代理的响应速度更快
- 提供可替换的样式表
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
- 在样式表应用到内容之前触发load事件
<script>
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}
function sheetError() {
alert("An error occurred loading the stylesheet!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
- 预加载preload例子
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
