重学 html の link标签

时间 2019-11-10

标签 html link 标签栏目 HTML 繁體版

原文原文链接

link元素规定了外部资源与当前文档的关系。经常使用于连接样式表，建立网站图标，预加载资源等。css

连接样式表

<link href="main.css" rel="stylesheet">

建立站点图标

<link rel="icon" type="image/png" href="myicon.png">

预加载

用于前端界面性能优化，rel 的属性值能够为preload、prefetch、dns-prefetch。html

<link rel="preload" href="style.css" as="style">
<link rel="prefetch" href="/uploads/images/pic.png">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

prefetch 预获取

用户在使用当前界面时，浏览器空闲时先把下个界面要使用的资源下载到本地缓存。浏览器下不下载不可知。
举个例子：网站有A，B 两个界面。当用户访问界面 A 时有很大的几率会访问 B 界面（好比登陆跳转）那么咱们能够在用户访问界面 A 的时候，提早将 B 界面须要的某些资源下载到本地，性能会获得很大的提高。那么咱们只须要在界面 A.html 文件中设置以下代码：前端

<link rel="prefetch" href="/uploads/images/pic.png">

preload

控制当前界面的资源下载优先级，浏览器必须下载资源。
举个例子：网站的一个界面 A的 css 样式文件中使用了外部字体文件，正常状况下该字体的下载是在 css 解析的时候完成的。想一想字体文件好像在 css 样式文件解析以前下载到本地比较好。那么咱们就能够在head标签设置字体的 preload。git

<link rel="preload" href="https://example.com/fonts/font.woff" as="font">

dns-prefetch

按照字面理解便可，先把要跳转的域名解析，减小时间。
github

prefetch & preload 对比

关注的页面不一样： prefetch 关注要使用的页面，preload 关注当前页面
资源是否下载：prefetch 的资源下载状况未知（只在浏览器空闲时会下载），preload 确定下载

media 属性

media 属性规定被连接文档将显示在什么设备上。api

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

注意：当界面加载时，两个样式表都会下载到客户端，只是会根据场景不一样使用不一样的样式。
浏览器

TODO

script 标签的 async 和 defer 属性的区别和目的？
缓存

引用

preload & prefetch
一步前端性能优化

1. Html Link 标签
2. html预加载之link标签
3. meta与link标签
4. 7-20 html重点标签学习一
5. HTML标签分类（重点）
6. html中权重标签
7. SEO中HTML标签权重
8. HTML标签---head,meta,link,title,多媒体标签，超连接标签等
9. Meta，Link标签详解
10. 利用link标签rel="alternate&…
更多相关文章...
• Git 标签 - Git 教程
• MyBatis if标签 - MyBatis教程
• 适用于PHP初学者的学习线路和建议
• Tomcat学习笔记（史上最全tomcat学习笔记）