关于同一个页面多个 相同<script> 标签的问题回顾

本文探讨了在网页中如何避免因多个相同script标签导致的资源重复加载问题。通过实验观察到,尽管理论上相同资源只会在首次被加载,但实际上多次加载的情况仍然会发生。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天我提了一个问题

如何避免多个相同的 script 或 link标签 重复访问加载资源

虽然最后问题有了答案  ,那就是同一个页面存在多个相同的script 标签 并且没有禁用缓存时。

只有第一次会访问服务器获取数据,其后重复的资源都会从缓存中加载。

 

不过根据我的实验,多个标签情况下 ,数据确实会被重复加载多次,而不是仅加载一次。

典型的实验是在要加载的js中添加一个alert

会发现script标签有多少个,alert就执行了多少回。

<template> <RouterView> <template #default="{ Component, route }"> <keep-alive> <component :is="getComponent(Component, route)" :key="route.fullPath" /> </keep-alive> <!-- <component :is="getComponent(Component, route)" :key="route.fullPath" v-else /> --> </template> </RouterView> <FrameLayout v-if="getCanEmbedIFramePage" /> </template> <script lang="ts"> import { computed, defineComponent, unref, ref, watch } from 'vue'; import FrameLayout from '@/layouts/iframe/index.vue'; import { useRootSetting } from '@/hooks/setting/useRootSetting'; import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'; import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'; import { getTransitionName } from './transition'; import { useMultipleTabStore } from '@/store/modules/multipleTab'; export default defineComponent({ name: 'PageLayout', components: { FrameLayout }, setup() { const tabStore = useMultipleTabStore(); const isshow = ref<boolean>(false) // 展示进入缓存的 const cachedViews = computed((): string[] => { let routedata: any = tabStore.getTabList.map(item => item.name) return routedata }) const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting(); const { getBasicTransition, getEnableTransition } = useTransitionSetting(); function getComponent(val, path) { if(tabStore.getdelectdata.indexOf(path.name) !=-1){ path.meta.keepAlive = false } if (tabStore.getTabList.length > 10) { tabStore.setdelectdata(tabStore.getTabList[1].name) tabStore.getTabList.splice(1, 1) } path.meta.keepAlive = true console.log(path) return val } const getCaches = computed((): string[] => { if (!unref(getOpenKeepAlive)) { return []; } return tabStore.getCachedTabList; }); function shouldCache(route) { console.log(route.name, tabStore.getdelectdata.indexOf(route.name)) if (tabStore.getdelectdata.indexOf(route.name) != -1) { tabStore.indexdelectdata(tabStore.getdelectdata.indexOf(route.name)) return false } else { return true } } return { getTransitionName, getEnableTransition, getBasicTransition, getCaches, getCanEmbedIFramePage, getComponent, tabStore, cachedViews, isshow, shouldCache }; }, }); </script> keep-alive 关闭页签后 缓存消失
最新发布
08-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值