客户端资源优化(html渲染速度，静态资源)

一 前端静态资源预加载提高网页渲染速度-preload：

type: css、js、image、font
动态key值：href

<link rel="preload" href="myCss.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="./manifest.js" as="script">
<link rel="preload" href="./vendor.js" as="script">
<link rel="preload" href="./app.js" as="script">
<link rel="preload"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
<link rel="preload" href="xxx/bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="xxx/bg-image-wide.png" as="image" media="(min-width: 601px)">

推展：

1.preload 预加载
2.prefetch 懒加载，和vue路由的模块懒加载原理模式一样

<link rel="prefetch" href="./user.js">
<link rel="prefetch" href="./comment.js" as="script">
<link rel="prefetch" href="./category.js" as="script">

3.media在预加载的时候还可以进行媒体查询，当屏幕宽度达到某个条件的时候才预加载。
4.二次加载
as： 不设置as属性，如果对所 preload 的资源不使用明确的 “as” 属性，将会导致二次获取
crossorigin： preload 字体不带 crossorigin 会二次获取！ 确保对 preload 的字体添加 crossorigin 属性，否则字体文件会被下载两次，这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下，也适用于其他域名的获取(比如说默认的异步获取)