preload提前加载

在遇到需要 Preload 的资源时，浏览器会 立刻 进行预获取，并将结果放在内存中，资源的获取不会影响页面 parse 与 load 事件的触发,可以使用它来预先加载你最重要的资源，比如图像、css、javaScript和字体文件

  1. 可以通过link标签进行创建 ```javascript 

  2. 2. 可以在http响应头中加入preload字段
  3. <a name="agzL8"></a>
  4. # prefetch 预判加载
  5. prefetch 跟 preload 不同，它的作用是告诉浏览器未来可能会使用到的某个资源，浏览器就会在闲时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源。它的用法跟 preload 是一样的：
  6. ```javascript
  7. <!-- link 模式 -->
  8. <link rel="prefetch" href="/path/to/style.css" as="style">
  10. <!-- HTTP 响应头模式 -->
  11. Link: <https://example.com/other/styles.css>; rel=prefetch; as=style

preconnect

preconnect允许浏览器在一个http请求正式发给服务器前预先一些操作：DNS解析，TSL协商，TCP握手
Preconnect 是优化的重要手段，它可以减少很多请求中的往返路径
preconnect 可以直接添加到 HTML 中 link 标签的属性中，也可以写在 HTTP 头中或者通过 JavaScript 生成，如下是一个为 CDN 使用 preconnect 的例子：

  1. <link href="https://cdn.domain.com" rel="preconnect" crossorigin>