link 标签

link 标签主要用于指明当前文档和外部资源之间的关系, 可以有以下作用：

• 引入外部样式表
• 引入图标
• 性能和安全特性

其核心属性如下

• href：外部资源的 URL
• media：外部资源被使用的设备条件（显示屏的分辨率呀，宽度呀，打印预览呀...）
• rel：外部资源与当前文档的关系（样式表呀，图标呀...）
• type：外部资源的文件类型，比如引用 css 样式表时，用 type='text/css'

引入外部样式

<!-- 提供一个媒体类型，或者在media属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来 -->
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />

其中比较特殊的就是，我们可以在 media 中加入媒体条件

引入图标

<!-- 网站图标的链接 -->
<link rel="icon" href="favicon.ico" />

<!-- 表示不同移动平台上特殊的图标类型 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" />

<link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon" />

性能和安全特性(预处理提升渲染速度)

1. dns-prefetch

浏览器对某个域名提前进行 DNS 解析并缓存

淘宝网首页 DNS 预解析配置

<link rel="dns-prefetch" href="//g.alicdn.com" />
<link rel="dns-prefetch" href="//img.alicdn.com" />
<link rel="dns-prefetch" href="//tce.alicdn.com" />
<link rel="dns-prefetch" href="//gm.mmstat.com" />
<link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />
<link rel="dns-prefetch" href="//atanx.alicdn.com" />
<link rel="dns-prefetch" href="//dfhs.tanx.com" />
<link rel="dns-prefetch" href="//ecpm.tanx.com" />
<link rel="dns-prefetch" href="//res.mmstat.com" />

2. preconnect

比 dns-prefetch 更深入，对于某一个域名提前进行 DNS 的预解析、TLS 协商、TCP 握手

3. preload

在页面渲染之前对资源进行预加载，且不易阻塞页面的初步渲染。

4. prefetch

对资源进行预加载，一般用于加载非本页的其他页面所需要的资源，以便加快后续页面的首屏渲染速度。资源加载完成后，可以被缓存。

5. canonical

一个网站很可能有多个不同的网址指向同一个网页，或者在不同网址上有重复网页或非常类似的网页，比较常见的就是为了支持多种设备类型，同一个网页会包含多个用户端。

http://xxxx.com
http://xxx/index.com

在搜索引擎同时收录如下三个网站时，由于三个网址的页面内容是相同的，搜索引擎会根据算法自动推荐一个版本的 URL 展示在搜索结果中，而此 URL 很可能不是最希望展现的版本。

按照如下方式指定网页的规范版本，搜索引擎则会把权重集中到规范版本页面，由此提升网页的权重，排名更加靠前。

<!-- http://xxx.com/index -->
<link rel="canonical" href="http://xxx.com" />

6. alternate

表示当前文档的可替换样式表。借助于 link 标签的 disabled 属性用于页面主题的替换功能

rel=alternate 的页面是默认不会渲染的，但是会在预加载。

题目

1. src 和 href 的区别

相同点：

• 都是用于加载外部的资源文件

区别：

• href 作用域 link、a 标签；src 作用于 script src
• 当浏览器遇到 href 会并行下载资源文件且不会停止对当前文档的处理
• 当浏览器遇到 src: 会暂停其他资源的下载和处理，知道将该资源加载且执行完毕(src 的 defer、async 除外)