资源提示符

常用的资源提示符有

async defer preload prefetch

async和defer常用在script标签中

我们在以前写script标签的时候经常会写在dom标签的最后，等dom执行完成了再去加载js保障js能正确操作dom，但是这样就会有个问题，浏览器主线程会等待远程js加载完成再去执行，这样主线程就会有空闲时间所以我们需要充分利用这段时间不去让主线程白白浪费掉，那如何做呢就是个script标签加上资源提示符async或者defer。当加上async的时候浏览器会预先去加载远程js等加载完成后会立即执行js，但是这样会有问题就是js加载完成的时候dom元素可能还没解析完成这时候用js去获取dom会导致有些没加载的dom获取不到导致出现bug，那怎么解决呢？这时候可以使用defer它也会预先加载与async的不同点就是它会等待dom解析完成后再去执行js，这样就不会出现解析不完dom就去执行js的情况出现。 如果你的script标签type="module"那么默认资源提示符就是defer

注意：浏览器会预先加载资源会新开个线程去做并不会影响到主线程

preload prefetch 常用在link标签中

preload和prefetch可以用来预先加载将来要用到的任何资源但是不会执行而是缓存起来等用的时候再去执行，它俩的区别就是preload会立即去加载优先级高，prefetch会等浏览器空闲的时候再去加载优先级低。实际使用中一般是首页需要使用到的资源使用preload而其他第一时间看不到的页面可以使用prefetch去加载。