首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端静态资源缓存策略

背景 页面加载提速是战场,首当其冲要优化的就是 静态资源(js|css) 的加载速度。我们小组去年基于Vue开发了一个积分商城单页面应用。...本文旨在与大家分享在单页应用中使用纯前端手段加速静态资源的获取,从而达到页面加速。...量化静态资源,分析问题所在 先让我们看看资源列表: [9a44b01bc0094352cb5abf0ecc3e7810.png] 那么对于前端静态资源的度量,就有了一个量化: 总资源大小 必要资源加载...缓存方式制定 现在我们商城已经去掉了swiper.js,但当时由于时间紧急,我们使用折中的方式: 由前端自行主动发起网络请求获取所需的静态资源,并存储在前端持久化介质中,自行管理维护静态资源版本,形成一套可被其他前端项目复用的...[249b32b7a8c3731eb3662bdc039be8ca.png] 二次进入 二次进入的时候明确看到静态资源的请求已经消失,因为cache模块已经检测到LocalStorage存在资源

3.3K90

前端工程 - 静态资源的更新

这个页面引用了2个静态资源: a.css、b.js 随着产品的不断发展,简单的静态资源更新也就不再简单 阶段一 产品初期,访问量不大,网络带宽充足,每次用户访问都重新加载静态资源也很快...这种情况下,静态资源的升级就非常简单,用新的文件直接覆盖线上文件即可 阶段二 随着访问量的增加,带宽渐渐紧张起来,就需要进行优化,一个常用的优化方式就是为静态资源设置过期时间,添加Expires...、b.js,这样就大大提高了用户的访问速度,也极大的降低了网络传输 假如对 b.js 进行了修改,需要更新,但 b.js 已经缓存到了用户端,没过期之前不会再次请求了 对于这个问题,通常的解法是为静态文件添加版本号...v=1.0.1,然后再次进行缓存 这样便解决了上面的问题 阶段三 产品继续发展,静态资源文件越来越多,每次更新升级都需要统一修改所有的静态引用,修改版本号或者时间戳 这时产生了新的问题,每次升级都会使所有用户的所有静态资源缓存失效...,也会重新请求 (2)升级过程中可能产生页面错误 解决方案 目前来看最优的方案就是对静态文件进行计算编码(如 md5)把编码放入文件名中 例如对 b.js 进行 md5 计算,b.js 的名字则变为

1.3K60
您找到你想要的搜索结果了吗?
是的
没有找到

前端监控】静态资源测速&错误上报

小东西快快学快快记,大知识按计划学,不拖延 继续监控内容总结,今天总结的是前端如何监控静态资源的加载情况,并进行数据上报 本文分为3个部分 1、监控静态资源重要性 2、静态资源测速上报 3、静态资源出错上报...静态资源监控重要性 一个页面的加载快慢,最重要的指标就是静态资源的加载速度了吧。...你拼了命得对代码进行优化几十ms,结果静态资源一个不爽就给你耗了几百ms。 所以监控页面静态资源加载情况是十分有必要的。让我们更加全面评估页面的健康情况。...当应用静态资源加载总是缓慢或者出错,会进行告警,这时候马上去排查,是 cdn出了问题还是 资源有问题,就可以减少问题影响时间 静态资源缓慢和失败可是会直接影响用户体验和留存的 庆幸有监控的例子 之前我们上线了一个活动...() ,它可以获取到页面所有的静态资源和接口请求 我们这次是为了处理静态资源,所以可以使用 performance.getEntriesByType('resource') 来过滤得到页面的静态资源

4.1K20

静态路由静态汇总路由静态默认路由,负载均衡,浮动静态路由)介绍

网络上通过各种设备传递数据,最常见的就是路由器和交换机。本篇介绍路由器的静态路由协议。...直连没什么好说的,动态路由协议以后介绍,先介绍静态路由(配置静态路由静态汇总路由静态默认路由,负载均衡,浮动静态路由) 配置静态路由路由器不像交换机,新的路由器必须配好IP和路由才能使用,先如下图配好路由器各端口和环回口...静态汇总路由: 上面静态路由的配置例子中,要实现两两ping通,需要设8条路由(R1和R3各三条,R2两条),现在为R2增加两个环回口:loopback1:22.1.0.1/24,loopback2:...静态默认路由: 默认路由就是0.0.0.0/0表示所有路由(先将刚才设的汇总路由去掉): 上面设好的默认路由表示R1上所有路由均由12.1.1.2端口转发出去。...但AD值大的那条路由并非被丢弃了,而是沉入水中,等待时机,一旦路由表中的那条路由出问题不能用了,才浮出水面被加入进路由表。因此叫浮动静态路由很形象。

2.5K30

静态路由

静态路由(英语:Static routing),一种路由的方式,路由项(routing entry)由手动配置,而非动态决定。...与动态路由不同,静态路由是固定的,不会改变,即使网络状况已经改变或是重新被组态。一般来说,静态路由是由网络管理员逐项加入路由表。 优点:使用静态路由的另一个好处是网络安全保密性高。...动态路由因为需要路由器之间频繁地交换各自的路由表,而对路由表的分析可以揭示网络的拓扑结构和网络地址等信息。因此,网络出于安全方面的考虑也可以采用静态路由。...不占用网络带宽,因为静态路由不会产生更新流量 缺点:大型和复杂的网络环境通常不宜采用静态路由。...一方面,网络管理员难以全面地了解整个网络的拓扑结构;另一方面,当网络的拓扑结构和链路状态发生变化时,路由器中的静态路由信息需要大范围地调整,这一工作的难度和复杂程度非常高。

1.6K10

eNSP静态路由配置_ensp多条静态路由互联

ensp静态路由配置(详细) 一、首先了解一下数据转发过程中路由器的工作原理 路由器的工作原理: (1)解封装:此处解封装的前提是目的mac地址是自己才能解封装 (2)根据目的ip查路由表转发数据...ping通的基础后,我们来建立静态路由(Static) 静态配置:[Huawei]ip route-static 目的网段 掩码 出接口 下一跳 注意: 下一跳地址:如果是以太网链路,g或者e开头的...received 0.00% packet loss round-trip min/avg/max = 46/68/94 ms 结果是可以ping通的,说明PC1实现了对PC3 的通信,也就是我们静态路由协议配置成功...1、静态配置:静态路由static 60(优先级值) 2、动态路由协议:OSPF 10,RIP 100 ,BGP 255,ISIS 15 (1)最长掩码匹配 10.1.3.1 10.1.3.1/...transmitted 5 packet(s) received 0.00% packet loss round-trip min/avg/max = 20/42/50 ms 接下来我们开始配置静态路由

2.1K10

路由交换之静态路由

一、网络规划 1、实验目的 掌握静态路由的配置方法 掌握测试静态路由连通性的方法 2、网络拓补 3、IP规划 根据上述拓补图,对路由器、PC的IP地址规划如下: 设备名 IP地址 子网掩码 网关 PC1...; 请根据网络拓补及规划,对AR2、AR3路由器进行配置; ## AR1路由器配置示例 [Huawei]sys AR1 [AR1]interface g 0/0/0 [AR1-GigabitEthernet0...ping 192.4.2.1 (2)AR2 ping AR3 在AR2路由器ping 192.4.3.3 3、配置静态路由 (1)分别在AR1/AR2/AR3上配置到达非直连网络的静态路由 [AR1]...-优先级,取值范围0~255,值越小越优 (2)查看静态路由路由信息 使用 display ip routing-table protocol static 命令查看静态路由路由信息,确认配置的静态路由是否生效...AR1路由器 AR2路由器 AR3路由器 4、测试网络的连通性 使用ping命令测试网络连通性,使用tracert命令 跟踪到达目的站点经过路由器的情况 5、保存配置 分别在AR1、AR2、AR3

2K50

静态路由,YYDS

静态路由简单拓扑 静态路由的优点 1、使用静态路由没有开销 2、配置简单 3、静态路由更安全 4、静态路由不请求任何路由资源 静态路由的缺点 静态路由配置 1、思科 2、华为 3、H3C 4、锐捷 5...什么是静态路由静态路由是由网络管理员手动创建的路由静态路由通常用于较小的网络,在静态路由中,路由器的路由表条目由网络管理员手动填充。...静态路由最常用于连接到特定网络或为根网络最后的网关,还用于: 通过将多个连续网络汇总为一条静态路由来减少通告的路由数量 创建备用路由以防主路由链路发生故障 静态路由简单拓扑 静态路由的优点 1、使用静态路由没有开销...4、静态路由不请求任何路由资源 当有许多路由器时,像 OSPF 这样的动态路由协议可能需要路由器提供大量资源来计算跨网络的最短路径。 但是静态路由就不需要计算,当然也不需要请求任何路由资源。...静态路由简单拓扑 静态路由的优点 使用静态路由没有开销 配置简单 静态路由更安全 静态路由不请求任何路由资源 静态路由的缺点 静态路由配置 思科 华为 H3C 锐捷 瞻博网络 惠普网络 朋友们,你明白了吗

1.1K50

静态路由实验

不同网段通过静态路由实现互通组网图形图1 配置不同网段通过静态路由实现互通组网图静态路由简介配置注意事项组网需求配置思路操作步骤配置文件相关信息静态路由简介静态路由是一种需要管理员手工配置的特殊路由。...静态路由比动态路由使用更少的带宽,并且不占用CPU资源来计算和分析路由更新。但是当网络发生故障或者拓扑发生变化后,静态路由不会自动更新,必须手动重新配置。...静态路由有5个主要的参数:目的地址和掩码、出接口和下一跳、优先级。使用静态路由的好处是配置简单、可控性高,当网络结构比较简单时,只需配置静态路由就可以使网络正常工作。...在各主机上配置IP缺省网关,在各台Switch上配置IPv4静态路由或者静态缺省路由,实现不配置动态路由协议,使不同网段的任意两台主机之间能够互通。...配置静态路由# 在SwitchA配置IP缺省路由。[SwitchA] ip route-static 0.0.0.0 0.0.0.0 10.1.4.2# 在SwitchB配置两条IP静态路由

29000

前端遇上Go: 静态资源增量更新的新实践

大家知道,前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载。如果网络环境恶劣,那么我们的静态资源尺寸越大,用户下载失败的概率就越高。...作为一个发版频繁的业务,要降低发版的影响,可以做两方面优化: 更高效地使用缓存,减少静态资源的重复下载。 使用增量更新,降低单次发版时下发的内容尺寸。...以前端比较常见的JS资源尺寸——200KB——来进行增量计算,进行一次增量计算的时间依据文本不同的数量,从数十毫秒到十几秒甚至几十秒都有可能。...对于前端来说,网页每次更新发版,其实就是发布了新的静态资源,和与之对应的 HTML 文件。而对于增量更新服务来说,新的静态资源也就意味着需要进行新的计算。...2014年加入小米云平台,同时负责网页前端开发、客户端开发及路由器固件开发,积累了丰富的端开发经验。2017年加入美团,现负责金服平台基础组件的开发工作。

99620

前端探索】云存储用得好,静态资源没烦恼

本文主要介绍了,用COS和CDN存储静态资源,以及腾讯云API的使用。...CDN CDN的工作原理,就是将源站的资源,缓存在CDN各个节点上,当请求命中某个节点的缓存时,直接返回客户端,从而提高访问效率,缓解源站的压力。 更深一步的原理,可以参考下面两篇文章。...腾讯云COS和CDN 为了提高我们页面的体验,我们可以选择结合腾讯云的对象存储COS和内容分发网络CDN来托管我们的静态资源。...现状:设计同学的切图是传到腾讯云COS,然后我们为COS链接配置CDN域名,前端直接请求资源的CDN链接。...痛点:设计同学直接用COSBrowser管理COS上的资源,每次替换资源后,CDN的更新有延时,需要手动触发一下腾讯云的CDN刷新,但是COSBrower客户端上没有可以刷新的地方,每次需要登录腾讯云的网页管理端去刷新

72140

linux加静态路由命令,LINUX添加静态路由

LINUX添加静态路由 建议,先用命令添加,测试生效未有其他影响后,添加到配置文件中。 以本次127前置添加静态路由为例 用户需要添加路由如下,命令格式为windows添加格式。...1)添加前netstat –rn查看现有路由配置 2)命令添加 route add -net 10.113.70.0 netmask 255.255.255.0 gw 10.113.65.44 route...10.113.65.254 route add -net 10.113.70.240 netmask 255.255.255.240 gw 10.113.65.254 3)添加后netstat –rn查看现有路由配置...4)命令删除配置的静态路由 route del -net 10.113.70.0 netmask 255.255.255.0 gw 10.113.65.44 route del -net 10.113.70.240...255.255.255.240 gw 10.113.65.254 route del -net 10.113.70.240 netmask 255.255.255.240 gw 10.113.65.254 2.修改配置文件添加静态路由

7.6K50

SpringBoot【静态资源

SpringBoot中的静态资源的存放路径和我们前面的web项目还是有些区别的,本文我们来介绍下SpringBoot中的静态资源。   ...springboot访问静态资源,默认有两个默认目录, 一个是 classpath/static 目录 (src/mian/resource) 一个是 ServletContext 根目录下( src.../main/webapp ) SpringBoot静态资源 1.static目录   在IDEA中默认创建的有此目录,如下: ?   ...访问成功~ 3.自定义目录   一般情况下,默认目录已经满足我们的需求了,但是在某些特殊的情况下我们可能需要将静态文件存放在特殊的文件夹下,我们可以在application.properties中如下配置...#表示所有的访问都经过静态资源路径 spring.mvc.static-path-pattern=/** #覆盖默认配置,所以需要将默认的也加上否则static、public等这些路径将不能被当作静态资源路径

84330

静态路由与默认路由的配置_静态路由和默认路由哪个快

静态路由:是指用户或网络管理员手工配置的路由信息。当网络拓扑结构或链路状态发生改变时,需要网络管理员手工配置静态路由信息。...相比较动态路由协议,静态路由无需频繁的交换各自的路由表,配置简单,比较适合小型、简单的网络环境。...默认路由:是一种特殊的静态路由,当路由表中与数据包目的地址没有匹配的表项时,数据包将根据默认路由条目进行转发。...实验目的: (1)掌握静态路由(指定接口)的配置方法; (2)掌握静态路由(指定下一跳IP地址)的配置方法; (3)掌握静态路由连通性的测试方法; (4)掌握默认路由的配置方法; (5)掌握默认路由的测试方法...; (6)掌握在简单网络中部署静态路由时的故障排除方法; (7)掌握简单的网络优化方法; 实验内容: 在三台路由器所组成的简单网络中,R1和R3各自连接着一个主机,现在要求通过配置基本的静态路由和默认路由来实现主机

2.8K30

静态路由介绍_静态路由下一跳地址类型

网络上通过各种设备传递数据,最常见的就是路由器和交换机。本篇介绍路由器的静态路由协议。...直连没什么好说的,动态路由协议以后介绍,先介绍静态路由(配置静态路由静态汇总路由静态默认路由,负载均衡,浮动静态路由) 配置静态路由路由器不像交换机,新的路由器必须配好IP和路由才能使用,先如下图配好路由器各端口和环回口...静态汇总路由: 上面静态路由的配置例子中,要实现两两ping通,需要设8条路由(R1和R3各三条,R2两条),现在为R2增加两个环回口:loopback1:22.1.0.1/24,loopback2:...静态默认路由: 默认路由就是0.0.0.0/0表示所有路由(先将刚才设的汇总路由去掉): 上面设好的默认路由表示R1上所有路由均由12.1.1.2端口转发出去。...但AD值大的那条路由并非被丢弃了,而是沉入水中,等待时机,一旦路由表中的那条路由出问题不能用了,才浮出水面被加入进路由表。因此叫浮动静态路由很形象。

1.4K20

ensp配置静态路由的步骤_2个路由静态路由配置

eNSP配置静态路由 目标 配置目标:如下拓扑结构,从CLIENT1去pingCLIENT2,ping通 拓扑结构 路由配置 配置各个路由表的核心思想是:只有这个路由表中有一个网段的网络号,才可以从这个路由器跳转到该网段...,下面只展示R1的前往CLIENT2的路由配置,其他路由器及返回过程配置类似。...如果要从CLIENT1发ping命令让CLIENT2回应,(CLIENT1会把报文抛到自己的网关R1),必须让R1的路由表中目的地址存在CLIENT1的IP地址,下一跳设置成192.168.16.2,目标网段是...192.168.26.0,转发到R2之后,R2的路由表中也必须有CLIENT2的IP地址,下一跳设置成192.168.26.2,目标网段是192.168.20.0,这样从CLIENT1可以发报文到CLIENT2...下面只展示R1配置从CLIENT1发往CLIENT2的路由表。

2.5K20
领券