CN116909613A - 前端增量更新方法、装置及其应用 - Google Patents
前端增量更新方法、装置及其应用 Download PDFInfo
- Publication number
- CN116909613A CN116909613A CN202310906884.6A CN202310906884A CN116909613A CN 116909613 A CN116909613 A CN 116909613A CN 202310906884 A CN202310906884 A CN 202310906884A CN 116909613 A CN116909613 A CN 116909613A
- Authority
- CN
- China
- Prior art keywords
- version number
- file
- updating
- updated
- resource
- 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
- 238000000034 method Methods 0.000 title claims abstract description 60
- 238000013515 script Methods 0.000 claims abstract description 28
- 238000004422 calculation algorithm Methods 0.000 claims description 19
- 230000003068 static effect Effects 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008859 change Effects 0.000 claims description 11
- 230000008569 process Effects 0.000 claims description 10
- 230000005540 biological transmission Effects 0.000 abstract description 9
- 238000010586 diagram Methods 0.000 description 10
- 230000018109 developmental process Effects 0.000 description 9
- 238000011161 development Methods 0.000 description 8
- 238000004364 calculation method Methods 0.000 description 4
- 230000004069 differentiation Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 239000011159 matrix material Substances 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 108091028043 Nucleic acid sequence Proteins 0.000 description 1
- 238000007792 addition Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 239000012141 concentrate Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 239000003999 initiator Substances 0.000 description 1
- 230000000977 initiatory effect Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000002688 persistence Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000033764 rhythmic process Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000002123 temporal effect Effects 0.000 description 1
- 230000017260 vegetative to reproductive phase transition of meristem Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
- G06F8/658—Incremental updates; Differential updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/17—Details of further file system functions
- G06F16/172—Caching, prefetching or hoarding of files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请提出了前端增量更新方法、装置及其应用，包括以下步骤：在前端加载一用于增量更新的脚本插件；每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。可以大大减少资源传输时间，提高加载效率，在弱网环境下，减少用户的等待时间。
Description
技术领域
本申请涉及前端开发技术领域，特别是涉及前端增量更新方法、装置及其应用。
背景技术
随着数字经济的不断发展，软件开发行业的前端技术领域，数字化改革的推进，使得网页中需要的功能越来越多，业务也越来越复杂，简单的使用Html，JavaScript脚本及css开发网页，已经无法满足现有的开发节奏。为了能够满足复杂场景的开发需要以及使开发人员能够将注意力集中在业务开发上，前端领域面向业务层框架(vue、react、angular)呈现出多点开花的状态，同时前端工程化也成了前端开发人员所必须具备的能力。前端工程化，即通过第三方工具将本不能被浏览器识别的语言以及各种前端的文件编译为可运行在浏览器的脚本。这种工程化的开发方式可以大大提高前端开发人员的开发效率，帮助开发人员解决浏览器兼容、文件压缩等问题。但是随着业务量的增加，前端的静态资源体积变得越来越大，每次更新时需要的网络流量消耗也跟着变大。同时，由于网络环境的限制，比如用户在地铁上，或者电梯中时，经常会遇到弱网环境的情况，用户在进入网页时，需要等待的时间也大大增加，此时就需要使用增量更新方法来解决带宽消耗和更新资源载缓慢的问题。
目前的技术主要是针对整个静态文件的更新，即在文件打包时为每个前端文件加上唯一的版本号，并配置前端的缓存，当浏览器发起资源请求时会去判断浏览器中的本地的资源版本号与服务端的版本是否一致，不一致则拉取服务端的最新资源，并覆盖本地的资源，这种更新方式是文件级别的，缺点在于每次修改某个文件的一小部分代码，打包部署后，客户端均会拉取一整个文件进行资源更新，比如开发只更新了a.js中的某一行代码，但是客户端更新资源的时候，仍然会拉取整个文件进行更新，这种文件级别的更新会造成流量的浪费，更新效率低。
因此，亟待一种前端增量更新方法、装置及其应用，可以大大减少资源传输时间，提高加载效率，在弱网环境下，减少用户的等待时间。
发明内容
本申请实施例提供了前端增量更新方法、装置及其应用，针对目前技术资源浪费、加载效率低以及用户等待时间长的问题。
本发明核心技术主要是从服务端会获取经过对比之后的文件差异字符串，并在浏览器端拼接最新的文件更改，这种方式是字符级的。
第一方面，本申请提供了前端增量更新方法，所述方法包括以下步骤：
S00、在前端加载一用于增量更新的脚本插件；
S10、每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；
S20、若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；
其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
S30、增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。
进一步地，S10步骤中，通过Axios读取本地的缓存文件，以获取缓存在本地的当前版本号以及对应的文件内容。通过Axios读取本地缓存文件，可以实现版本比对、节省网络请求、加快页面加载速度、离线访问支持以及减轻服务器负载等效果，从而提升用户体验和优化前端性能。使用Axios，开发者可以通过简单的API调用发送HTTP请求，并处理来自服务器的响应。它还提供了一些便利的方法来设置请求头、请求参数、超时时间等。
进一步地，S30步骤中，通过接收本地缓存字符串和增量字符串作为参数，并通过查找差异字符串中的差异字符，对字符串进行增删改操作，以返回新的字符串作为新的资源。通过对本地缓存字符串和增量字符串的处理，可以减少数据传输量、减少服务器压力，实现快速更新、节省客户端存储空间和精确更新等效果，从而提升前端更新效率和优化用户体验。
进一步地，S20步骤中，服务端监听静态资源的变化并通过计算变动文件的增量字符串，以文件名为键，差异化字符作为值，同时加入版本信息，生成json文件。通过监听静态资源的变化，服务端可以捕获文件的差异化字符并将其与文件名关联。将这些差异化字符和文件名组合成JSON文件，提供给前端以获取增量更新的信息。
进一步地，S20步骤中，通过myers diff算法计算变动文件的增量字符串。Myersdiff算法是一种高效的差异计算算法，它可以快速地识别出文件的差异部分，减少了计算所需的时间和资源。相比于其他差异计算算法，Myers diff算法具有较低的时间和空间复杂度。通过应用Myers diff算法计算变动文件的增量字符串可以实现高效的差异计算、减少数据传输量、精确的增量更新、快速更新速度和节省存储空间等效果，从而优化前端增量更新流程和提升用户体验。
进一步地，版本信息的命名规则为主版本号+次版本号+补丁版本号。可以实现清晰的版本标识、版本控制和管理、版本比较和升级、兼容性管理以及符合语义化版本控制规范的效果，有助于开发者和用户更好地理解和管理软件的版本信息，最重要的是方便进行版本号对比，减少计算量。
进一步地，服务端在每次打包资源时，对每个资源添加版本信息和固定Hash值。即使输入数据发生微小的改动，Hash值也会发生巨大的变化，因此通过比对Hash值就可以得出资源发生变化，可保证服务端字符串的比较效率。
第二方面，本申请提供了一种前端增量更新装置，包括：
加载模块，在前端加载一用于增量更新的脚本插件；
脚本插件模块，每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
增量更新模块，增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。
第三方面，本申请提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的前端增量更新方法。
第四方面，本申请提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据上述的前端增量更新方法。
本发明的主要贡献和创新点如下：1、与现有技术相比，本申请通过客户端(网页)请求服务端增量字符串从而更新文件的方式，减少了每次网络请求资源时带宽的消耗，因为每次请求时较少的数据量返回以及本地缓存的合理利用，使得页面的加载速度显著提高；
2、与现有技术相比，本申请不同于现有的app端进行更新的方式(app端的开发语言天然具备对文件的读写能力)，由于前端的javascript是不具备直接修改文件能力，因此采用的是先读取文件的内容(这个内容即代码字符串)。再对代码字符串做增量更新，更新完后，通过往前端的html页面插入最新字符串的形式完成更新。
本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例的前端增量更新方法的结构图；
图2是根据本申请实施例的客户端增量更新方法示意图；
图3是根据本申请实施例的服务端增量更新方法示意图；
图4是根据本申请实施例的upgradejs更新资源方法示意图；
图5是根据本申请实施例的增量脚本方法示意图；
图6是本申请与现有技术的加载时间对比图；
图7是根据本申请实施例的电子装置的硬件结构示意图。
具体实施方式
这里将详细的对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
现有的技术主要是针对整个静态文件的更新，即在文件打包时为每个前端文件加上唯一的版本号，并配置前端的缓存，当浏览器发起资源请求时会去判断浏览器中的本地的资源版本号与服务端的版本是否一致，不一致则拉取服务端的最新资源，并覆盖本地的资源，这种更新方式是文件级别的，缺点在于每次修改某个文件的一小部分代码，打包部署后，客户端均会拉取一整个文件进行资源更新，比如开发只更新了a.js中的某一行代码，但是客户端更新资源的时候，仍然会拉取整个文件进行更新，这种文件级别的更新会造成流量的浪费，更新效率低。
基于此，本发明基于字符串的增量更新来解决现有技术存在的问题。
实施例一
本申请旨在提出一种前端增量更新方法，可以显著提高加载效率，具体地，参考图4，所述方法包括以下步骤：
S00、在前端加载一用于增量更新的脚本插件；
在本实施例中，为了能够同步增量更新，需要在前端加载一个upgradejs的插件。其中，upgradejs：为实现本发明核心功能而开发的前端增量更新脚本。如图1所示，本申请的架构图包括客户端101、服务端102，客户端101向服务端102请求更新资源，服务端返回更新的json文件。
S10、每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；
在本实施例中，upgradejs插件会在每次资源加载时获取最新的版本号和缓存在本地的当前版本号，将两者进行匹配。即在每次前端页面加载时，upgradejs会先从本地获取缓存版本，并发起http请求，请求服务端对应接口，获取增量信息json，该增量json中包含了版本信息与增量信息，此处通过对比缓存信息与增量信息的版本差异来判断是否需要增量更新，此处需要说明的是，版本信息命名遵循semver规范，版本格式为：major.minor.patch(主版本号.次版本号.补丁版本号，如1.2.3，1.3.0)。其中，缓存文件：即前端缓存文件，浏览器在请求静态资源后会默认在本地缓存下静态文件，如果静态文件没有更新，则默认从缓存文件中取资源。
优选地，缓存文件读取方法需要用到Axios(一种基于XmlHttpRequest封装后的前端请求方法，也是一个基于Promise的HTTP客户端库，用于在浏览器和Node.js中发起HTTP请求)，由Axios向需要更新的本地缓存资源发起请求，并获取对应blob值，使用FileReader对象处理blob值，并返回对应文件的文本内容。
S20、若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；
其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
在本实施例中，每次页面刷新时，upgradejs获取服务端版本号并与本地缓存中的版本进行对比，如果服务端的版本大于本地的版本，则说明文件需要更新，此时从服务端获取增量更新的字符串以及需要更新文件名。同时，upgradejs通过文件读取方法，从浏览器缓存中读取对应的文件内容，在读取到文件内容后，需要通过applyDiff方法(增量脚本方法)，将增量字符于更新到对应的文件中。
其中，applyDiff方法通过接收本地缓存字符串oldStr和增量字符串diff作为参数，在函数内部，通过查找差异字符串中的差异字符，根据myers diff差异化算法的规则，对字符串做增删改的操作，并返回新字符串。applyDiff的第二个参数为增量字符串diff，该字符串需要从服务端获取。该增量脚本方法监听静态资源的变化，并计算增量字符。这里需要明确的是，为了保证脚本计算增量字符的正确性，每次前端打包时产生的静态文件名称需要固定。
在本实施例中，服务端响应于客户端(网页)的请求，通过myers diff差异化算法，计算变动文件的增量字符串，并以文件名作为键(key值),差异化字符串作为值(value值)，同时加入版本信息，生成json文件，用于客户端请求时返回。如图3所示，服务端102的计算增量更新的方法中，静态资源301被监听，通过增量脚本302生成json文件303，流场图如图5所示。
其中，myers diff差异化算法：Myers差分算法或者称为Myers Diff Algorithm，其中的Myers是指发表该算法的作者；差分是英文Diff的直译，也可以理解为差别、区别；算法即为Algorithm。该算法解决了LCS的等价问题SES，其在git diff、DNA序列比较等场景中都被广泛使用。假设需要生成从字符串‘abcdef’到‘acdz’的增量补丁，那么补丁的表现形式如下：
＝1\t-1\t＝2\t-3\t+z。
S30、增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器的localstorage(一种浏览器持久化存储方式，以键值对的形式保存数据)中。
如图2所示，本申请的客户端101增量更新流程中，缓存文件201经过增量合并202后更新到前端页面203中。
如此，增量字符串在静态资源部署时获取，其架构图如图3所示，当静态资源301部署到服务器后，会启动增量计算脚本302，增量脚本计算文件差异，获取版本信息，并生成增量JSON 303文件，增量脚本运行流程如图5所示，当脚本监听到静态资源部署后，会检查文件是否更新，如果更新则使用diff算法获取增量字符串，如果文件未更新，则结束运行。diff算法基于myers diff差异化算法实现，通过计算字符串的长度‘n’和‘m’，然后构建编辑路径矩阵‘v’，并使用一个二维列表来表示矩阵，将每个差异元素‘v[d][k]’存储在编辑路径中的特定位置，然后计算最短编辑路径。通过遍历不同的距离‘d’和偏移量‘k’来更新‘x’和‘y’的值。并检查字符串是否匹配，当‘x’和‘y’超出字符串长度时，说明已经计算出最短编辑路径，此时返回差异结果。
如图6所示，将测试环境的网速切换至低速3G网，以使用缓存和不使用缓存作为对照(即在弱网环境下，同一个文件，使用全量更新时文件的加载速度，和使用增量更新方法时文件的加载速度的对比。因为全量更新是直接从服务器更新资源，而本方案利用了浏览器缓存，并使用本方案的增量更新方法更新资源，所以在弱网环境下，加载速度更快。并且后面每次小版本更新时，资源加载都会默认走增量更新方法)。对一个2MB文件进行加载测试，可以发现，得益于缓存的使用，采用本申请方法的资源在重新加载后，加载速度由44.08秒提升至12.36秒，性能提升70％左右。其中，图6中第一栏是经过打包后的js资源文件，第二栏代表http请求的资源获取成功的状态码；第三栏表示该请求资源的文件类型；第四栏表示启动器；第五栏表示文件的大小，第六栏表示获取该资源用了多少时间。上下两个对照，表示低速3G网络下，使用缓存和不使用缓存的对比。
实施例二
基于相同的构思，本申请还提出了一种前端增量更新装置，包括：
加载模块，在前端加载一用于增量更新的脚本插件；
脚本插件模块，每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
增量更新模块，增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。
实施例三
本实施例还提供了一种电子装置，参考图7，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
具体地，上述处理器402可以包括中央处理器(CPU)，或者特定集成电路(ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。
其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(HardDiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(Non-Volatile)存储器。在特定实施例中，存储器404包括只读存储器(Read-OnlyMemory，简称为ROM)和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemo ry，简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(ElectricallyErasableProgrammableRead-Onl yMemory，简称为EEPROM)、电可改写ROM(ElectricallyAlterableRead-Only Memory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(StaticRandom-Acc essMemory，简称为SRAM)或动态随机存取存储器(DynamicRandomAccessM emory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器404(FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(ExtendedDateOutDynamicRandomAccessMe mory，简称为EDODRAM)、同步动态随机存取内存(SynchronousDynamicRa ndom-AccessMemory，简称SDRAM)等。
存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。
处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意前端增量更新方法。
可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。
传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。
输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是增量更新请求等，输出的信息可以是增量更新结果等。
实施例四
本实施例还提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据实施例一的前端增量更新方法。
需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。
本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。
本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以作出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。
Claims (10)
1.前端增量更新方法，其特征在于，包括以下步骤：
S00、在前端加载一用于增量更新的脚本插件；
S10、每当前端加载资源时，通过所述脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；
S20、若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；
其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
S30、增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。
2.如权利要求1所述的前端增量更新方法，其特征在于，S10步骤中，通过Axios读取本地的缓存文件，以获取缓存在本地的当前版本号以及对应的文件内容。
3.如权利要求1所述的前端增量更新方法，其特征在于，S30步骤中，通过接收本地缓存字符串和增量字符串作为参数，并通过查找差异字符串中的差异字符，对字符串进行增删改操作，以返回新的字符串作为新的资源。
4.如权利要求1所述的前端增量更新方法，其特征在于，S20步骤中，服务端监听静态资源的变化并通过计算变动文件的增量字符串，以文件名为键，差异化字符作为值，同时加入版本信息，生成json文件。
5.如权利要求4所述的前端增量更新方法，其特征在于，S20步骤中，通过myers diff算法计算变动文件的增量字符串。
6.如权利要求1-5任意一项所述的前端增量更新方法，其特征在于，所述版本信息的命名规则为主版本号+次版本号+补丁版本号。
7.如权利要求1-5任意一项所述的前端增量更新方法，其特征在于，所述服务端在每次打包资源时，对每个资源添加版本信息和固定Hash值。
8.一种前端增量更新装置，其特征在于，包括：
加载模块，在前端加载一用于增量更新的脚本插件；
脚本插件模块，每当前端加载资源时，通过脚本插件获取资源的最新版本号和缓存在本地的当前版本号，并进行比对；若相同，则使用已缓存的资源进行加载；若不同，则向服务端请求增量更新，以获取增量更新的字符串和需要更新的文件名；若无版本信息，则向服务端请求全量更新，得到新的资源并更新到前端页面中；其中，获取的增量更新的字符串和需要更新的文件名以json文件形式传输；
增量更新模块，增量更新时，依据获取的字符串和需要更新的文件名，将获取的增量补丁以及对应的旧文件合并生成新的资源并更新到前端页面中，同时将最新的版本号存入用户的客户端浏览器中。
9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至7任一项所述的前端增量更新方法。
10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至7任一项所述的前端增量更新方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310906884.6A CN116909613A (zh) | 2023-07-21 | 2023-07-21 | 前端增量更新方法、装置及其应用 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310906884.6A CN116909613A (zh) | 2023-07-21 | 2023-07-21 | 前端增量更新方法、装置及其应用 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116909613A true CN116909613A (zh) | 2023-10-20 |
Family
ID=88352760
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310906884.6A Pending CN116909613A (zh) | 2023-07-21 | 2023-07-21 | 前端增量更新方法、装置及其应用 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116909613A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117827261A (zh) * | 2024-03-06 | 2024-04-05 | 暗物智能科技(广州)有限公司 | 基于字符串的Electron应用增量更新方法、系统、介质及终端 |
-
2023
- 2023-07-21 CN CN202310906884.6A patent/CN116909613A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117827261A (zh) * | 2024-03-06 | 2024-04-05 | 暗物智能科技(广州)有限公司 | 基于字符串的Electron应用增量更新方法、系统、介质及终端 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8910115B2 (en) | Systems and methods for application development | |
| CN109388766B (zh) | 页面加载的方法和装置 | |
| KR102036392B1 (ko) | 스크립트 파일 의존관계 및 로드 시점 관리 기법 | |
| US8752016B2 (en) | Converting JavaScript into a device-independent representation | |
| CN109710185B (zh) | 数据处理方法及装置 | |
| US8799889B2 (en) | Application downloading | |
| CN105740330B (zh) | 分页展示数据的方法及装置 | |
| US20120317363A1 (en) | Memory Caching for Browser Processes | |
| CN116909613A (zh) | 前端增量更新方法、装置及其应用 | |
| CN111444455A (zh) | 浏览器兼容方法、系统、计算机设备及存储介质 | |
| CN110895471A (zh) | 安装包生成方法、装置、介质及电子设备 | |
| CN112612982A (zh) | 网页预加载方法、装置及计算机设备 | |
| CN115964094A (zh) | 一种混合移动应用本地开发的资源加载方法及装置 | |
| CN113535211B (zh) | 应用程序更新方法、装置、计算机设备及存储介质 | |
| CN111107133A (zh) | 差异包的生成方法、数据更新方法、装置和存储介质 | |
| KR101851357B1 (ko) | 코드 캐싱 시스템 | |
| CN110020370B (zh) | 在客户端应用中实现动画的方法、装置及动画脚本的框架 | |
| CN113342419A (zh) | 一种推送系统加载方法、装置、电子设备及存储介质 | |
| CN115830191B (zh) | 自动驾驶仿真测试场景动画视频生成方法及相关装置 | |
| CN110209973A (zh) | 一种网页游戏加载方法及装置 | |
| CN113934954A (zh) | 应用程序中的网页首屏渲染方法及装置 | |
| CN113849248B (zh) | 小程序加载方法、设备、存储介质及程序产品 | |
| CN109783756B (zh) | 一种网站的创建方法、服务器及计算机可读存储介质 | |
| CN110769060A (zh) | 基于跨域对象依赖关系的Web页面加载速度优化方法 | |
| CN116360975A (zh) | 一种对热区内根节点dom元素进行缓存的方法、装置及应用 |
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 |