prefetch 与 preload 的区别是什么?

  • 先来看一段代码

    1
    2
    <link rel="prefetch" href="style.css" as="style" />
    <link rel="preload" href="main.js" as="script" />

  • preload 是⼀个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请

    求资源。 preload 顾名思义就是⼀种预加载的⽅式，它通过声明向浏览器声明⼀个需要提前加载的资源，当资源真正被使⽤的时候⽴即执⾏，就⽆需等待⽹络的消耗

  • prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。

    若能预测到⽤户的⾏为，⽐如懒加载，点击到其它⻚⾯等则相当于提前预加载了需要的资源。