一种可视化的页面静态化实现方法与流程

专利2025-12-02  3


本发明涉及数字可视化,尤其涉及一种可视化的页面静态化实现方法。


背景技术:

1、随着网络技术的不断普及与发展,网络页面所呈现的内容也越来越丰富多样;在现阶段网页开发设计中,我们通常使用前端框架技术搭建动态页面,动态网页不像静态网页那样是专门的网页文件,存在于数据库中当用户进行请求时才会返回一个网页,其网页内容可以随用户的要求进行动态改变。

2、与静态网页相比,动态网页的生成采用了数据库的内容,这就导致不利于搜索引擎的检索和seo(搜索引擎优化);并且在进行首屏加载时,动态页面还存在渲染慢的问题;此外,在一些官网类网站系统中,由于网页展示内容项调整频率不高,如果采用传统的前后端请求交互方式,会给系统带来较大的交互请求,而频繁的交互请求也会给系统带来较大的响应压力,导致出现响应超时情况。

3、因此,需要一种可视化的页面静态化实现方法来解决上述技术问题。


技术实现思路

1、为解决上述技术问题,本发明提供的一种可视化的页面静态化实现方法,通过如下步骤实现页面静态化:

2、步骤s1:通过框架首页文件生成第一模板文件;

3、步骤s2:在第一模板文件中设置关键字占位;

4、步骤s3:通过浏览器获取第一模板文件的静态化数据,并将静态化数据发送到服务端;

5、步骤s4:服务端接收到静态化数据,将静态化数据生成文件地址后替换第一模板文件中的关键字;

6、步骤s5:当关键字替换完成后,得到静态化页面并进行优先展示;

7、步骤s6:异步加载动态组件到静态化页面中;

8、步骤s7:异步加载完成后,得到渲染后的静态化渲染页面,隐藏原有静态化页面,将静态化渲染页面进行次级展示。

9、作为更进一步的解决方案,所述关键字包括关键字标题、关键字地址和关键字超文本标记语言。

10、作为更进一步的解决方案,所述静态化数据包括url数据、数据源数据、html和css数据。

11、作为更进一步的解决方案,所述步骤s6还包括服务端接收到静态化数据后,将静态化数据直接替换第一模板文件中的关键字。

12、作为更进一步的解决方案,当在本地实现页面静态化时,通过本地浏览器抓取第一模板文件的静态化数据。

13、作为更进一步的解决方案,当在后端实现页面静态化时,后端调用nodejs提供的模拟浏览器插件,通过模拟浏览器插件抓取第一模板文件的静态化数据。

14、作为更进一步的解决方案,将本地实现页面静态化和后端实现页面静态化进行组合使用。

15、作为更进一步的解决方案,在步骤s5中,通过输出随机字符串作为静态化页面的名称,且每次输出的随机字符串与静态化页面存在一一对应关系。

16、作为更进一步的解决方案,所述页面静态化实现方法还包括更新静态化渲染页面;

17、更新静态化渲染页面包括立即更新和热更新;

18、所述立即更新为重新执行步骤s1至步骤s7;

19、所述热更新为执行步骤s3至步骤s7。

20、作为更进一步的解决方案,通过shell脚本自动替换第一模板文件中的关键字。

21、与相关技术相比较,本发明提供的一种可视化的页面静态化实现方法具有如下有益效果:

22、本发明首先对静态化页面进行优先展示,从而保证可视化响应速度;再异步加载动态组件到静态化页面中,并在完成渲染后隐藏静态化页面,并替换为展示静态化渲染页面,从而使得静态页面具有动态交互效果;此外,由于本实施例采用前后端分离的架构模式,通过组件组合的方式实现页面搭建,其组件的渲染独立于后端逻辑,通过利用浏览器来组装数据并利用其自然的渲染逻辑获取静态化数据,无需另外构建复杂的渲染逻辑和管理不同版本的渲染组件;本发明利用已有浏览器来组装数据,能够高效地实现组件渲染过程并获取静态化数据,极大地简化的操作流程和复杂度。



技术特征:

1.一种可视化的页面静态化实现方法,其特征在于,通过如下步骤实现页面静态化:

2.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,所述关键字包括关键字标题、关键字地址和关键字超文本标记语言。

3.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,所述静态化数据包括url数据、数据源数据、html和css数据。

4.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,所述步骤s6还包括服务端接收到静态化数据后,将静态化数据直接替换第一模板文件中的关键字。

5.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,当在本地实现页面静态化时,通过本地浏览器抓取第一模板文件的静态化数据。

6.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,当在后端实现页面静态化时,后端调用nodejs提供的模拟浏览器插件,通过模拟浏览器插件抓取第一模板文件的静态化数据。

7.根据权利要求5或权利要求6任一项所述的一种可视化的页面静态化实现方法,其特征在于,将本地实现页面静态化和后端实现页面静态化进行组合使用。

8.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,在步骤s5中,通过输出随机字符串作为静态化页面的名称,且每次输出的随机字符串与静态化页面存在一一对应关系。

9.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,所述页面静态化实现方法还包括更新静态化渲染页面;

10.根据权利要求1所述的一种可视化的页面静态化实现方法,其特征在于,通过shell脚本自动替换第一模板文件中的关键字。


技术总结
本发明提供了一种可视化的页面静态化实现方法,涉及数字可视化技术领域。本发明首先对静态化页面进行优先展示,从而保证可视化响应速度;再异步加载动态组件到静态化页面中,并在完成渲染后隐藏静态化页面,并替换为展示静态化渲染页面,从而使得静态页面具有动态交互效果;此外,由于本实施例采用前后端分离的架构模式,通过组件组合的方式实现页面搭建,其组件的渲染独立于后端逻辑,通过利用浏览器来组装数据并利用其自然的渲染逻辑获取静态化数据,无需另外构建复杂的渲染逻辑和管理不同版本的渲染组件;本发明利用已有浏览器来组装数据,能够高效地实现组件渲染过程并获取静态化数据,极大地简化的操作流程和复杂度。

技术研发人员:余军,颜涛,朱愚,黄信云
受保护的技术使用者:成都华栖云科技有限公司
技术研发日:
技术公布日:2024/11/11
转载请注明原文地址: https://tieba.8miu.com/read-17914.html

最新回复(0)