页面离线渲染方法、系统、终端设备及存储介质与流程

1.本发明涉及离线渲染领域，尤其涉及一种页面离线渲染方法、系统、终端设备及存储介质。

背景技术：

2.在移动端越来越丰富的互联网环境下，追求页面快速渲染，首屏秒开的极致体验下，市面上出现了如native页面、离线页面和在线ssr页面的优化方法，但是这些优化方法中，如果出现页面数据的变化，要么需要重新升级app，要么会出现页面的显示延迟或者闪屏，在无网或者弱网的情况下加载依旧很慢，特别在金融科技领域，会给用户带来不好的体验，同时对于运维和开发来讲会增加无意义的工作量，不适合当前快节奏更新的市场环境。

技术实现要素：

3.第一方面，本技术提供了一种页面离线渲染方法，应用于客户端，包括：
4.对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；
5.通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。
6.进一步的，所述通过后端接口数据读取当前页面是否有更新，包括：
7.建立所述客户端和服务器的连接，并将所述当前页面的数据发送给所述服务器，根据服务器返回值确定所述当前页面是否需要更新。
8.进一步的，还包括：若本地缓存中没有储存所述页面资源，则直接提取本地的页面文件，并根据所述页面文件渲染，以生成页面进行显示。
9.第二方面，本技术还提供一种页面离线渲染方法，应用于服务器，包括：
10.监听页面数据的打包进程，当页面数据打包完成时，初始化虚拟浏览器；
11.通过所述虚拟浏览器，对打包完成的所述页面数据进行渲染，得到渲染页面，将所述渲染页面打包成dom对象，并存入页面文件中，将所述页面文件的依赖资源和所述页面文件关联成页面资源，并存入指定目录中。
12.进一步的，所述页面离线渲染方法还包括：
13.当所述服务器和客户端建立连接后，接收来自客户端的当前页面的数据，对比所述客户端当前页面的数据和本地对应页面的数据是否相同，根据是否相同返回对应的返回值给所述客户端；
14.若不同，则判断所述客户端需要更新，将对应的页面资源传输给所述客户端。
15.进一步的，在进行所述打包进程之前，还包括：
16.确定当前需要进行打包的页面资源所需要的插件工具，若本地未加载所述插件工具，则获取所述插件工具的下载地址，将所述插件工具下载至服务器后，再运行所述打包进程。
17.进一步的，所述将所述页面打包成dom对象后，还包括：
18.删除所述dom对象在渲染过程中生成的冗余代码，并将所述渲染页面依赖的程序路径替换成本地路径，并写入同一个页面文件中。
19.第三方面，本技术还提供一种离线渲染系统，包括：服务器和客户端；
20.所述服务器用于监听页面数据的打包进程，当页面数据打包完成时，初始化虚拟浏览器；
21.所述服务器还用于通过所述虚拟浏览器，对打包完成的所述页面资源进行渲染，得到渲染页面，将所述渲染页面打包成dom对象，并存入页面文件中，将所述页面文件的依赖资源和所述页面文件，关联存入指定目录中；
22.所述客户端用于对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；
23.所述客户端还用于通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。
24.第四方面，本技术还提供一种终端设备，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行所述的页面离线渲染方法。
25.第五方面，本技术还提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上运行时执行所述页面离线渲染方法。
26.本发明涉及离线渲染领域，公开了一种页面离线渲染方法、系统、终端设备及存储介质。该方法包括：对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。使得页面可以快速显示，并在有数据变更的情况下，避免了延时和闪屏，使得用户在打开客户端的时候，首个显示的页面可以快速响应，避免因为网络状况导致的延迟。
附图说明
27.为了更清楚地说明本发明的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对本发明保护范围的限定。在各个附图中，类似的构成部分采用类似的编号。
28.图1示出了本技术实施例一种页面离线渲染方法系统示意图；
29.图2示出了本技术实施例一种页面离线渲染方法流程示意图；
30.图3示出了本技术实施例一种页面离线渲染方法交互示意图。
具体实施方式
31.下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。
32.通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求
保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
33.在下文中，可在本发明的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。
34.此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
35.除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本发明的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本发明的各种实施例中被清楚地限定。
36.本技术的技术方案应用于app的页面离线生成，特别是金融科技相关的应用，提供了一种页面离线渲染系统，如图1所示，其包括客户端20和服务器10，服务器10会在页面数据的打包编译过程中，对打包的页面数据进行拦截，并将页面数据进行渲染，然后伴随app的安装直接存储到用户的客户端上。当用户使用客户端20打开app时，可以直接从本地的缓存中得到最新的页面数据，然后才会从后端接口向服务器查询，判断当前页面和服务器中的数据是否不同，若有数据变化，才需要二次渲染来更新页面，使得客户在首次打开app时的第一个页面可以快速显示响应，并且根据数据的实际变化来变更页面数据，保证了页面数据的实时性。
37.接下来以具体的实施例说明本技术的技术方案。
38.实施例1
39.如图2所示，本技术的页面离线渲染方法包括如下步骤：
40.步骤s100，监听页面数据的打包进程，当页面数据打包完成时，初始化虚拟浏览器。
41.页面资源为显示一个页面所需要的代码、图片、外部插件等要素，这些要素都需要整合打包后，才能由程序调用。
42.页面资源在最后进行整合进程序时，都会进行打包操作，例如通过webpack对页面资源进行打包，打包时会生成一个打包进程，服务器户监听该进程，掌握页面资源打包进度，当打包完成后，表示页面资源和各个文件之间的依赖关系都已经分析完毕，并生成了对应的静态资源，这种数据包就可以进行渲染得到具体的页面，为此，当打包完成时，为了后续根据该包生成页面，会先在本地初始化一个服务器，并通过该服务器初始化虚拟浏览器。
43.可以理解的是，上述两个初始化的动作是为了在服务器端实现对页面的渲染操作，其中该虚拟浏览器指的是浏览器的内核，相较于平时在页面上打开的浏览器，虚拟浏览器只有浏览器最基本的框架和设置，是单纯用来生成页面和渲染页面用的工具。
44.具体而言，上述初始化虚拟浏览器是用于配置该虚拟浏览器的各种参数，例如浏览器的尺寸大小、比例、启动时间以及是否通过无头模式运行等。具体的初始化方式可以通
过例如pupperteer(一种爬虫工具)包中提供的launch方法来进行初始化，以确定该虚拟浏览器的上述各个参数。
45.其中，在对页面资源打包时，还包括以下步骤：
46.步骤s110，确定当前需要进行打包的页面资源所需要的插件工具，若本地未加载所述插件工具，则获取所述插件工具的下载地址，将所述插件工具下载至服务器后，再运行所述打包进程。
47.页面资源的渲染需要一些外部依赖，例如js或者分享插件、弹窗插件等，这些资源需要在打包时统一处理，因为页面中所使用的插件种类繁多，所以这些插件有些并不会在服务器端保存，为此会需要获取这些插件工具的下载地址，根据这些地址下载这些插件工具，然后再执行上述的页面打包进程。
48.可以理解的是，在这一步进行上述外部资源的下载，是将需要对网页进行渲染时所需要的工具预先下载了下来，相当于优化了当网络请求阻塞页面渲染的应用场景。也就是说在需要渲染打包的页面资源时，可以通过这些已经被下载下来的工具来实现渲染本地化，在后续进行渲染时，不需要网络也可以执行这些外部资源。而为了可以在本地使用这些外部资源，在打包完成后，通过将对应的外部链接地址修改成本地这些对应的插件工具存储的地址即可。
49.步骤s200，通过所述虚拟浏览器，对打包完成的所述页面数据进行渲染，得到渲染页面，将所述渲染页面打包成dom对象，并存入页面文件中，将所述页面文件的依赖资源和所述页面文件关联成页面资源，并存入指定目录中。
50.通过虚拟浏览器可以将上述的页面资源进行渲染，得到一个渲染后的页面。
51.具体而言，渲染方法可以是先启动该虚拟浏览器，然后可以调用pupperteer中的创建方法，来创建一个页面对象，然后使用pupperteer.goto的方法将前面打包好的页面资源进行渲染，得到一个页面，该页面可以是html的，也可以是其他格式，本技术对此不做限定。
52.虚拟浏览器渲染好的页面需要打包成dom(document object model，文档对象模型)，因为在步骤s100中，初始化虚拟浏览器时，会确定该虚拟浏览器的运行时间，当虚拟浏览器到达运行时间关闭后，将生成的页面打包成dom对象。
53.对于得到的dom对象，可以对该dom对象进行优化处理，例如将页面渲染过程中，因为外部插件生成的一些冗余代码删除，同时将前述步骤下载的外部插件工具的路径替换成本地下载好的资源路径，实现本地化，然后将这些数据都写入到同一个网页文件中，该网页文件指的是html文件或者asp等对应格式的网页文件中。
54.最终生成的该网页文件以及依赖的一些插件工具需要存入指定目录中，即对网页资源会有专门的目录来存放网页，当应用需要展现网页时，会直接来这个路径下寻对应名字的网页。
55.可以理解的是，此时服务器中存储的网页文件是已经渲染完成的网页文件，并且在网页存储的目录下，还会存有该网页文件依赖的各种外部资源，对于这些已经渲染好的网页来讲，可以直接在浏览器中显示，也可以经过浏览器进行二次渲染然后显示，且因为在打包过程中，已经下载并保存来页面的外部依赖插件，所以不需要网络就可以直接从本地获取对应需要的工具，完成了对于该网页的本地化操作。
56.对于用户来讲，其在客户端下载和安装了对应的应用后，才能够从应用上访问对应的网页，查询对应的数据，为此，在客户下载了安装包进行安装时，上述的网页文件会随着安装包的安装，存储在客户端本地，这样对于客户端来讲，可以直接使用这个已经完成了本地化的网页文件，在客户端上也可以在离线的状态下，完成对首个网页的打开。
57.可以理解的是，应用中所有的页面都会进行上述的离线化操作，例如对于一个应用来讲，可能有100个页面，这100个页面都有可能是用户打开应用时会连接进去看到的首个页面，则这些页面都需要进行上述的操作，以实现离线化操作，这样客户在打开应用时的首个页面可以不被网络情况影响从而直接打开。
58.步骤s300，对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示。
59.客户端指的是用户使用的电子设备，如通过智能手机、平板电脑或者个人电脑等可以运行应用的设备，都是本实施例所述的客户端。客户端中安装了对应的应用后，打开应用时，会显示界面。例如某个金融科技相关的app，会显示登陆界面，然后进入账户的详情界面，这些界面都是本实施例中所述的网页页面，这些页面中会显示各种数据、链接按钮和广告，都是页面的一部分，当客户端打开应用时，往往会进入设定好的首页，首页行驶的速度快慢，会给用户带来完全不同的使用体验。
60.应用可以是一些需要和网络连接的应用，如一些金融软件，用户需要通过该应用来获取一些产品的价格信息，或者进行一些操作。当打开这些软件时，软件会显示一个界面给用户，该界面通常是首页，或者是用户自定义的首个页面，为此，客户端会先从本地的缓存中，查是否存在该页面最新的缓存数据。
61.可以理解的是，上述最新的缓存数据会是用户上一次关闭该应用时残留下载的页面数据，也就是说客户端利用本地残留的数据，可以在没有网络的情况下，直接打开网页，展现给用户上次浏览的页面内容。
62.此外，若本地没有缓存的页面，则表示用户可能清理过内存，缓存数据都被清理掉了，也可能是客户是首次打开该应用，所以并没有上一次浏览的内容，为此，客户端会从本地默认路径中寻到伴随应用的安装一起下载下来的页面资源，通过该页面资源来进行首个页面的显示，实现离线页面显示的功能。
63.对于智能手机或者平板电脑来讲，大多数应用都会存放在后台，因此容易在缓存中到对应的页面数据。对于个人电脑来讲，往往关闭掉应用后，对应的缓存数据也会被释放，因此会直接从应用中读取经过步骤s100和s200处理后的页面数据，根据这些页面数据进行首页显示。
64.具体而言，查询到了该缓存数据后，会将这些缓存的页面资源发送给状态管理器，如使用的是vue的话，则发送给vuex，以此类推，使用不同的架构使用对应的状态管理器，通过状态管理器来对这些资源进行渲染并在前端进行显示。可以理解的是，缓存在本利的页面资源是上次已经显示过的完整的数据，其依赖的js(java script)也都在缓存内，所以可以直接根据这些页面资源进行页面的生成，并且不需要让js重新再执行一遍，只需要按照页面资源直接在浏览器中显示即可。
65.从步骤s100和步骤s200中可知，该页面资源在服务器中，就已经完成了渲染和依赖js的打包工作，在客户端本地进行显示时是不需要寻外部依赖js或者其他依赖插件
的，可以在离线的状态中直接进行页面的显示，显示后所生成的数据会缓存在本地，用于下一次访问时的缓存数据。
66.也就是说，客户端上的应用程序在安装时，会将在步骤s100和步骤s200中，由服务器打包好的页面文件存储到本地，当客户打开应用程序时，会直接从本地得到对应的页面文件，这些页面文件已经被渲染过，且和外部插件工具关联，并且外部插件工具也都下载到了本地，因此即便在离线的情况下，客户点也可以依靠这些数据，在本地打开页面。且这些过程全程在客户端中执行，无需和服务器产生数据交互，都是本地执行，也就是基本没有延迟，所以不会出现页面弹窗慢的现象。
67.步骤s400，通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。
68.成功打开页面后，可知当前打开的页面要么是上一次客户打开的页面，要么是本地保存的默认页面，也就是说首次打开的画面虽然可以由本地快速处理，但是大多数情况下这些页面都会是过期页面，上面显示的数据并不是最新的，为此，客户端会通过后端数据接口，读取当前页面是否有更新，以判断当前的页面是否需要更新。
69.具体而言，如图3所示，为服务器和客户端之间的交互示意图，可知，当客户端打开时，会和服务器建立连接，这样客户端可以查询当前页面是否有数据更新。
70.服务器在接收到客户端的请求后，会进行对比，通过对比客户端当前页面的页面数据和服务器本地保存的对应页面的页面数据是否相同，来判断客户端的数据是不是已经过时了。可以理解的是，服务器中所保存的数据肯定是最新的，因此当发现服务器中保存的页面数据和客户端中的不一样时，则表示客户端中的页面已经过时了，需要更新。此时，客户端会向服务器请求，将该新页面的数据下载下来，然后客户端再更具该更新的页面数据进行二次渲染，更新当前的页面。
71.可以理解的是，下载下来的更新数据可以是完整的页面文件，也可以是对应的数据表单，具体下载的更新数据可以根据客户端页面和服务器页面的差别进行选择。
72.例如，当页面的结构出现了大改，则不是改动表单中某个数据就可以完成页面更新的，因此需要下载完整的页面文件，然后由客户端按照下载下来的页面文件进行渲染操作，重新在客户端的浏览器中显示新的页面。
73.同时也存在页面整体没有改动，只是数据有所变化的情况，此时可以从后台获取对应的数据表单，然后对页面中数据进行更新，但是不需要对页面本身进行渲染修改。
74.具体而言，客户在打开了应用后，会先从内存中到最新的缓存页面并显示，此时客户见到的是上次自己关闭应用时的页面，此时的页面是过时的，需要更新，因此应用后端回合服务器进行数据交互来判断，是否需要更新页面，当发现需要更新时，会下载更新数据，下载的更新数据根据页面的更新程度来决定。然后根据更新的数据，来对当前页面进行二次渲染，实现刷新页面的效果。
75.这里的更新操作可以是自动进行的，例如客户进入某个金融页面，查看某个产品的价格，打开时，显示的是上一次查看的价格，而在一秒钟后，因为后端将数据更新完毕，从而自动渲染当前页面，使得当前页面的数据更新，由上次的价格直接变成最新的价格。给客户一种页面动态变化的感觉。
76.除此之外，也可以通过客户出发“下拉刷新”这类操作进行更新，如客户端判断到当前页面需要更新了，则下载更新数据，但是不立刻显示最新的页面，而是提示用户进行“下拉刷新”或者其他的操作进行页面的刷新，客户如此操作后，再进行页面的二次渲染，实现页面数据的更新或者页面结构的更新。可以理解的是，这些更新后的数据会替代缓存中的页面数据，以此来保持缓存中的页面数据一直是最新的数据。同样的，上述的改变也可以应用于页面的结构变化中，在此不再赘述。
77.因为本技术中存储到本地的页面数据和在服务器中的页面数据是将外部依赖资源等数据都集成打包好的，将这些页面数据单独拿出来，放在合适的环境下都可以离线渲染成页面，因此本技术的技术方案中，页面和应用本身并不是完全挂钩的关系，页面的更新并不会使得应用也需要更新，避免了因为页面版本的变动从而使得应用也需要更新，减少客户因为页面变动从而更新应用所花费的流量，带给客户更加流畅的使用体验。同时因为页面和应用单独分开的结构，使得开发人员更容易开发页面，增加了软件内的内度度，减少了耦合度。
78.需要说明的是，本技术对页面的显示进行了离线化操作，但是不代表客户端在完全离线的情况下可以浏览到服务器上的数据，而是指在离线的情况下，客户端可以正常的渲染并显示第一个网页，以此改善用户的体验，对于数据的查询更新等操作依旧需要联网才能执行，但是和现有技术不同的是吗，本技术联网获得的页面数据也是经过服务器渲染打包后的文件，可以直接在离线的情况下直接使用并显示，不需要客户端中让外部依赖的js或者vue等库再执行一遍才出现页面，减少了页面显示时间。而因为这些网页的离线化操作，减轻了客户端所需要的网络压力和本底的计算压力，使得在打开app时，应用有了一段缓冲时间，可以用来进行网络质量的调整，给用户更顺滑的使用体验。
79.本实施例的页面离线渲染方法，由服务器对所有的网页进行预渲染和打包，并将所有的依赖资源本地化生成最终的打包对象，再将这些打包好的网页经由安装操作存储到客户的客户端上，当客户从对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将该数据发送给状态管理器进行初始化渲染，以生成页面进行显示；通过后端接口数据读取当前页面是否有更新，当所述当前页面有更新，则从服务器中获取对应的更新数据对当前页面进行二次渲染，得到更新后的页面。使得页面可以快速显示，因为是渲染过且本地化的页面数据，在客户端上显示时不需要再运行一遍外部依赖的js等插件，可以实现快速响应，并在有数据变更的情况下，通过先显示旧网页，再对新网页进行二次渲染，避免了延时和闪屏，使得用户在打开客户端的时候，首个显示的页面可以快速响应，避免因为网络状况导致的延迟，增加了用户的体验。
80.本技术还提供一种终端设备，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行所述页面离线渲染方法。
81.本技术还提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上运行时执行所述页面离线渲染方法。
82.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码
的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
83.另外，在本发明各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。
84.所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是智能手机、个人计算机、服务器、或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
85.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。

技术特征：

1.一种页面离线渲染方法，其特征在于，应用于客户端，包括：对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。2.根据权利要求1所述的页面离线渲染方法，其特征在于，所述通过后端数据接口检测当前页面是否有更新，包括：建立所述客户端和服务器的连接，并将所述当前页面的数据发送给所述服务器，根据服务器返回值确定所述当前页面是否需要更新。3.根据权利要求1所述的页面离线渲染方法，其特征在于，还包括：若本地缓存中没有储存所述页面资源，则直接提取本地的页面文件，并根据所述页面文件进行渲染，以生成页面进行显示。4.一种页面离线渲染方法，其特征在于，应用于服务器，包括：监听页面数据的打包进程，当页面数据打包完成时，初始化虚拟浏览器；通过所述虚拟浏览器，对打包完成的所述页面数据进行渲染，得到渲染页面，将所述渲染页面打包成dom对象，并存入页面文件中，将所述页面文件的依赖资源和所述页面文件关联成页面资源，并存入指定目录中。5.根据权利要求4所述的页面离线渲染方法，其特征在于，还包括：当所述服务器和客户端建立连接后，接收来自客户端的当前页面的数据，对比所述客户端的当前页面的数据和本地对应页面的数据是否相同，根据是否相同返回对应的返回值给所述客户端；若不同，则判断所述客户端需要更新，将对应的页面资源传输给所述客户端。6.根据权利要求4所述的页面离线渲染方法，其特征在于，在进行所述打包进程之前，还包括：确定当前需要进行打包的页面资源所需要的插件工具，若本地未加载所述插件工具，则获取所述插件工具的下载地址，将所述插件工具下载至服务器后，再运行所述打包进程。7.根据权利要求4所述的页面离线渲染方法，其特征在于，所述将所述页面打包成dom对象后，还包括：删除所述dom对象在渲染过程中生成的冗余代码，并将所述渲染页面依赖的程序路径替换成本地路径，并写入同一个页面文件中。8.一种离线渲染系统，其特征在于，包括：服务器和客户端；所述服务器用于监听页面数据的打包进程，当页面数据打包完成时，初始化虚拟浏览器；所述服务器还用于通过所述虚拟浏览器，对打包完成的所述页面数据进行渲染，得到渲染页面，将所述渲染页面打包成dom对象，并存入页面文件中，将所述页面文件的依赖资源和所述页面文件关联成页面资源，并存入指定目录中；所述客户端用于对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；所述客户端还用于通过后端数据接口检测当前页面是否有更新，若所述当前页面有更
新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。9.一种终端设备，其特征在于，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行权利要求1至7中任一项所述的页面离线渲染方法。10.一种可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序在处理器上运行时执行权利要求1至7中任一项所述的页面离线渲染方法。

技术总结

本发明涉及离线渲染领域，公开了一种页面离线渲染方法、系统、终端设备及存储介质。该方法包括：对网页进行请求时，查询本地缓存中是否预先存储了页面资源，若查询到所述页面资源，则将所述页面资源进行初始化渲染，以生成页面进行显示；通过后端数据接口检测当前页面是否有更新，若所述当前页面有更新，则从服务器指定目录中获取对应的页面资源，并对所述当前页面进行二次渲染，得到更新后的页面。使得页面可以快速显示，并在有数据变更的情况下，避免了延时和闪屏。避免了延时和闪屏。避免了延时和闪屏。