CN115828007A - 一种页面展示的方法、装置、***、电子设备及介质 - Google Patents

Abstract

本申请实施例提供一种页面展示的方法、装置、***、电子设备及介质，该方法包括：在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面；响应于展示所述模型页面的操作，展示所述模型页面的内容，通过本申请的一些实施例能够将模型页面的内容直接进行展示，降低了模型页面加载的时间，从而提升了页面展示的效率。

Description

一种页面展示的方法、装置、***、电子设备及介质

技术领域

本申请实施例涉及计算机软件领域，具体涉及一种页面展示的方法、装置、***、电子设备及介质。

背景技术

随着计算机技术的发展，客户端需要具备展示超大体量的模型的能力，相关技术中，在客户端每次展示该模型的过程中，都需要重新初始化引擎资源，导致用户在打开页面的过程中出现页面卡顿或者页面加载慢的情况，从而导致用户的使用体验不佳。

因此，如何提升页面的加载速度提升浏览页面的用户体验是一个需要解决的问题。

发明内容

本申请实施例提供一种页面展示的方法、装置、***、电子设备及介质，通过本申请的一些实施例至少能够将模型页面的内容直接进行展示，降低模型页面加载的时间，从而提升了浏览页面的用户体验。

第一方面，本申请提供了一种页面展示的方法，应用于客户端，所述方法包括：在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面；响应于展示所述模型页面的操作，展示所述模型页面的内容。

因此，与相关技术中在展示模型页面的过程中直接加载内容不同的是，本申请在前置页面展示的过程中将该内容预先加载在缓存中，在展示模型页面的过程中从缓存中获取该内容直接进行展示，降低模型页面加载的时间，从而提升了浏览页面的用户体验。

结合第一方面，在本申请的一种实施方式中，在所述在展示前置页面时预加载模型页面的内容之前，所述方法还包括：获取所述内容的历史平均加载时间；所述在展示前置页面时预加载模型页面的内容，包括：基于所述历史平均加载时间确定开始加载所述内容的目标前置页面；确认当前展示页面为所述目标前置页面，则开始预加载所述模型页面的内容。

因此，本申请实施例通过该内容的历史平均加载时间能够明确在哪个前置页面开始加载该内容，从而提高了页面加载的效率，防止由于过早加载该内容而导致其他页面加载缓慢，或者防止由于没有及时加载该内容而导致在展示模型页面的过程中模型页面加载缓慢。

结合第一方面，在本申请的一种实施方式中，所述在展示前置页面时预加载模型页面的内容，包括：加载引擎资源，其中，所述引擎资源用于对所述内容进行解析和加载；在展示前置页面时通过所述引擎资源预加载所述模型页面的内容。

因此，本申请实施例通过预先加载引擎资源，能够使用该引擎资源在前置页面中加载模型页面的内容。

结合第一方面，在本申请的一种实施方式中，在所述展示所述模型页面的内容之后，所述方法还包括：在确认所述模型页面被切换到其他展示页面的条件下，将所述内容和引擎资源隐藏到浏览器中。

因此，本申请实施例通过在切换页面的过程中将模型页面的内容和引擎资源隐藏在浏览器中，能够保证在再次返回模型页面的过程中直接从浏览器中获取。

结合第一方面，在本申请的一种实施方式中，在所述将所述内容和引擎资源隐藏到浏览器中之后，所述方法还包括：在确认所述其他展示页面被切换到所述模型页面的条件下，获取并加载隐藏在所述浏览器中的所述内容和引擎资源。

因此，本申请实施例通过直接获取隐藏在浏览器中的引擎资源和该内容，能够减少页面的加载时间。

结合第一方面，在本申请的一种实施方式中，在所述展示所述模型页面的内容之后，所述方法还包括：响应于退出页面指令，将所述内容和引擎资源删除。

因此，本申请实施例通过在退出页面之后删除该内容和引擎资源，能够提升客户端在运行其他程序的效率。

第二方面，本申请提供了一种页面展示的装置，所述装置包括：内容加载模块，被配置为在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面；内容展示模块，被配置为响应于展示所述模型页面的操作，展示所述模型页面的内容。

结合第二方面，在本申请的一种实施方式中，所述内容加载模块还被配置为：获取所述内容的历史平均加载时间；基于所述历史平均加载时间确定开始加载所述内容的目标前置页面；确认当前展示页面为所述目标前置页面，则开始预加载所述模型页面的内容。

结合第二方面，在本申请的一种实施方式中，所述内容加载模块还被配置为：加载引擎资源，其中，所述引擎资源用于对所述内容进行解析和加载；在展示前置页面时通过所述引擎资源预加载所述模型页面的内容。

结合第二方面，在本申请的一种实施方式中，所述内容展示模块还被配置为：在确认所述模型页面被切换到其他展示页面的条件下，将所述内容和引擎资源隐藏到浏览器中。

结合第二方面，在本申请的一种实施方式中，所述内容展示模块还被配置为：在确认所述其他展示页面被切换到所述模型页面的条件下，获取并加载隐藏在所述浏览器中的所述内容和引擎资源。

结合第二方面，在本申请的一种实施方式中，所述内容展示模块还被配置为：响应于退出页面指令，将所述内容和引擎资源删除。

第三方面，本申请提供了一种页面展示的***，所述***包括：模型存储服务器，被配置为存储模型页面的内容；客户端，被配置为预加载所述模型页面的内容，并且根据所述模型页面的内容执行如第一方面任意实施例所述的方法，展示所述内容。

第四方面，本申请提供了一种电子设备，包括：处理器、存储器和总线；所述处理器通过所述总线与所述存储器相连，所述存储器存储有计算机程序，所述计算机程序由所述处理器执行时可实现如第一方面任意实施例所述的方法。

第五方面，本申请提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被执行时可实现如第一方面任意实施例所述的方法。

附图说明

图1为本申请实施例示出的一种页面展示的方法的***组成示意图；

图2为本申请实施例示出的一种页面展示的方法的流程图之一；

图3为本申请实施例示出的一种页面展示的方法的流程图之二；

图4为本申请实施例示出的一种页面展示的装置组成示意图；

图5为本申请实施例示出的一种电子设备组成示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本申请的一部分实施例，而不是全部实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对附图中提供的本申请的实施例的详情描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护范围。

本申请实施例可以应用于在客户端中展示模型页面的场景，为了改善背景技术中的问题，在本申请的一些实施例中，通过在前置页面展示的过程中将模型页面的内容预先加载在缓存中，之后在展示模型页面的过程中直接从缓存中获取该内容直接进行展示。例如，在本申请的一些实施例中，客户端在确认开始加载模型页面的内容的目标前置页面之后，在展示目标前置页面的过程中预先加载模型页面的内容到缓存中，在展示模型页面的过程中直接从缓存中获取该内容直接进行展示。

下面结合附图详细描述本申请实施例中的方法步骤。

图1提供了本申请一些实施例中的页面展示的***的结构图，该***包括模型存储服务器120和客户端110。具体的，模型存储服务器120中存储有模型页面的内容，客户端110在展示前置页面的过程中，从模型存储服务器120中获取模型页面的内容，并且将该内容存储在缓存中。之后客户端110在展示模型页面的过程中直接从缓存中获取该内容直接进行展示。

与本申请实施例不同的是相关技术中，在客户端每次展示该模型的过程中，都需要重新初始化引擎资源，导致用户在打开页面的过程中出现页面卡顿或者页面加载慢的情况，从而导致用户的使用体验不佳。而本申请的实施例是预先将模型页面的内容存储在缓存中的，因此本申请的实施例并不需要像相关技术需要在每次打开模型页面时重新初始化引擎资源，即可实现模型页面的展示。

下面以客户端为例示例性阐述本申请一些实施例提供的页面展示的方案。可以理解的是，本申请实施例的页面展示的方法的技术方案可以应用于任何客户端上，例如，电脑或平板电脑上。

至少为了解决背景技术中的问题，如图2所示，本申请一些实施例提供了一种页面展示的方法，该方法包括：

S210，在展示前置页面时预加载模型页面的内容。

可以理解的是，预加载的模型页面的内容被保存在客户端本地中，可以保存在缓存中，还可以保存在Dom树中。

需要说明的是，前置页面为展示在模型页面之前的页面。例如，客户端展示的页面包括填入信息页面、登录页面、目录页面、文字介绍页面和模型页面。其中，填入信息页面、登录页面、目录页面和文字介绍页面都是在模型页面中展示的，因此，在该实施例中前置页面为填入信息页面、登录页面、目录页面和文字介绍页面中的任意一个。

模型页面的内容是可以是较大体量的模型，还可以是高清视频等内容，例如，模型页面的内容可以是BIM模型，BIM(Building Information Modeling)技术是一种应用于工程设计、建造、管理的数据化工具，通过对建筑的数据化、信息化模型整合，在项目策划、运行和维护的全生命周期过程中，进行建筑信息的共享和传递。工程技术人员通过对各种建筑信息做出正确的理解和高效的应对，为设计团队以及建筑、运营等各方建设团体提供协同工作的基础，在提高生产效率、节约成本、高效管理等方面发挥重要的作用。

在大型的基建工程以及城市化信息管理平台中，通常会需要对大体量的三维模型进行管理，包括可视化交互、信息传递以及三维模型和相关业务数据的关联等，在同一平台切换需要复用模型时，行业内通用的做法是每次打开都需重新加载模型，来实现在同一平台对三维模型进行查看和管理，但是针对超大体量的三维模型，例如城市级别的三维模型，很难做到高效的数据管理和流畅的交互式体验。因此需要一种可以复用已加载过模型的方法来，来解决以上难题。

在本申请的一种实施方式中，在预加载模型页面的内容之前，获取该内容的历史平均加载时间，之后基于历史平均加载时间确定开始加载该内容的目标前置页面，确认当前展示页面为目标前置页面，则开始预加载模型页面的内容。

也就是说，模型页面的内容在历史加载的过程中，会记录从开始加载到结束加载的时间，将历史加载时间进行平均，获得历史平均加载时间，之后在登录展示***时，获取模型页面的内容的历史平均加载时间，之后历史平均加载时间会对应目标前置页面，在展示到目标前置页面的过程中开始预加载模型页面的内容。

具体的，在前置页面展示的过程中，可以设定每个前置页面的展示时间，或者根据每个前置页面的历史展示时间来预计每个前置页面的停留时间，之后确认当前展示的前置页面与展示模型页面的时间间隔是否小于或等于历史平均加载时间，若是，则将当前展示的前置页面判断为目标前置页面，若否，则继续展示其他的前置页面，直至确认当前展示的前置页面与展示模型页面的时间间隔小于或等于历史平均加载时间，则开始预加载模型页面的内容。

在本申请的一种实施方式中，加载引擎资源，其中，引擎资源用于对该内容进行解析和加载，在展示前置页面时通过引擎资源预加载模型页面的内容。

需要说明的是，引擎资源是对模型页面的内容进行解析和加载的脚本代码。模型页面的内容可以是存储在模型存储服务器的资源载体。

也就是说，在预加载模型页面的过程中，需要预先加载引擎资源，再通过引擎资源加载模型页面的内容。

S220，响应于展示模型页面的操作，展示模型页面的内容。

在本申请的一种实施方式中，在展示模型页面的内容之后，在确认模型页面被切换到其他展示页面的条件下，将该内容和引擎资源隐藏到浏览器中。

在本申请的一种实施方式中，在确认其他展示页面被切换到模型页面的条件下，获取并加载隐藏在浏览器中的该内容和引擎资源。

也就是说，当模型页面的内容展示完成之后，切换到其他的页面的过程中，为了能够后续模型页面能够继续展示，将模型页面的内容和引擎资源一起隐藏在浏览器中，其中，可以隐藏在Dom树中，在模型页面被切换回来的过程中，直接去Dom树获取模型页面的内容和引擎资源进行展示。

需要说明的是，其他展示页面为***中除了展示模型页面之外的其他所有展示页面。该***可以是客户端中的一个应用程序，该应用程序用于展示该展示模型页面，该展示模型页面与其他展示页面属于该应用程序。

在本申请的一种实施方式中，响应于退出页面指令，将该内容和引擎资源删除。

也就是说，为了保证客户端的其他程序正常运行，防止卡顿，在确认用户触发了退出页面的指令，则将模型页面的内容和引擎资源删除。

作为本申请一具体实施例，如图3所示，首先S301进入客户端之后，执行S302判断本地有无缓存，若有缓存，则执行S304从缓存中读取引擎资源，若无缓存，则先执行S303缓存引擎资源再执行S304。在执行S304之后执行S305进入到可获取模型页面的内容的位置，S306Dom树中是否存在该内容，若不存在，则先执行S308通过网络加载该内容之后再执行S307从Dom树中获取并展示该内容。执行S307之后，执行S309切换页面，将该内容存储在Dom树中，最后执行S310结束并删除该内容。

具体的，首先，预加载引擎资源并缓存。当用户打开平台任意页面时，就开始加载引擎资源并将引擎资源缓存在本地从而减少下次打开时加载引擎资源时间。

接着，预加载模型页面的内容。根据模型的大小不同，每一次模型的加载时长都不相同，在用户获取到模型时就开始在后台对模型进行预加载，预加载的过程可能是在用户还没进入到模型页面时就进行，当用户进入对应模型页面时就能大大减少模型加载时间。

然后，缓存模型页面的内容。当用户在平台内部进行页面跳转或者切换时，此时如果把模型销毁那么下次再次加载时仍会花较长时间加载。而本申请是用户在切换或者调整时，将加载模型资源的载体canvas移动到浏览器Dom树中并隐藏起来。当用户下次再次切换到需要展示的页面时，***会判断浏览器Dom树中是否有与该模型资源相匹配的canvas如果有就将隐藏的canvas显示出来，可以避免二次加载模型，从而实现二次加载模型秒开的功能。

最后，当退出平台时删除模型、并卸载引擎资源，以确保客户端其他平台的操作不受影响。

因此，本申请提出一种基于客户端缓存来实现模型复用的方法。本申请的主要优点在于通过对引擎资源的缓存与模型资源的最大复用，可以使超大BIM模型第一次预览时加载速度提高40％以上，而针对已经加载过的模型无论是切换页面还是打开新的页面都能实现秒加载。

因此，本申请与现有技术相比，具有如下的优点和有益效果：

通过预加载策略以及在浏览器Dom里复制Canvas对象的方式，有效的解决了模型每次加载都需要重新初始化，导致客户端其他操作出现卡顿，打开客户端页面缓慢、等待时间过长，客户无法流畅浏览模型的问题，尤其是在城市级大型三维模型的加载和体验方面有明显的改善。实现了无论是第一次浏览模型的时候，还是页面切换之后再次回来打开页面浏览同一个模型的时候，都能达到模型秒级渲染呈现。

上文描述了一种页面展示的方法的具体实施例，下文将描述一种页面展示的装置。

如图4所示，本申请的一些实施例提供一种页面展示的装置400，该装置包括：内容加载模块410和内容展示模块420。

内容加载模块410，被配置为在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面。

内容展示模块420，被配置为响应于展示所述模型页面的操作，展示所述模型页面的内容。

在本申请的一种实施方式中，所述内容加载模块410还被配置为：获取所述内容的历史平均加载时间；基于所述历史平均加载时间确定开始加载所述内容的目标前置页面；确认当前展示页面为所述目标前置页面，则开始预加载所述模型页面的内容。

在本申请的一种实施方式中，所述内容加载模块410还被配置为：加载引擎资源，其中，所述引擎资源用于对所述内容进行解析和加载；在展示前置页面时通过所述引擎资源预加载所述模型页面的内容。

在本申请的一种实施方式中，所述内容展示模块420还被配置为：在确认所述模型页面被切换到其他展示页面的条件下，将所述内容和引擎资源隐藏到浏览器中。

在本申请的一种实施方式中，所述内容展示模块420还被配置为：在确认所述其他展示页面被切换到所述模型页面的条件下，获取并加载隐藏在所述浏览器中的所述内容和引擎资源。

在本申请的一种实施方式中，所述内容展示模块420还被配置为：响应于退出页面指令，将所述内容和引擎资源删除。

在本申请实施例中，图4所示模块能够实现图1、图2和图3方法实施例中的各个过程。图4中的各个模块的操作和/或功能，分别为了实现图1、图2和图3中的方法实施例中的相应流程。具体可参见上述方法实施例中的描述，为避免重复，此处适当省略详细描述。

如图5所示，本申请实施例提供一种电子设备500，包括：处理器510、存储器520和总线530，所述处理器通过所述总线与所述存储器相连，所述存储器存储有计算机可读取指令，当所述计算机可读取指令由所述处理器执行时，用于实现如上述所有实施例中任一项所述的方法，具体可参见上述方法实施例中的描述，为避免重复，此处适当省略详细描述。

其中，总线用于实现这些组件直接的连接通信。其中，本申请实施例中处理器可以是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。存储器中存储有计算机可读取指令，当所述计算机可读取指令由所述处理器执行时，可以执行上述实施例中所述的方法。

可以理解，图5所示的结构仅为示意，还可包括比图5中所示更多或者更少的组件，或者具有与图5所示不同的配置。图5中所示的各组件可以采用硬件、软件或其组合实现。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被服务器执行时实现上述所有实施方式中任一所述的方法，具体可参见上述方法实施例中的描述，为避免重复，此处适当省略详细描述。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种页面展示的方法，其特征在于，应用于客户端，所述方法包括：

在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面；

响应于展示所述模型页面的操作，展示所述模型页面的内容。

2.根据权利要求1所述的方法，其特征在于，在所述在展示前置页面时预加载模型页面的内容之前，所述方法还包括：

获取所述内容的历史平均加载时间；

所述在展示前置页面时预加载模型页面的内容，包括：

基于所述历史平均加载时间确定开始加载所述内容的目标前置页面；

确认当前展示页面为所述目标前置页面，则开始预加载所述模型页面的内容。

3.根据权利要求1-2任一项所述的方法，其特征在于，所述在展示前置页面时预加载模型页面的内容，包括：

加载引擎资源，其中，所述引擎资源用于对所述内容进行解析和加载；

在展示前置页面时通过所述引擎资源预加载所述模型页面的内容。

4.根据权利要求1-2任一项所述的方法，其特征在于，在所述展示所述模型页面的内容之后，所述方法还包括：

在确认所述模型页面被切换到其他展示页面的条件下，将所述内容和引擎资源隐藏到浏览器中。

5.根据权利要求4所述的方法，其特征在于，在所述将所述内容和引擎资源隐藏到浏览器中之后，所述方法还包括：

在确认所述其他展示页面被切换到所述模型页面的条件下，获取并加载隐藏在所述浏览器中的所述内容和引擎资源。

6.根据权利要求1-2任一项所述的方法，其特征在于，在所述展示所述模型页面的内容之后，所述方法还包括：

响应于退出页面指令，将所述内容和引擎资源删除。

7.一种页面展示的***，其特征在于，所述***包括：

模型存储服务器，被配置为存储模型页面的内容；

客户端，被配置为预加载所述模型页面的内容，并且根据所述模型页面的内容执行如权利要求1-6任一项所述的方法，展示所述内容。

8.一种页面展示的装置，其特征在于，所述装置包括：

内容加载模块，被配置为在展示前置页面时预加载模型页面的内容，其中，所述前置页面为展示在所述模型页面之前的页面；

内容展示模块，被配置为响应于展示所述模型页面的操作，展示所述模型页面的内容。

9.一种电子设备，其特征在于，包括：处理器、存储器和总线；

所述处理器通过所述总线与所述存储器相连，所述存储器存储有计算机程序，所述计算机程序由所述处理器执行时可实现如权利要求1-6任一项所述方法。

10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被执行时可实现如权利要求1-6任一项所述方法。

Images