prefetch 性能优化

最新推荐文章于 2024-04-17 18:27:10 发布

徐同保

最新推荐文章于 2024-04-17 18:27:10 发布

阅读量379

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/117018311

版权

web前端专栏收录该内容

735 篇文章 15 订阅

订阅专栏

效果：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="prefetch" href="index.js" as="script" onload="loadjs()">
  </head>
  <body onload="load()">
    <a href="next.html">下一页</a>
    <script>
      const loadjs = () => {
        console.log('index.js onload')       
      }
      const load = () => {
        console.log('body onload')
      }
    </script>
  </body>
</html>

next.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="index.js"></script>
</head>
<body>
  下一页了
  <script>
    let sum = add(1, 2)
    console.log(sum)
  </script>
</body>
</html>

index.js:

console.log('运行')

const add = (a, b) => {
  return a + b
}

prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；

prefetch特点:

prefetch加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟（无论资源是否可以缓存）；并且，当页面跳转时，未完成的prefetch请求不会被中断；

徐同保

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
prefetch 性能优化

效果：目录：index.html:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫