CN110209976A - 一种前端资源的缓存更新方法及计算机设备 - Google Patents
一种前端资源的缓存更新方法及计算机设备 Download PDFInfo
- Publication number
- CN110209976A CN110209976A CN201910496224.9A CN201910496224A CN110209976A CN 110209976 A CN110209976 A CN 110209976A CN 201910496224 A CN201910496224 A CN 201910496224A CN 110209976 A CN110209976 A CN 110209976A
- Authority
- CN
- China
- Prior art keywords
- timestamp
- page object
- page
- interval time
- time
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种前端资源的缓存更新方法，从缓存中获取的页面对象的时间戳以及间隔时间；将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新；本发明还提供过一种计算机设备，掌握资源更新的主动权，也可以兼顾到缓存的使用提升用户体验。
Description
技术领域
本发明涉及一种前端资源的缓存更新方法及计算机设备。
背景技术
前端开发的过程种经常会遇到这样的问题，前端的图片是来自后台的的，后台的图片替换掉，页面资源还是没有更新到最新，必须在调试工具清除缓存才能看到新的。
有时候页面从浏览器删除了以后，再打开图片都是重新加载的，就能看到服务器上的最新图片。但有的时候却不生效，也用手机管家清理了浏览器缓存，打开之后图片还是从缓存里读取的，而且就算把服务器上的图片删了，浏览器打开之后还是能加载出来图片。
有些广告宣传的图片或者视频等静态资源的不确定性是常态，经常版本上线了，还面临着频繁修改资源。由于页面性能的考虑，和页面的发布机制，我们不能将有可能变动的、内存占用大的资源放在主程序包里，也不能因为一张图片的修改重新发布程序。但如果是通过url请求资源，由于路径名称不变，触发了浏览器的缓存机制，这种缓存机制在不同的手机客户端、不同的机型上的表现不一致，也为我们增添了许多烦恼。
发明内容
本发明要解决的技术问题，在于提供一种前端资源的缓存更新方法及计算机设备，掌握资源更新的主动权，也可以兼顾到缓存的使用提升用户体验。
本发明之一是这样实现的：一种前端资源的缓存更新方法，包括：
步骤1、从缓存中获取的页面对象的时间戳以及间隔时间；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
进一步地，所述步骤2中对页面对象内的参数名进行修改进一步具体为：将页面对象内的参数名并拼接上‘×tamp’+timestampStr。
进一步地，所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间。
进一步地，所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟。
本发明之二是这样实现的：一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：
步骤1、从缓存中获取的页面对象的时间戳以及间隔时间；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
进一步地，所述步骤2中对页面对象内的参数名进行修改进一步具体为：将页面对象内的参数名并拼接上‘×tamp’+timestampStr。
进一步地，所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间。
进一步地，所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟。
本发明具有如下优点：一种前端资源的缓存更新方法及计算机设备，把资源再次渲染在页面上就可以保证了资源的实时性，掌握资源更新的主动权，也可以兼顾到缓存的使用提升用户体验。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明方法执行流程图。
具体实施方式
如图1所示，本发明前端资源的缓存更新方法，包括：
步骤1、在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，即将页面对象内的参数名并拼接上‘×tamp’+timestampStr，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
本发明计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：
步骤1、在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，即将页面对象内的参数名并拼接上‘×tamp’+timestampStr，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
本发明一种具体实施方式：
利用浏览器的缓存机制，记录下资源的更新时间，与需要更新的配置。从而赋予前端一种自动更新的能力。
所以我们需要了解浏览器缓存cookie，JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie。
cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。
cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。(1)保存用户登录状态。(2)跟踪用户行为。(3)定制页面。(4)保存资源记录。Cookie在全局能被访问，能设置过期时间，在需要的时候能被后台访问。
并且我们需要在合适的时机为资源更新，所以对页面的生命周期事件也要有所掌握。HTML页面的生命周期有以下三个重要事件：
DOMContentLoaded—浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是<img>和样式表等外部资源可能并没有下载完毕。
load—浏览器已经加载了所有的资源(图像，样式表等)。
beforeunload/unload--当用户离开页面的时候触发。
首先，我们要在初始化程序自定义一个变量timestampStr用来保存时间的改变，再定义一个变量timestampChage，用来保存需要变化时间戳的时间配置(单位分钟)，这两个变量是全局的变量，可以通过全局对象实例获取到。通过定义实例方法editTimestamp(app,page)传入全局对象和页面对象，给全局和其他需要的业务页面使用，通用方法实现，前端页面由组件构成，组件只能获取和修改自身数据及全局数据。全局对象是每个组件和子页面都可以访问到的对象，在vuex里是$app，在小程序里是getApp()。页面对象就是当前页面this对象。
因为需要同时被document和页面对象调用，所以在方法内部我们不能直接应用全局对象，也获取不到timestampStr当前时间戳，所以需要把全局对象作为参数传递给editTimestamp方法，在方法内部获通过app.timestampStr和app.timestampChage获取当前时间戳和时间变化配置，如果时间戳为空，则取当前时间为时间戳返回给全局对象。如果不为空则取时间配置，如果配置时间为空，则默认为10分钟，通过获取当前时间戳与缓存保存的时间做比较，如果小于配置时间则不做改变，如果大于等于配置时间则对缓存的时间戳进行改变(即timestampStr用来保存当前程序使用的时间戳，如果有新的值产生要对该值进行替换)，并且对页面对象里的渲染字符串进行改变(解决的问题是前台渲染了最新数据却展示还是旧的问题，如图片内容改了名称没变，脚本逻辑改了名称没变等只改资源内部而外部引用没变的情况)。这里没有在页面里直接引用全局定义好的全局变量，是因为它的改变不能实时传递给页面，不是响应式的数据，所以需要在调用方法时候把页面作为第二个参数传递给方法，方法以此来判断是否在页面内部，是否需要为page里的data赋值来实时响应数据。
最后需要注意的是，需要在页面生成并且产生dom节点之前去缓存里读取调用版本变量，赋值给需要展示的前端资源，这样才能保证尽可能的及时更新用户资源。或者可以把资源路径，丢进实例化方法，方法会根据你的资源路径进行判断，然后以参数名的形式拼接上‘×tamp’+timestampStr(如阿里的图片资源)或者以版本的形式以‘？’加上版本号字符串直接赋值给资源(如百度的静态资源)。
通过以上环节的处理，把资源再次渲染在页面上就可以保证了资源的实时性，掌握资源更新的主动权，也可以兼顾到缓存的使用提升用户体验。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。
Claims (8)
1.一种前端资源的缓存更新方法，其特征在于：包括：
步骤1、从缓存中获取的页面对象的时间戳以及间隔时间；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
2.根据权利要求1所述的一种前端资源的缓存更新方法，其特征在于：所述步骤2中对页面对象内的参数名进行修改进一步具体为：将页面对象内的参数名并拼接上‘×tamp’+timestampStr。
3.根据权利要求1所述的一种前端资源的缓存更新方法，其特征在于：所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间。
4.根据权利要求3所述的一种前端资源的缓存更新方法，其特征在于：所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟，若所述间隔时间为空，则设置间隔时间为十分钟。
5.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于：所述处理器执行所述程序时实现以下步骤：
步骤1、从缓存中获取的页面对象的时间戳以及间隔时间；
步骤2、将当前时间减去时间戳，若是小于间隔时间，则不对页面对象做改变；若是大于等于间隔时间，则对页面对象内的参数名进行修改，将所述时间戳更新为当前时间，并判断页面对象引用的url是否改变，若改变，则进行更新。
6.根据权利要求5所述的一种计算机设备，其特征在于：所述步骤2中对页面对象内的参数名进行修改进一步具体为：将页面对象内的参数名并拼接上‘×tamp’+timestampStr。
7.根据权利要求5所述的一种计算机设备，其特征在于：所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间。
8.根据权利要求7所述的一种计算机设备，其特征在于：所述步骤1进一步具体为：在页面生成并且产生DOM节点前，从缓存中获取的页面对象的时间戳以及间隔时间，若所述时间戳为空，则设置当前时间为时间戳，若所述间隔时间为空，则设置间隔时间为十分钟。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910496224.9A CN110209976A (zh) | 2019-06-10 | 2019-06-10 | 一种前端资源的缓存更新方法及计算机设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910496224.9A CN110209976A (zh) | 2019-06-10 | 2019-06-10 | 一种前端资源的缓存更新方法及计算机设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110209976A true CN110209976A (zh) | 2019-09-06 |
Family
ID=67791643
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910496224.9A Pending CN110209976A (zh) | 2019-06-10 | 2019-06-10 | 一种前端资源的缓存更新方法及计算机设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110209976A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112433867A (zh) * | 2020-11-25 | 2021-03-02 | 四川长虹电器股份有限公司 | 一种优化Android物联网APP请求设备列表的方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103106216A (zh) * | 2011-11-15 | 2013-05-15 | 腾讯科技（深圳）有限公司 | 一种网页访问方法和设备 |
| CN103257973A (zh) * | 2012-02-20 | 2013-08-21 | 腾讯科技（深圳）有限公司 | 浏览器缓存更新方法和系统 |
| CN103618926A (zh) * | 2013-12-09 | 2014-03-05 | 乐视网信息技术（北京）股份有限公司 | 对智能电视的显示应用页面的控制方法和控制装置 |
| US20140149392A1 (en) * | 2012-11-28 | 2014-05-29 | Microsoft Corporation | Unified search result service and cache update |
| CN107025226A (zh) * | 2016-01-29 | 2017-08-08 | 广州市动景计算机科技有限公司 | 目标站点访问方法、装置和中转服务器 |
-
2019
- 2019-06-10 CN CN201910496224.9A patent/CN110209976A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103106216A (zh) * | 2011-11-15 | 2013-05-15 | 腾讯科技（深圳）有限公司 | 一种网页访问方法和设备 |
| CN103257973A (zh) * | 2012-02-20 | 2013-08-21 | 腾讯科技（深圳）有限公司 | 浏览器缓存更新方法和系统 |
| US20140149392A1 (en) * | 2012-11-28 | 2014-05-29 | Microsoft Corporation | Unified search result service and cache update |
| CN103618926A (zh) * | 2013-12-09 | 2014-03-05 | 乐视网信息技术（北京）股份有限公司 | 对智能电视的显示应用页面的控制方法和控制装置 |
| CN107025226A (zh) * | 2016-01-29 | 2017-08-08 | 广州市动景计算机科技有限公司 | 目标站点访问方法、装置和中转服务器 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112433867A (zh) * | 2020-11-25 | 2021-03-02 | 四川长虹电器股份有限公司 | 一种优化Android物联网APP请求设备列表的方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8078691B2 (en) | Web page load time prediction and simulation | |
| US8745202B2 (en) | Tracking remote browser crashes via cookies | |
| US9405555B2 (en) | Automated code splitting and pre-fetching for improving responsiveness of browser-based applications | |
| CN104520814B (zh) | 用于配置云计算系统的系统和方法 | |
| CN103946833B (zh) | 管理专用缓存的系统和方法 | |
| CN101960449B (zh) | 用于对远程资源的web访问的基于XML的web订阅源 | |
| US20210258394A1 (en) | Synchronized console data and user interface playback | |
| US20110196957A1 (en) | Real-Time Policy Visualization by Configuration Item to Demonstrate Real-Time and Historical Interaction of Policies | |
| US9602340B2 (en) | Performance monitoring | |
| US10817267B2 (en) | State machine representation of a development environment deployment process | |
| US20180159724A1 (en) | Automatic task tracking | |
| US20220286524A1 (en) | Network latency detection | |
| EP3616061B1 (en) | Hyper dynamic java management extension | |
| CN108280174A (zh) | 前端文件构建方法和服务器、页面访问方法和终端 | |
| EP2256633A2 (en) | Service provider management device, service provider management program, and service provider management method | |
| CN110209976A (zh) | 一种前端资源的缓存更新方法及计算机设备 | |
| US10180914B2 (en) | Dynamic domain name service caching | |
| CN113204425A (zh) | 供进程管理内部线程的方法、装置、电子设备及存储介质 | |
| CN112448833B (zh) | 一种多管理域的通信方法和装置 | |
| US20190179722A1 (en) | Tool for enterprise-wide software monitoring | |
| Cecowski et al. | Cloud computing applications | |
| Nyfløtt | Optimizing inter-service communication between microservices | |
| Kolb et al. | Nucleus-Unified Deployment and Management for Platform as a Service | |
| Swaminathan Sivasubramanian et al. | Sla-driven resource provisioning of multi-tier internet applications | |
| CN116167342A (zh) | 文件生成方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190906 |