性能优化：标签你不知道的属性

场景：打开淘宝、京东等网站查看标签加了一些你不知道的属性

 <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
  <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" />

dns-prefetch

域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。

<link rel="dns-prefetch" href="//m.baidu.com">

prefetch

prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。

<link rel="prefetch" href="http://www.baidu.com/">

preload

和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。

<link rel='preload' href='style.css' as="style" οnlοad="console.log('style loaded')"

区别：Preload 来告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级。比如，对于那些本来请求优先级较低的关键请求，我们可以通过设置 Preload 来提升这些请求的优先级。
Prefetch 来告诉浏览器用户将来可能在其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在 http 缓存内，最常见的 dns-prefetch。比如，当我们在浏览A页面，如果会通过A页面中的链接跳转到B页面，而B页面中我们有些资源希望尽早提前加载，那么我们就可以在A页面里添加这些资源 Prefetch ，那么当浏览器空闲时，就会去加载这些资源。
所以，对于那些可能在当前页面使用到的资源可以利用 Preload，而对一些可能在将来的某些页面中被使用的资源可以利用 Prefetch。如果从加载优先级上看，Preload 会提升请求优先级；而Prefetch会把资源的优先级放在最低，当浏览器空闲时才去预加载。

面试点：

//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>

defer 和 async 都是异步(并行)加载资源，不同点是 async 是加载完立即执行，而 defer 是加载完不执行，等到所有元素解析完再执行，也就是 DOMContentLoaded 事件触发之前。 因为 async 加载的资源是加载完执行，所以它比不能保证顺序，而 defer 会按顺序执行脚本。