CN109783757A - 渲染网页的方法及装置、系统、存储介质、电子装置 - Google Patents

Abstract

本发明提供了一种渲染网页的方法及装置、系统、存储介质、电子装置，其中，该方法包括：确定客户端的网页可视窗口的界面范围；根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。通过本发明，解决了相关技术中渲染树形图像时占用系统资源过大的技术问题，可以减少系统资源开销，提高了加载速度，能减少网页加载的时间，降低系统资源的占用，提高实际用户的体验，防止网页卡死。

Description

渲染网页的方法及装置、系统、存储介质、电子装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种渲染网页的方法及装置、系统、存储介质、电子装置。

背景技术

网页是构成网站的基本元素，网站也是由网页组成的，网页加载的快慢对用户的体验有重要影响，低的系统资源占用的页面树状图框架是一种重新定义网页树状图的渲染模式，通过这种框架模式可以高效缩短网页加载速度，降低系统资源的占用。

相关技术中，人们通过浏览器的网页获取信息，在一些银行或者大型公司，通常会用网页的树状架构图显示公司的组织架构，而网页页面的树状图渲染通常是直接渲染所有获取的内容在页面上，往往会导致网页加载缓慢甚至卡死，尤其在组织架构异常复杂、结点数量几十万或上百万时，网页卡死的现象频频发生严重影响体验。

针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。

发明内容

本发明实施例提供了一种渲染网页的方法及装置、系统、存储介质、电子装置。

根据本发明的一个实施例，提供了一种渲染网页的方法，包括：确定客户端的网页可视窗口的界面范围；根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

可选的，在所述网页可视窗口内显示所述第一树形图像之后，所述方法还包括：监听所述客户端输入组件的动态事件；在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；

渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

可选的，在当前网页可视窗口内显示所述第二树形图像之后，所述方法还包括：在所述客户端本地删除所述第一网页数据。

可选的，确定客户端的网页可视窗口的界面范围包括：确定所述客户端的网页可视窗口中第一子窗口与第二子窗口的边界线，其中，所述第一子窗口用于显示树形图像，所述第二子窗口用于显示除所述树形图像之外的其他画面；将所述边界线与所述网页可视窗口的临界线围成的范围作为所述界面范围。

可选的，根据所述界面范围获取树状图内容的第一网页数据包括：计算与所述界面范围的面积匹配的结点级数；获取所述结点级数内的多个分支结点的第一网页数据，其中，所述树状图内容包括所述分支结点和叶子结点，所述第一网页数据包括所述多个分支结点的树形结构和结点内容。

根据本发明的另一个实施例，提供了一种渲染网页的装置，包括：确定模块，用于确定客户端的网页可视窗口的界面范围；第一获取模块，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；第一渲染模块，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

可选的，所述装置还包括：监听模块，用于在所述渲染模块在所述网页可视窗口内显示所述第一树形图像之后，监听所述客户端输入组件的动态事件；第二获取模块，用于在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；第二渲染模块，用于渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

可选的，所述方法还包括：删除模块，用于在所述第一渲染模块在当前网页可视窗口内显示所述第二树形图像之后，在所述客户端本地删除所述第一网页数据。

可选的，所述确定模块包括：第一确定单元，用于确定所述客户端的网页可视窗口中第一子窗口与第二子窗口的边界线，其中，所述第一子窗口用于显示树形图像，所述第二子窗口用于显示除所述树形图像之外的其他画面；第二确定单元，用于将所述边界线与所述网页可视窗口的临界线围成的范围作为所述界面范围。

可选的，所述第一渲染模块包括：计算单元，用于计算与所述界面范围的面积匹配的结点级数；获取单元，用于获取所述结点级数内的多个分支结点的第一网页数据，其中，所述树状图内容包括所述分支结点和叶子结点，所述第一网页数据包括所述多个分支结点的树形结构和结点内容。

根据本发明的又一个实施例，还提供了一种渲染网页的系统，包括客户端和服务器，所述客户端包括：确定模块，用于确定客户端的网页可视窗口的界面范围；第一获取模块，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在所述服务器；第一渲染模块，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像；所述服务器，用于存储所述第二网页数据。

根据本发明的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项装置实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

通过本发明，根据客户端的网页可视窗口的界面范围，优先渲染可视窗口中的树状图内容，其他网页数据放在服务器，后续再根据用户需求再渲染更新当前可视窗口的树形图像。解决了相关技术中渲染树形图像时占用系统资源过大的技术问题，可以减少系统资源开销，提高了加载速度，能减少网页加载的时间，降低系统资源的占用，提高实际用户的体验，防止网页卡死。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是本发明实施例的一种渲染网页的服务器的硬件结构框图；

图2是根据本发明实施例的一种渲染网页的方法的流程图；

图3是本发明实施例的树状图的机构示意图；

图4是本发明实施例树形图像的切换示例图；

图5是根据本发明实施例的渲染网页的装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端、或者类似的可显示界面的运算装置中执行。以运行在移动终端上为例，图1是本发明实施例的一种渲染网页的移动终端的硬件结构框图。如图1所示，移动终端10可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，可选地，上述移动终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述移动终端的结构造成限定。例如，移动终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的一种渲染网页的方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至移动终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种渲染网页的方法，图2是根据本发明实施例的一种渲染网页的方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202，确定客户端的网页可视窗口的界面范围；

本实施例的客户端可以是任一带有显示屏的电子设备，如台式电脑，笔记本，手机，平板电脑可以接入网络电子设备。网页可视窗口可以是客户端显示屏的显示窗口，或者是客户端上运行的软件(如浏览器)的显示窗口。

步骤S204，根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

在获取树状图内容的第一网页数据时，可以是服务器获取第一网页数据和第二网页数据，只渲染所述第一网页数据，将暂时不用渲染的第二网页数据又发送回服务器，或者直接保存在客户端本地。或者仅从服务器获取第一网页数据，在需要渲染第二网页数据，再从服务器获取第二网页数据。

本实施例的树状图是一种显示数据信息的结构，按照层次一级一级地显示，相邻形成父子关系；

步骤S206，渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

通过上述步骤，根据客户端的网页可视窗口的界面范围，优先渲染可视窗口中的树状图内容，其他网页数据放在服务器，后续再根据用户需求再渲染更新当前可视窗口的树形图像。解决了相关技术中渲染树形图像时占用系统资源过大的技术问题，可以减少系统资源开销，提高了加载速度，能减少网页加载的时间，降低系统资源的占用，提高实际用户的体验，防止网页卡死。

图3是本发明实施例的树状图的机构示意图，数据元素为结点(node)，由数据项和数据元素之间的关系组成，在图中示意了10个结点，度为0的结点为叶子结点(Leaf Node)(终端结点)，结点E、F、G、H、I、J都是叶子结点，度不为0的结点为分支结点(Branch Node)，结点A、B、C、D是分支结点，相邻结点形成父子关系，如A结点为C结点的父结点，G结点为B结点的子结点等，在不同的实施场景中，每个结点的结点数据不同，如组织架构的场景中，各级结点形成部门间的从属关系(如B结点为业务部，E结点为从属于业务部门的某个业务团队)，在地理位置的场景中，各级结点形成地理位置的行政隶属关系(如B结点为北京市，E结点为隶属于北京市的某个区)，在逻辑控制的场景中，各级结点代表控制权限的优先级和控制与被控制的关系(如A结点权限最高，可以控制B,C,D结点，B结点只能控制E,F,G结点)。

在本实施例的一个实施方式中，在所述网页可视窗口内显示所述第一树形图像之后，还包括：

S11，监听所述客户端输入组件的动态事件；

本实施例的输入组件可以是鼠标，键盘，触控屏的控制组件，通过输入组件可以向客户端发送控制指令，如拖动指令，加载指令，缩放指令等；

S12，在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；

在监听到用于指示显示第二树形图像的指定动态事件时，用户想查看更多的树形图像，由于网页可视窗口的界面范围有限，只能显示一部分的树形图像(如当前显示的第一树形图像)，因此需要从服务器获取第二网页数据，并加载到客户端。

S13，渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

可选的，在当前网页可视窗口内显示所述第二树形图像之后，所述方法还包括：在所述客户端本地删除所述第一网页数据。在在当前网页可视窗口内显示所述第二树形图像之后，第一网页数据对应的第一树形图像已经在当前网页可视窗口被切换为第二树形图像，因此客户端不用存储第一网页数据，将其从客户单删除，可以节省客户端的存储资源。

在本实施例的一个实施方式中，确定客户端的网页可视窗口的界面范围包括：

S21，确定所述客户端的网页可视窗口中第一子窗口与第二子窗口的边界线，其中，所述第一子窗口用于显示树形图像，所述第二子窗口用于显示除所述树形图像之外的其他画面；

S22，将所述边界线与所述网页可视窗口的临界线围成的范围作为所述界面范围。

在该第一子窗口为整个网页可视窗口中间的窗口时，可以直接使用临界线围成的范围作为所述界面范围，但一般显示树形图像的可视窗口通常都设置在窗口的一侧，因此需要考虑网页可视窗口的临界线。

在第一子窗口为矩形时，当前可视窗口的宽度和高度可得到界面范围的面积。

在本实施例的一个实施方式中，根据所述界面范围获取树状图内容的第一网页数据包括：计算与所述界面范围的面积匹配的结点级数；获取所述结点级数内的多个分支结点的第一网页数据，其中，所述树状图内容包括所述分支结点和叶子结点，所述第一网页数据包括所述多个分支结点的树形结构和结点内容。

树形图像的生成是按照树形模板生成的，每一级结点的树形图像占用界面范围在模板中是固定的，因此需要根据预设模板中每级结点的占用面积计算与所述界面范围的面积匹配的结点级数，在网页可视窗口可以动态变化，或者网页可视窗口内的树形图像的显示比例可以动态变化时，还需要实时考虑网页可视窗口的变化比例和网页可视窗口内的树形图像的显示比例来计算与所述界面范围的面积匹配的结点级数。

如每一级树形图像占用界面范围的一半，在一个示例中，一个网页可视窗口的界面范围最多只能完整显示两级结点，因此结点级数为两级，在初始显示时，从顶级的根结点开始显示，因此需要获取包括根结点在内的两级分支结点的第一网页数据，第一网页数据包括所述多个分支结点的树形结构和结点内容，如根结点为A结点，A结点的子结点包括：B,C,D，B结点的子结点包括：E,F,G，第一网页数据包括A结点～G结点的树形结构，以及A结点～G结点的结点内容。

图4是本发明实施例树形图像的切换示例图，其中，左边显示的为第一树形图像(包括结点A～结点E)，右边显示的为第二树形图像(包括结点D～结点I)，在监听到鼠标向下拖动滑动条时，从所述服务器获取所述第二网页数据，进而在客户端显示第二树形图像。其中，网页可视窗口包括第一子窗口和第二子窗口，第一子窗口为显示树形图像的窗口。

可选的，渲染所述第一网页数据得到第一树形图像包括：在H5页面的容器中加载第一网页数据，得到二维的第一树形图像。

可选地，上述步骤的执行主体可以为客户端，其至少连接一个服务器等，客户端可以是移动终端，PC等，服务器用于存储数据等，但不限于此。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

实施例2

在本实施例中还提供了一种渲染网页的服务器，系统，用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图5是根据本发明实施例的渲染网页的装置的结构框图，可以应用在客户端或服务器中，如图5所示，该装置包括：确定模块50，第一获取模块52，第一渲染模块54，其中，

确定模块50，用于确定客户端的网页可视窗口的界面范围；

第一获取模块52，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

第一渲染模块54，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

可选的，所述装置还包括：监听模块，用于在所述渲染模块在所述网页可视窗口内显示所述第一树形图像之后，监听所述客户端输入组件的动态事件；第二获取模块，用于在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；第二渲染模块，用于渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

可选的，所述方法还包括：删除模块，用于在所述第一渲染模块在当前网页可视窗口内显示所述第二树形图像之后，在所述客户端本地删除所述第一网页数据。

可选的，所述确定模块包括：第一确定单元，用于确定所述客户端的网页可视窗口中第一子窗口与第二子窗口的边界线，其中，所述第一子窗口用于显示树形图像，所述第二子窗口用于显示除所述树形图像之外的其他画面；第二确定单元，用于将所述边界线与所述网页可视窗口的临界线围成的范围作为所述界面范围。

可选的，所述第一渲染模块包括：计算单元，用于计算与所述界面范围的面积匹配的结点级数；获取单元，用于获取所述结点级数内的多个分支结点的第一网页数据，其中，所述树状图内容包括所述分支结点和叶子结点，所述第一网页数据包括所述多个分支结点的树形结构和结点内容。

本实施例还提供了一种渲染网页的系统，包括客户端和服务器，所述客户端包括：确定模块，用于确定客户端的网页可视窗口的界面范围；第一获取模块，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在所述服务器；第一渲染模块，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像；所述服务器，用于存储所述第二网页数据。客户端和服务器通过网络连接。

需要说明的是，终端和服务器仅是方案在执行主体上的差异，上述软件权限的设置装置中的各个示例和可选方案同样适应在服务器中，并产生相同的技术效果。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

实施例3

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，确定客户端的网页可视窗口的界面范围；

S2，根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

S3，渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，确定客户端的网页可视窗口的界面范围；

S2，根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

S3，渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种渲染网页的方法，其特征在于，包括：

确定客户端的网页可视窗口的界面范围；

根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

2.根据权利要求1所述的方法，其特征在于，在所述网页可视窗口内显示所述第一树形图像之后，所述方法还包括：

监听所述客户端输入组件的动态事件；

在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；

渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

3.根据权利要求2所述的方法，其特征在于，在当前网页可视窗口内显示所述第二树形图像之后，所述方法还包括：

在所述客户端本地删除所述第一网页数据。

4.根据权利要求1所述的方法，其特征在于，确定客户端的网页可视窗口的界面范围包括：

确定所述客户端的网页可视窗口中第一子窗口与第二子窗口的边界线，其中，所述第一子窗口用于显示树形图像，所述第二子窗口用于显示除所述树形图像之外的其他画面；

将所述边界线与所述网页可视窗口的临界线围成的范围作为所述界面范围。

5.根据权利要求1所述的方法，其特征在于，根据所述界面范围获取树状图内容的第一网页数据包括：

计算与所述界面范围的面积匹配的结点级数；

获取所述结点级数内的多个分支结点的第一网页数据，其中，所述树状图内容包括所述分支结点和叶子结点，所述第一网页数据包括所述多个分支结点的树形结构和结点内容。

6.一种渲染网页的装置，其特征在于，包括：

确定模块，用于确定客户端的网页可视窗口的界面范围；

第一获取模块，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在服务器；

第一渲染模块，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

监听模块，用于在所述渲染模块在所述网页可视窗口内显示所述第一树形图像之后，监听所述客户端输入组件的动态事件；

第二获取模块，用于在监听到用于指示显示第二树形图像的指定动态事件时，从所述服务器获取所述第二网页数据；

第二渲染模块，用于渲染所述第二网页数据得到所述第二树形图像，并在当前网页可视窗口内显示所述第二树形图像。

8.一种渲染网页的系统，包括客户端和服务器，其特征在于，

所述客户端包括：

确定模块，用于确定客户端的网页可视窗口的界面范围；

第一获取模块，用于根据所述界面范围获取树状图内容的第一网页数据，其中，所述树状图内容由所述第一网页数据和第二网页数据组成，所述第二网页数据存储在所述服务器；

第一渲染模块，用于渲染所述第一网页数据得到第一树形图像，并在当前网页可视窗口内显示所述第一树形图像；

所述服务器，用于存储所述第二网页数据。

9.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行权利要求1至5任一项中所述的方法。

10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至5任一项中所述的方法。