CN113315822B - 一种前后端分离架构下的页面静态化方法与*** - Google Patents

一种前后端分离架构下的页面静态化方法与*** Download PDF

Info

Publication number
CN113315822B
CN113315822B CN202110556912.7A CN202110556912A CN113315822B CN 113315822 B CN113315822 B CN 113315822B CN 202110556912 A CN202110556912 A CN 202110556912A CN 113315822 B CN113315822 B CN 113315822B
Authority
CN
China
Prior art keywords
page
data
static
target page
request
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.)
Active
Application number
CN202110556912.7A
Other languages
English (en)
Other versions
CN113315822A (zh
Inventor
刘德建
王杰光
陈宏�
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Tianquan Educational Technology Ltd
Original Assignee
Fujian Tianquan Educational Technology Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Fujian Tianquan Educational Technology Ltd filed Critical Fujian Tianquan Educational Technology Ltd
Priority to CN202110556912.7A priority Critical patent/CN113315822B/zh
Publication of CN113315822A publication Critical patent/CN113315822A/zh
Application granted granted Critical
Publication of CN113315822B publication Critical patent/CN113315822B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • 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
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L47/00—Traffic control in data switching networks
    • H04L47/10—Flow control; Congestion control
    • 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
    • Y02D30/00—Reducing energy consumption in communication networks
    • Y02D30/50—Reducing energy consumption in communication networks in wire-line communication networks, e.g. low power modes or reduced link rate

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)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种前后端分离架构下的页面静态化方法，本发明客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点；CDN接入点接收页面获取请求，并返回目标页面静态化数据，目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；客户端接收目标页面静态化数据，在浏览器执行HTML文件中的JS代码从而向后端服务器发起数据获取请求时，请求拦截SDK拦截数据获取请求，并调用页面数据包中对应的数据作为数据获取请求的返回数据；客户端根据返回数据对目标页面进行渲染；本发明在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过内容分发网络来向客户端返回页面数据，能够有效减轻了服务器压力。

Description

一种前后端分离架构下的页面静态化方法与***
技术领域
本发明涉及计算机软件技术领域，特别涉及一种前后端分离架构下的页面静态化方法与***。
背景技术
在前后端分离的架构下，Web前端独立开发和部署，用户在访问Web页面时，页面中的前端JS(JavaScript，一种具有函数优先的轻量级，解释型或即时编译型的编程语言)代码会在页面加载过程中调用后端服务API(Application Programming Interface，应用程序编程接口)获取数据。在大并发下，后端服务就会承载大量的访问压力。如果峰值访问量超过服务承载能力，就会导致***崩溃，服务不可用的严重后果。
而针对上述问题，可以采用的技术方案是利用HTTP(Hypertext TransferProtocol，超文本传输协议)协议的Cache-Control(缓存控制)机制，后端服务在API调用的返回中设置缓存过期时间。Cache-Control可以在API网关和客户端浏览器生效，即在API网关和浏览器本地可以生成本地缓存，在缓存有效期内，可以直接返回结果数据，从而减少到达后端服务的请求量。这个技术方案有一定的效果，但是仍然存在一定的不足：
在大量独立用户访问的情况下，客户端浏览器的缓存作用不大，服务端API网关需要承载大量的峰值并发，可能造成过大的磁盘I/O(Input/Output，输入/输出)压力和网络带宽压力，甚至造成整个机房网络堵塞。
发明内容
本发明所要解决的技术问题是：提供一种前后端分离架构下的页面静态化方法与***，能够有效减轻服务器压力。
为了解决上述技术问题，本发明采用的技术方案为：
一种前后端分离架构下的页面静态化方法，包括：
S1、客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S2、CDN接入点接收所述页面获取请求，并返回目标页面静态化数据，所述目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；
S3、客户端接收所述目标页面静态化数据，在浏览器执行所述HTML文件中的JS代码从而向后端服务器发起数据获取请求时，所述请求拦截SDK拦截所述数据获取请求，并调用所述页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、客户端根据所述返回数据对所述目标页面进行渲染。
为了解决上述技术问题，本发明采用的另一种技术方案为：
一种前后端分离架构下的页面静态化***，包括客户端和CDN接入点，所述客户端与所述CDN接入点通信连接，所述客户端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，所述CDN接入点包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S3、接收目标页面静态化数据，在浏览器执行HTML文件中的JS代码从而向后端服务器发起数据获取请求时，请求拦截SDK拦截所述数据获取请求，并调用页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、根据所述返回数据对所述目标页面进行渲染；
所述第二处理器执行所述第二计算机程序时实现以下步骤：
S2、接收所述页面获取请求，并返回所述目标页面静态化数据，所述目标页面静态化数据包括注入了所述请求拦截SDK的所述HTML文件以及所述页面数据包。
本发明的有益效果在于：本发明通过请求拦截SDK，使得在页面JS代码运行时能够模拟后台数据返回，从而在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过域名绑定的内容分发网络接入点来对客户端的访问进行页面数据返回，能够有效减轻了服务器压力。
附图说明
图1为本发明实施例的一种前后端分离架构下的页面静态化方法的流程图；
图2为本发明实施例的一种前后端分离架构下的页面静态化方法的序列图；
图3为本发明实施例的一种前后端分离架构下的页面静态化***的结构图；
标号说明：
1、一种前后端分离架构下的页面静态化***；2、客户端；3、CDN接入点；4、第一处理器；5、第一存储器；6、第二处理器；7、第二存储器。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
请参照图1以及图3，一种前后端分离架构下的页面静态化方法，包括：
S1、客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S2、CDN接入点接收所述页面获取请求，并返回目标页面静态化数据，所述目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；
S3、客户端接收所述目标页面静态化数据，在浏览器执行所述HTML文件中的JS代码从而向后端服务器发起数据获取请求时，所述请求拦截SDK拦截所述数据获取请求，并调用所述页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、客户端根据所述返回数据对所述目标页面进行渲染。
从上述描述可知，本发明的有益效果在于：本发明通过请求拦截SDK，使得在页面JS代码运行时能够模拟后台数据返回，从而在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过域名绑定的内容分发网络接入点来对客户端的访问进行页面数据返回，能够有效减轻了服务器压力。
进一步地，所述步骤S2具体为：
CDN接入点接收所述页面获取请求，判断是否存储有未过期的所述目标页面的所述页面静态化数据，若存在则返回所述页面静态化数据，否则向所述后端服务器发起回源请求，接收所述后端服务器返回的所述目标页面的动态页面内容，并向客户端返回所述动态页面内容，同时执行步骤S21；
S21、CDN接入点启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据。
由上述描述可知，CDN接入点在返回页面静态化数据前需要判断是否有目标页面的未过期的页面静态化数据，在没有目标页面的页面静态化数据或页面静态化数据已过期的情况下，向后端服务器发送回源请求，并接收后端服务器返回的动态页面数据，将动态页面数据返回到客户端，CDN接入点同时开启页面静态化数据的获取流程，从而保证用户能够获取到有效数据。
进一步地，还包括：
S5、CDN接入点以预设时间间隔后台异步扫描每个所述目标页面静态化数据的生成时间，计算与当前时间的时间差值，并与所述目标页面所声明的有效时长进行比较，若所述时间差值超过所述有效时长则删除所述目标页面静态化数据。
由上述描述可知，CDN接入点还会定期对已存储的页面静态化数据进行扫描，判断是否过期，能够及时删除过期数据。
进一步地，所述步骤S5中所述若所述时间差值超过所述有效时长则删除所述目标页面静态化数据具体为：
若所述时间差值超过所述有效时长，则启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据，并在获取到所述目标页面新的所述目标页面静态化数据后删除当前的所述目标页面静态化数据。
由上述描述可知，在删除过期的页面静态化数据前，启动静态化服务以获取新的页面静态化数据，在获取到新的页面静态化数据后再删除过期的页面静态化数据，保证CDN接入点始终存有页面静态化数据供用户获取。
进一步地，所述启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据具体为：
CDN接入点启动所述静态化服务，所述静态化服务打开一个无头浏览器加载所述目标页面，并在页面中注入静态化拦截SDK，所述无头浏览器执行页面内的JS代码，向所述后端服务器发送数据获取请求；
所述静态化拦截SDK拦截所述后端服务器返回的所有请求数据，按请求的URL为KEY和所述请求数据为Value，对所有所述请求数据进行打包和存储，得到所述页面数据包；
获取目标页面的所述HTML文件，根据所述页面数据包修改所述HTML文件的数据引用源码，同时注入请求拦截SDK，保存所述HTML文件。
由上述描述可知，通过无头浏览器以及一个用于拦截后端服务器返回数据的静态化拦截SDK，获取到了页面所需的后台数据，并在页面的HTML文件中引入请求拦截SDK，从而实现了页面荆条花数据的生成。
请参照图2，一种前后端分离架构下的页面静态化***，包括客户端和CDN接入点，所述客户端与所述CDN接入点通信连接，所述客户端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，所述CDN接入点包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S3、接收目标页面静态化数据，在浏览器执行HTML文件中的JS代码从而向后端服务器发起数据获取请求时，请求拦截SDK拦截所述数据获取请求，并调用页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、根据所述返回数据对所述目标页面进行渲染；
所述第二处理器执行所述第二计算机程序时实现以下步骤：
S2、接收所述页面获取请求，并返回所述目标页面静态化数据，所述目标页面静态化数据包括注入了所述请求拦截SDK的所述HTML文件以及所述页面数据包。
从上述描述可知，本发明的有益效果在于：本发明通过请求拦截SDK，使得在页面JS代码运行时能够模拟后台数据返回，从而在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过域名绑定的内容分发网络接入点来对客户端的访问进行页面数据返回，能够有效减轻了服务器压力。
进一步地，所述步骤S2具体为：
接收所述页面获取请求，判断是否存储有未过期的所述目标页面的所述页面静态化数据，若存在则返回所述页面静态化数据，否则向所述后端服务器发起回源请求，接收所述后端服务器返回的所述目标页面的动态页面内容，并向客户端返回所述动态页面内容，同时执行步骤S21；
S21、启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据。
由上述描述可知，CDN接入点在返回页面静态化数据前需要判断是否有目标页面的未过期的页面静态化数据，在没有目标页面的页面静态化数据或页面静态化数据已过期的情况下，向后端服务器发送回源请求，并接收后端服务器返回的动态页面数据，将动态页面数据返回到客户端，CDN接入点同时开启页面静态化数据的获取流程，从而保证用户能够获取到有效数据。
进一步地，所述第二处理器执行所述第二计算机程序时还包括：
S5、以预设时间间隔后台异步扫描每个所述目标页面静态化数据的生成时间，计算与当前时间的时间差值，并与所述目标页面所声明的有效时长进行比较，若所述时间差值超过所述有效时长则删除所述目标页面静态化数据。
由上述描述可知，CDN接入点还会定期对已存储的页面静态化数据进行扫描，判断是否过期，能够及时删除过期数据。
进一步地，所述步骤S5中所述若所述时间差值超过所述有效时长则删除所述目标页面静态化数据具体为：
若所述时间差值超过所述有效时长，则启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据，并在获取到所述目标页面新的所述目标页面静态化数据后删除当前的所述目标页面静态化数据。
由上述描述可知，在删除过期的页面静态化数据前，启动静态化服务以获取新的页面静态化数据，在获取到新的页面静态化数据后再删除过期的页面静态化数据，保证CDN接入点始终存有页面静态化数据供用户获取。
进一步地，所述启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据具体为：
启动所述静态化服务，所述静态化服务打开一个无头浏览器加载所述目标页面，并在页面中注入静态化拦截SDK，所述无头浏览器执行页面内的JS代码，向所述后端服务器发送数据获取请求；
所述静态化拦截SDK拦截所述后端服务器返回的所有请求数据，按请求的URL为KEY和所述请求数据为Value，对所有所述请求数据进行打包和存储，得到所述页面数据包；
获取目标页面的所述HTML文件，根据所述页面数据包修改所述HTML文件的数据引用源码，同时注入请求拦截SDK，保存所述HTML文件。
由上述描述可知，通过无头浏览器以及一个用于拦截后端服务器返回数据的静态化拦截SDK，获取到了页面所需的后台数据，并在页面的HTML文件中引入请求拦截SDK，从而实现了页面荆条花数据的生成。
请参照图1和图3，本发明的实施例一为：
一种前后端分离架构下的页面静态化方法，包括：
S1、客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定。
本实施例中，预先将网页产品的域名绑定到CDN(Content DeliveryNetwork，内容分发网络)接入点，访问该网页产品的用户在访问时会自动接入CDN接入点，而不会直接访问到网页产品的后端服务器。
S2、CDN接入点接收所述页面获取请求，并返回目标页面静态化数据，所述目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；
所述步骤S2具体为：
CDN接入点接收所述页面获取请求，判断是否存储有未过期的所述目标页面的所述页面静态化数据，若存在则返回所述页面静态化数据，否则向所述后端服务器发起回源请求，接收所述后端服务器返回的所述目标页面的动态页面内容，并向客户端返回所述动态页面内容，同时执行步骤S21；
S21、CDN接入点启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据。
本实施例中，CDN接入点在收到用户的客户端设备发送的页面获取请求时，会先判断是否存在该页面未过期的页面静态化数据，若存在则返回已注入请求拦截SDK(SoftwareDevelopment Kit，软件开发工具包)的页面的HTML文件，并根据页面的HTML文件中的代码，返回页面数据包；若不存在未过期的页面静态化数据，则向后端服务器的API网关发送回源请求，将后端服务器返回的动态页面(此页面内容CDN接入点不作静态化处理和缓存)返回给客户端设备，在返回动态页面的同时，***通知静态化服务，异步执行指定的页面的静态化操作，并将静态化的结果保存在指定位置。
S3、客户端接收所述目标页面静态化数据，在浏览器执行所述HTML文件中的JS代码从而向后端服务器发起数据获取请求时，所述请求拦截SDK拦截所述数据获取请求，并调用所述页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、客户端根据所述返回数据对所述目标页面进行渲染。
本实施例中，客户端从CDN接入点加载到注入了请求拦截SDK的HTML文件，以及页面数据包。在浏览器渲染页面时，会运行页面上的JS代码，JS代码按照正常逻辑执行，会向后端服务器的发送数据获取的API请求。此时***SDK会拦截页面上所有向外发起的API请求，并根据请求的URL从页面数据包中获取对应的API返回数据，模拟正常的API调用返回给页面，页面的JS代码获取到返回数据后，按照正常的业务逻辑执行页面渲染。
S5、CDN接入点以预设时间间隔后台异步扫描每个所述目标页面静态化数据的生成时间，计算与当前时间的时间差值，并与所述目标页面所声明的有效时长进行比较，若所述时间差值超过所述有效时长则删除所述目标页面静态化数据；
所述步骤S5中所述若所述时间差值超过所述有效时长则删除所述目标页面静态化数据具体为：
若所述时间差值超过所述有效时长，则启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据，并在获取到所述目标页面新的所述目标页面静态化数据后删除当前的所述目标页面静态化数据。
本实施例中，CDN接入点以预设的时间间隔执行一个异步任务来扫描页面静态化数据的静态化生成时间与当前时间的差值，并与页面所声明的静态化有效时长作比较，若超出有效时长则页面静态化数据已过期，需要对其进行删除。在实际执行时，为避免刚到达有效期就删除的页面静态化数据刚好是当前的热点页面，从而造成大量用户的请求均需要向后端服务器获取动态页面，从而造成瞬时压力，可以暂时保留过期页面，并先开启页面静态化数据的获取流程，在获取到新的页面静态化数据后再删除过期的页面静态化数据，对于获取期间的用户请求，可以先以已过期的页面静态化数据进行返回。
所述启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据具体为：
CDN接入点启动所述静态化服务，所述静态化服务打开一个无头浏览器加载所述目标页面，并在页面中注入静态化拦截SDK，所述无头浏览器执行页面内的JS代码，向所述后端服务器发送数据获取请求；
所述静态化拦截SDK拦截所述后端服务器返回的所有请求数据，按请求的URL为KEY和所述请求数据为Value，对所有所述请求数据进行打包和存储，得到所述页面数据包；
获取目标页面的所述HTML文件，根据所述页面数据包修改所述HTML文件的数据引用源码，同时注入请求拦截SDK，保存所述HTML文件。
本实施例中，在需要重新获取页面静态化数据时，所执行的获取流程具体如下：
A、CDN接入点启动所述静态化服务，静态化服务在一个无头浏览器(内存中的浏览器对象，没有界面)中加载目标页面，在页面(得到的HTML文件)内注入静态化拦截SDK，并执行页面内的JS代码，向后端服务发起API请求获取数据；
B、静态化拦截SDK拦截所有API请求得到的返回数据，并将页面上所有API请求的返回数据打包，页面上发起的多个API请求，按请求的URL为Key和返回数据为Value,打包成一个数据对象(即页面数据包)，并按预设的存储路径规则进行存储；
C、获取目标页面的HTML文件，修改HTML文件内的源码，注入对步骤B中获取到的数据对应的引用，同时注入运行时拦截请求的请求拦截SDK，并进行存储。
通过以上技术方案，业务无侵入地对前后端分离的页面作预渲染，将页面及静态化数据保存。通过静态化拦截SDK的使用和请求拦截SDK的注入，实现数据请求的静态化和运行时模拟返回数据，在不影响正常前端开发而实现通用的静态化方案的效果。
请参照图2，本发明的实施例二为：
一种前后端分离架构下的页面静态化***1，包括客户端2和CDN接入点3，所述客户端2与所述CDN接入点3通信连接，所述客户端2包括第一存储器4、第一处理器5及存储在第一存储器5上并可在第一处理器4上运行的第一计算机程序，所述CDN接入点包括第二存储器6、第二处理器7及存储在第二存储器7上并可在第二处理器6上运行的第二计算机程序，所述第一处理器4执行所述第一计算机程序以及所述第二处理器6执行所述第二计算机程序时实现以上实施例一中的步骤。
综上所述，本发明提供的一种前后端分离架构下的页面静态化方法与***，通过请求拦截SDK，使得在页面JS代码运行时能够模拟后台数据返回，从而在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过域名绑定的内容分发网络接入点来对客户端的访问进行页面数据返回，在大并发时，让用户流量足够分散，极大地减轻了后端服务的压力。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (4)

1.一种前后端分离架构下的页面静态化方法，其特征在于，包括：
S1、客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S2、CDN接入点接收所述页面获取请求，并返回目标页面静态化数据，所述目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；
S3、客户端接收所述目标页面静态化数据，在浏览器执行所述HTML文件中的JS代码从而向后端服务器发起数据获取请求时，所述请求拦截SDK拦截所述数据获取请求，并调用所述页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、客户端根据所述返回数据对所述目标页面进行渲染；
S5、CDN接入点以预设时间间隔后台异步扫描每个所述目标页面静态化数据的生成时间，计算与当前时间的时间差值，并与所述目标页面所声明的有效时长进行比较，若所述时间差值超过所述有效时长则删除所述目标页面静态化数据；
所述步骤S5中所述若所述时间差值超过所述有效时长则删除所述目标页面静态化数据具体为：
若所述时间差值超过所述有效时长，则启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据，并在获取到所述目标页面新的所述目标页面静态化数据后删除当前的所述目标页面静态化数据；
所述启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据具体为：
CDN接入点启动所述静态化服务，所述静态化服务打开一个无头浏览器加载所述目标页面，并在页面中注入静态化拦截SDK，所述无头浏览器执行页面内的JS代码，向所述后端服务器发送数据获取请求；
所述静态化拦截SDK拦截所述后端服务器返回的所有请求数据，按请求的URL为KEY和所述请求数据为Value，对所有所述请求数据进行打包和存储，得到所述页面数据包；
获取目标页面的所述HTML文件，根据所述页面数据包修改所述HTML文件的数据引用源码，同时注入请求拦截SDK，保存所述HTML文件。
2.根据权利要求1所述的一种前后端分离架构下的页面静态化方法，其特征在于，所述步骤S2具体为：
CDN接入点接收所述页面获取请求，判断是否存储有未过期的所述目标页面的所述页面静态化数据，若存在则返回所述页面静态化数据，否则向所述后端服务器发起回源请求，接收所述后端服务器返回的所述目标页面的动态页面内容，并向客户端返回所述动态页面内容，同时执行步骤S21；
S21、CDN接入点启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据。
3.一种前后端分离架构下的页面静态化***，包括客户端和CDN接入点，所述客户端与所述CDN接入点通信连接，所述客户端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，所述CDN接入点包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，其特征在于，所述第一处理器执行所述第一计算机程序时实现以下步骤：
S1、访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；
S3、接收目标页面静态化数据，在浏览器执行HTML文件中的JS代码从而向后端服务器发起数据获取请求时，请求拦截SDK拦截所述数据获取请求，并调用页面数据包中对应的数据作为所述数据获取请求的返回数据；
S4、根据所述返回数据对所述目标页面进行渲染；
所述第二处理器执行所述第二计算机程序时实现以下步骤：
S2、接收所述页面获取请求，并返回所述目标页面静态化数据，所述目标页面静态化数据包括注入了所述请求拦截SDK的所述HTML文件以及所述页面数据包；
S5、CDN接入点以预设时间间隔后台异步扫描每个所述目标页面静态化数据的生成时间，计算与当前时间的时间差值，并与所述目标页面所声明的有效时长进行比较，若所述时间差值超过所述有效时长则删除所述目标页面静态化数据；
所述步骤S5中所述若所述时间差值超过所述有效时长则删除所述目标页面静态化数据具体为：
若所述时间差值超过所述有效时长，则启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据，并在获取到所述目标页面新的所述目标页面静态化数据后删除当前的所述目标页面静态化数据；
所述启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据具体为：
CDN接入点启动所述静态化服务，所述静态化服务打开一个无头浏览器加载所述目标页面，并在页面中注入静态化拦截SDK，所述无头浏览器执行页面内的JS代码，向所述后端服务器发送数据获取请求；
所述静态化拦截SDK拦截所述后端服务器返回的所有请求数据，按请求的URL为KEY和所述请求数据为Value，对所有所述请求数据进行打包和存储，得到所述页面数据包；
获取目标页面的所述HTML文件，根据所述页面数据包修改所述HTML文件的数据引用源码，同时注入请求拦截SDK，保存所述HTML文件。
4.根据权利要求3所述的一种前后端分离架构下的页面静态化***，其特征在于，所述步骤S2具体为：
接收所述页面获取请求，判断是否存储有未过期的所述目标页面的所述页面静态化数据，若存在则返回所述页面静态化数据，否则向所述后端服务器发起回源请求，接收所述后端服务器返回的所述目标页面的动态页面内容，并向客户端返回所述动态页面内容，同时执行步骤S21；
S21、启动静态化服务，获取并保存所述目标页面新的所述页面静态化数据。
CN202110556912.7A 2021-05-21 2021-05-21 一种前后端分离架构下的页面静态化方法与*** Active CN113315822B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110556912.7A CN113315822B (zh) 2021-05-21 2021-05-21 一种前后端分离架构下的页面静态化方法与***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110556912.7A CN113315822B (zh) 2021-05-21 2021-05-21 一种前后端分离架构下的页面静态化方法与***

Publications (2)

Publication Number Publication Date
CN113315822A CN113315822A (zh) 2021-08-27
CN113315822B true CN113315822B (zh) 2023-06-20

Family

ID=77374015

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110556912.7A Active CN113315822B (zh) 2021-05-21 2021-05-21 一种前后端分离架构下的页面静态化方法与***

Country Status (1)

Country Link
CN (1) CN113315822B (zh)

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106933817A (zh) * 2015-12-29 2017-07-07 华为技术有限公司 一种基于b/s结构的内容查询方法及设备、***
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置
CN108804707A (zh) * 2018-06-21 2018-11-13 腾讯科技（深圳）有限公司 一种页面处理方法、装置以及相关设备
CN108881396A (zh) * 2018-05-24 2018-11-23 平安普惠企业管理有限公司 网络数据的加载方法、装置、设备和计算机存储介质
CN109446392A (zh) * 2018-09-03 2019-03-08 中新网络信息安全股份有限公司 一种基于无界面浏览器和可配置代理拦截的网页抓取***及抓取方法
CN110287432A (zh) * 2019-06-28 2019-09-27 北京金山安全软件有限公司 网络信息处理方法、装置和电子设备
CN110750255A (zh) * 2019-09-25 2020-02-04 支付宝(杭州)信息技术有限公司 一种小程序渲染方法和装置
CN110990731A (zh) * 2019-10-12 2020-04-10 平安国际智慧城市科技股份有限公司 一种静态网页的渲染方法、装置、设备及计算机存储介质
CN110990736A (zh) * 2019-12-05 2020-04-10 秒针信息技术有限公司 页面加载方法、装置、终端设备和存储介质
CN111259283A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 一种页面资源预加载的处理方法及装置，电子和存储设备
CN111708600A (zh) * 2020-08-20 2020-09-25 腾讯科技（深圳）有限公司 页面显示方法、装置、设备及计算机可读存储介质
CN111898059A (zh) * 2019-05-06 2020-11-06 千寻位置网络有限公司 网站页面质量评估和监控方法及其***

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11412056B2 (en) * 2019-09-03 2022-08-09 Netflix, Inc. Techniques for proxying network requests using service workers

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106933817A (zh) * 2015-12-29 2017-07-07 华为技术有限公司 一种基于b/s结构的内容查询方法及设备、***
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置
CN108881396A (zh) * 2018-05-24 2018-11-23 平安普惠企业管理有限公司 网络数据的加载方法、装置、设备和计算机存储介质
CN108804707A (zh) * 2018-06-21 2018-11-13 腾讯科技（深圳）有限公司 一种页面处理方法、装置以及相关设备
CN109446392A (zh) * 2018-09-03 2019-03-08 中新网络信息安全股份有限公司 一种基于无界面浏览器和可配置代理拦截的网页抓取***及抓取方法
CN111259283A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 一种页面资源预加载的处理方法及装置，电子和存储设备
CN111898059A (zh) * 2019-05-06 2020-11-06 千寻位置网络有限公司 网站页面质量评估和监控方法及其***
CN110287432A (zh) * 2019-06-28 2019-09-27 北京金山安全软件有限公司 网络信息处理方法、装置和电子设备
CN110750255A (zh) * 2019-09-25 2020-02-04 支付宝(杭州)信息技术有限公司 一种小程序渲染方法和装置
CN110990731A (zh) * 2019-10-12 2020-04-10 平安国际智慧城市科技股份有限公司 一种静态网页的渲染方法、装置、设备及计算机存储介质
CN110990736A (zh) * 2019-12-05 2020-04-10 秒针信息技术有限公司 页面加载方法、装置、终端设备和存储介质
CN111708600A (zh) * 2020-08-20 2020-09-25 腾讯科技（深圳）有限公司 页面显示方法、装置、设备及计算机可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
企业网站访问缓慢的解决方案;欧阳菲菲;徐延儒;;信息与电脑(理论版)(12);全文 *

Also Published As

Publication number Publication date
CN113315822A (zh) 2021-08-27

Similar Documents

Publication Publication Date Title
US6370687B1 (en) Network computer system and substitute compile server
US9009222B2 (en) Verifying the transfer of a data file
US10009439B1 (en) Cache preloading
CN107391664A (zh) 基于web的页面数据处理方法和***
CN113010818B (zh) 访问限流方法、装置、电子设备及存储介质
CN105100294B (zh) 获取网页的方法、***、网络服务器、浏览器和gslb
WO2017167050A1 (zh) 配置信息生成、发送方法及资源加载方法和装置及***
CN105610909A (zh) 一种基于云-端协同的移动浏览器资源加载优化方法
US6868453B1 (en) Internet home page data acquisition method
US9531829B1 (en) Smart hierarchical cache using HTML5 storage APIs
CN107710171B (zh) 加速的子资源加载
CN108650334B (zh) 一种会话失效的设置方法及装置
CN110737857A (zh) 一种后端分页加速方法、***、终端及存储介质
US20180302489A1 (en) Architecture for proactively providing bundled content items to client devices
CN110730196A (zh) 一种网络资源访问方法、计算机设备、存储介质
CN109522501A (zh) 页面内容管理方法及其装置
CN113315822B (zh) 一种前后端分离架构下的页面静态化方法与***
CN114547214A (zh) 长链接数据处理方法、装置和设备
CN107707373B (zh) 一种基于api请求的动态资源访问加速方法
CN109361778A (zh) 一种管理会话的方法及终端
CN112926002A (zh) 一种服务请求的处理方法及装置
CN111273964B (zh) 一种数据加载方法及装置
CN113438302A (zh) 动态资源多级缓存方法、***、计算机设备及存储介质
CN112751917A (zh) 资源文件加载方法、网络设备、电子设备及存储介质
CN102137168A (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
GR01 Patent grant
GR01 Patent grant