preload和prefetch区别

preload和prefetch区别

1. preload 告诉浏览器立即加载资源;

2. prefetch 告诉浏览器在空闲时才开始加载资源；

3. preload、prefetch 仅仅是加载资源，并不会“执行”;资源加载完成之前就已经完成了渲染，所以通过这两种方式资源的加载都不会阻塞关键渲染路径； 使用 preload 会将资源优先级设置为 Highest，而使用 prefetch 会将资源优先级设置为 Lowest，Lowest 资源将会在网络空闲时才开始加载。preload 优先级高于 prefetch；

4. preload、prefetch 均能设置、命中缓存；

type ResourceType = 'image' | 'script' | 'style' | 'video' | 'audio';

/**
 * 预加载优先级较高的资源（页面加载完成后3秒内需要的资源）
 * @param {String} href 资源地址
 * @param {String} type 资源类型image/script/style/video/audio等
 */
function preload(href: string, type: ResourceType): void {
  const preloadLink = document.createElement('link');
  preloadLink.href = href;
  preloadLink.rel = 'preload';
  preloadLink.as = type;
  preloadLink.crossOrigin = 'anonymous';
  document.head.appendChild(preloadLink);
}

/**
 * 预加载优先级较高的图片
 * @param {Array/String} imgs 预加载的图片地址
 */
export function preloadImages(imgs: string[]): void;
export function preloadImages(...multiImgs: string[]): void;
export function preloadImages(
  imgs: string | string[],
  ...restImgs: string[]
): void {
  if (typeof imgs === 'string') {
    [imgs, ...restImgs].forEach(img => {
      preload(img, 'image');
    });
  } else {
    if (!Array.isArray(imgs)) {
      throw new Error('preloadImages: param is not valid');
    }
    imgs.forEach(img => {
      preload(img, 'image');
    });
  }
}

/**
 * 预加载优先级较低的资源
 * @param {String} href 预加载资源地址
 */
function prefetch(href: string): void {
  const prefetchLink = document.createElement('link');
  prefetchLink.href = href;
  prefetchLink.rel = 'prefetch';
  document.head.appendChild(prefetchLink);
}

/**
 * 预加载优先级较低的图片
 * @param {Array/String} imgs 图片地址
 */
export function prefetchImages(imgs: string[]): void;
export function prefetchImages(...multiImgs: string[]): void;
export function prefetchImages(
  imgs: string | string[],
  ...restImgs: string[]
): void {
  if (typeof imgs === 'string') {
    [imgs, ...restImgs].forEach(img => {
      prefetch(img);
    });
  } else {
    if (!Array.isArray(imgs)) {
      throw new Error('prefetchImages: param is not valid');
    }
    imgs.forEach(img => {
      prefetch(img);
    });
  }
}

使用 preloadImages([ mainBg, mainTitle, title, drawBg, maskIcon, bgColor, bubbleBg, coverBg, musicMp3, ]);

script 标签的 defer 和 async 标签的作用与区别

1. <script src="script.js"></script>

   没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

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

   有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

3. <script defer src="myscript.js"></script>

   有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。