<head> <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="script.js" as="script"> <link rel="preload" href="image.jpg" as="image"> </head>二. 使用 JavaScript 动态加载
function preloadResource(url) { const link = document.createElement('link'); link.rel = 'preload'; link.href = url; link.as = 'script'; // 或 'style', 'image' 等 document.head.appendChild(link); } // 调用预加载 preloadResource('script.js');三. WebWorker 实现预加载
// preloadWorker.js // 堆代码 duidaima.com self.addEventListener("message", (e) => { const urls = e.data; urls.forEach((url) => { fetch(url) .then((response) => { // 一个简单的操作,标识资源已被预加载 if (response.status === 200) { postMessage(`Resource preloaded: ${url}`); } else { postMessage(`Resource failed: ${url}`); } }) .catch((error) => { postMessage(`Resource fetch error: ${url}`); }); }); });这个脚本监听来自主线程的消息,该消息包含了要预加载的资源的 URL 列表。对于每个 URL,它使用 fetch 请求该资源。根据请求的结果,它会通过 postMessage 向主线程发送一条消息,表明该资源已被预加载,或者载入失败。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Web Worker Preload Demo</title> </head> <body> <script src="main.js"></script> </body> </html>然后,创建主线程脚本 main.js 用于启动和与 Web Worker 交互。
// main.js // 堆代码 duidaima.com if (window.Worker) { const worker = new Worker("preloadWorker.js"); const resources = [ "image.png", // 示例资源,确保替换为实际的 URL "style.css", "script.js", ]; worker.postMessage(resources); worker.onmessage = (e) => { console.log(e.data); }; } else { console.log("Your browser doesn't support web workers."); }这段脚本首先检查浏览器是否支持 Web Worker。如果支持,它会创建一个指向 preloadWorker.js 的新 Worker 实例,然后将要预加载的资源列表发送给这个 Worker。最后,它设置一个事件监听器来接收并处理 Worker 发出的消息。