一种界面渲染方法、装置、设备及可读存储介质与流程

1.本发明涉及计算机技术领域，具体而言，涉及一种界面渲染方法、装置、设备及可读存储介质。


背景技术：

2.在当前技术中，为了解决前端界面快速加载的目的，一般采用将服务器返回的数据存储在本地缓存，然后将数据渲染在界面上，但是如多个月日志信息或者其他巨大的数据量时，浏览器实现渲染时易造成浏览器卡顿延迟，甚至于失去响应。


技术实现要素：

3.本发明的目的在于提供一种界面渲染方法、装置、设备及可读存储介质，以改善上述问题。为了实现上述目的，本发明采取的技术方案如下：
4.第一方面，本技术提供了一种界面渲染方法，包括：获取并缓存服务器返回数据，所述服务器返回数据包括至少两个json数据格式定义的界面元素；解析所述服务器返回数据得到第一信息，所述第一信息包括每个所述界面元素在界面中位置关系和每个所述界面元素的数据长度；根据每个所述界面元素的数据长度生成每个所述界面元素对应的替换元素；根据每个所述界面元素对应的替换元素和每个所述界面元素在界面中位置关系渲染生成初始目标界面；根据所述服务器返回数据和所述初始目标界面渲染生成目标界面并在终端显示。
5.第二方面，本技术还提供了一种界面渲染装置，包括：第一获取单元，用于获取并缓存服务器返回数据，所述服务器返回数据包括至少两个json数据格式定义的界面元素；第一解析单元，用于解析所述服务器返回数据得到第一信息，所述第一信息包括每个所述界面元素在界面中位置关系和每个所述界面元素的数据长度；空白生成单元，用于根据每个所述界面元素的数据长度生成每个所述界面元素对应的替换元素；第一渲染单元，用于根据每个所述界面元素对应的替换元素和每个所述界面元素在界面中位置关系渲染生成初始目标界面；第一显示单元，用于根据所述服务器返回数据和所述初始目标界面渲染生成目标界面并在终端显示。
6.第三方面，本技术还提供了一种界面渲染设备，包括：
7.存储器，用于存储计算机程序；
8.处理器，用于执行所述计算机程序时实现所述界面渲染方法的步骤。
9.第四方面，本技术还提供了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于界面渲染方法的步骤。
10.本发明的有益效果为：
11.本发明通过利用浏览器本身对于不同元素的加载速率不同，以及匹配用户使用时使用数据的显示区间不同，使浏览器以最优体验性能来渲染部分数据，正常加载正确数据的同时，降低造成延迟卡顿问题发生几率。
12.本发明的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明实施例了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
附图说明
13.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
14.图1为本发明实施例中所述的界面渲染方法流程示意图；
15.图2为本发明实施例中所述的界面渲染装置结构示意图；
16.图3为本发明实施例中所述的界面渲染设备结构示意图。
具体实施方式
17.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
18.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
19.实施例1：
20.本实施例提供了一种界面渲染方法。
21.参见图1，图中示出了本方法包括步骤s10、步骤s20、步骤s30、步骤s40和步骤s50。
22.s10、获取并缓存服务器返回数据，服务器返回数据包括至少两个json数据格式定义的界面元素。
23.s20、解析服务器返回数据得到第一信息，第一信息包括每个界面元素在界面中位置关系和每个界面元素的数据长度。
24.需要说明的是，在本技术中对于服务器返回数据的解析是遍历解析到最底层结构。
25.s30、根据每个界面元素的数据长度生成每个界面元素对应的替换元素。
26.s40、根据每个界面元素对应的替换元素和每个界面元素在界面中位置关系渲染生成初始目标界面。
27.s50、根据服务器返回数据和初始目标界面渲染生成目标界面并在终端显示。
28.需要说明的是，在本实施例中，终端可以是各种个人计算机、笔记本电脑、智能手机、平板电脑、导航设备和便携式可穿戴设备等。
29.在本方法中，通过接受并缓存服务器返回数据。通过解析返回数据，得到每个界面元素数据长度以及位置关系，进一步地再根据每个界面元素长度直接生成替换元素，其中，在本实施例中，替换元素为空值的界面元素，并且每个界面元素和每个界面元素对应的替换元素两者的数据长度均相同。通过然后通过每个界面元素的位置关系和对应的替换元素渲染生成初始目标界面。由于初始目标界面内的均为空的界面元素，所以初始目标界面的渲染生成速度开，且系统开销小。
30.需要说明的是，在步骤s50提及到了根据服务器返回数据和初始目标界面渲染生成目标界面。在这部分内容。具体而言是根据终端显示界面大小在目标界面中选定显示区域。其中可以理解的是，本技术的目的是加快渲染速度并且终端显示的是最终显示的内容，即终端显示区域是由真实数据渲染而成，而其他未显示区域仍然是空白数据渲染而成。通过上述方式，本方法的使用过程中相比于之前一起加载数据方式，其渲染生成速度开，且系统开销小。
31.具体而言，在步骤s30中包括步骤s31和步骤s32。
32.s31、解析服务器返回数据得到每个界面元素的数据类型，数据类型包括图片、音视频和字符串。
33.s32、根据每个界面元素的数据长度生成每个界面元素对应的空白元素，空白元素与对应的所述界面元素具有相同的数据类型和数据长度但内容为空。
34.需要说明的是，在本方法中，对于字符串数据，可以不生成替换元素的方式，或者是将其本身就作为替换元素。其原因是为，字符串数据渲染其对于系统开销占用不大。对于本领域技术人员，可以选择本方法这种方式，也可以选用直接生成替换元素的方式，本技术中不做出具体的限制。
35.在本技术公开的一些实施例中，步骤s50中包括步骤s51、步骤s52、步骤s53、步骤s54和步骤s55。
36.s51、获取显示设备信息，显示设备信息包括分辨率和显示放大倍数。
37.需要说明的是，在本步骤中显示放大倍数为浏览器浏览界面的放大倍数。
38.s52、根据分辨率和显示放大倍数计算得到数据划分区间范围。
39.可以理解的是，在本步骤中所提及的数据划分区间范围即为一个终端显示设备一次可以显示的内容。
40.s53、根据数据划分区间范围将初始目标界面分割为至少两份连续的显示区间。
41.即在本步骤中，显示设备可显示4*4的范围，那么需要将20*4的数据内容划分为5份。
42.s54、将首次显示区间中的所有替换元素根据对应关系填充数据，并构成真实首次显示区间，首次显示区间为多个显示区间中一个，对应关系为替换元素与界面元素的对应关系。
43.需要说明的是，在本技术中所提及的替换元素根据对应关系填充数据，即将每个替换元素的值修改为对应的界面元素的值。
44.需要说明的是，在本步骤中所提及的首次显示区间优选为一个页面最顶部的区域。
45.s55、对真实首位显示区间与其余显示区间进行渲染得到目标界面，并在终端显示
首次显示区间的内容。
46.在本方法中，通过将首先根据设备的实际情况对范围数据进行显示区间划分，在然后在渲染一个具有真实数据的显示区间而剩余的显示区间均为空数据。通过上述方式在进行大量返回数据渲染时，其只渲染了一部分是真实值，其余部分为空值，对于用户而言能直观感受到数据加载速度提升并且在视觉上于原有数据一起加载效果相同。
47.在本技术公开的一些实施例中，还包括步骤s60、步骤s70、步骤s80和步骤s100。
48.s60、获取鼠标点击操作。
49.s70、响应于在目标界面上的鼠标点击操作，根据鼠标点击操作的位置在目标界面上确定第一显示区间，第一显示区间为目标界面的一部分。
50.需要说明得是，在本步骤中所提及的鼠标点击操作即为鼠标点击滑动条的操作。其中根据鼠标点击操作的位置在目标界面上确定第一显示区间，即为点击滑动条的位置按比例换算出页面所应当显示位置，即本技术中的第一显示区间，其为现有技术本技术中不再赘述。
51.s80、将第一显示区间中的所有替换元素根据对应关系填充数据，形成填充数据后的第一显示区间，对应关系为替换元素与界面元素的对应关系。
52.s100、重新渲染目标界面得到更新后的目标界面，并跳转终端显示为第一显示区间。
53.在本技术中根据用户的操作选择性的进行区域渲染，降低浏览器的渲染负担。同时为了进一步地降低浏览器的负载，在本方法中还包括步骤s90。
54.s90、将当前时刻终端显示的所有替换元素的值替换为空。
55.在本技术公开的一些实施例中，还包括步骤s110、步骤s120、步骤s130、步骤s140和步骤s150。
56.s110、获取移动操作。
57.s120、响应于移动操作，根据移动操作的移动操作指令次数在目标界面上确定第二显示区间，第二显示区间为目标界面的一部分。
58.s130、将第二显示区间中的所有替换元素根据对应关系填充数据，形成填充数据后的第二显示区间，对应关系为替换元素与界面元素的对应关系。
59.s140、将当前时刻终端显示的首次显示区间到第二显示区间之间所有替换元素根据对应关系填充数据。
60.s150、重新渲染目标界面得到更新后的目标界面，并在终端显示第一内容画面，第一内容画面为从当前时刻终端显示内容滑动到第二显示区间内容的画面。
61.在本技术中根据用户的移动操作进行区域性的渲染，在保证用户浏览效果的基础上，降低了浏览器的渲染负担。
62.实施例2：
63.如图2所示，本实施例提供了一种界面渲染装置，装置包括：
64.第一获取单元10，用于获取并缓存服务器返回数据，服务器返回数据包括至少两个json数据格式定义的界面元素。
65.第一解析单元20，用于解析服务器返回数据得到第一信息，第一信息包括每个界面元素在界面中位置关系和每个界面元素的数据长度。
66.空白生成单元30，用于根据每个界面元素的数据长度生成每个界面元素对应的替换元素。
67.第一渲染单元40，用于根据每个界面元素对应的替换元素和每个界面元素在界面中位置关系渲染生成初始目标界面。
68.第一显示单元50，用于根据服务器返回数据和初始目标界面渲染生成目标界面并在终端显示。
69.在一些具体的实施例中，空白生成单元30包括：
70.第二解析单元31，用于解析服务器返回数据得到每个界面元素的数据类型，数据类型包括图片、音视频和字符串。
71.生成子单元32，用于根据每个界面元素的数据长度生成每个界面元素对应的空白元素，空白元素与对应的所述界面元素具有相同的数据类型和数据长度但内容为空。
72.在一些具体的实施例中，第一显示单元50包括：
73.第二获取单元41，用于获取显示设备信息，显示设备信息包括分辨率和显示放大倍数。
74.第一计算单元42，用于根据分辨率和显示放大倍数计算得到数据划分区间范围。
75.划分单元43，用于根据数据划分区间范围将初始目标界面分割为至少两份连续的显示区间。
76.第一填充单元44，用于将首次显示区间中的所有替换元素根据对应关系填充数据，并构成真实首次显示区间，首次显示区间为多个显示区间中一个，对应关系为替换元素与界面元素的对应关系。
77.第二渲染单元45，用于对真实首位显示区间与其余显示区间进行渲染得到目标界面，并在终端显示首次显示区间的内容。
78.在一些具体的实施例中，本装置还包括：
79.第三获取单元60，用于获取鼠标点击操作。
80.第一响应单元70，用于响应于在目标界面上的鼠标点击操作，根据鼠标点击操作的位置在目标界面上确定第一显示区间，第一显示区间为目标界面的一部分。
81.第二填充单元80，用于将第一显示区间中的所有替换元素根据对应关系填充数据，形成填充数据后的第一显示区间，对应关系为替换元素与界面元素的对应关系。
82.第三渲染单元100，用于重新渲染目标界面得到更新后的目标界面，并跳转终端显示为第一显示区间。
83.在一些具体的实施例中，本装置还包括：
84.第三填充单元90，用于将当前时刻终端显示的所有替换元素的值替换为空。
85.在一些具体的实施例中，本装置还包括：
86.第四获取单元110，用于获取移动操作。
87.第二响应单元120，用于响应于移动操作，根据移动操作的移动操作指令次数在目标界面上确定第二显示区间，第二显示区间为目标界面的一部分。
88.第四填充单元130，用于将第二显示区间中的所有替换元素根据对应关系填充数据，形成填充数据后的第二显示区间，对应关系为替换元素与界面元素的对应关系。
89.第五填充单元140，用于将当前时刻终端显示的首次显示区间到第二显示区间之
间所有替换元素根据对应关系填充数据。
90.第四渲染单元150，用于重新渲染目标界面得到更新后的目标界面，并在终端显示第一内容画面，第一内容画面为从当前时刻终端显示内容滑动到第二显示区间内容的画面。
91.需要说明的是，关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
92.实施例3：
93.相应于上面的方法实施例，本实施例中还提供了一种界面渲染设备，下文描述的一种界面渲染设备与上文描述的一种界面渲染方法可相互对应参照。
94.图3是根据示例性实施例示出的一种界面渲染设备800的框图。如图3所示，该界面渲染设备800可以包括：处理器801，存储器802。该界面渲染设备800还可以包括多媒体组件803，i/o接口804，以及通信组件805中的一者或多者。
95.其中，处理器801用于控制该界面渲染设备800的整体操作，以完成上述的界面渲染方法中的全部或部分步骤。存储器802用于存储各种类型的数据以支持在该界面渲染设备800的操作，这些数据例如可以包括用于在该界面渲染设备800上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器802可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(static random access memory，简称sram)，电可擦除可编程只读存储器(electrically erasable programmable read-only memory，简称eeprom)，可擦除可编程只读存储器(erasable programmable read-only memory，简称eprom)，可编程只读存储器(programmable read-only memory，简称prom)，只读存储器(read-only memory，简称rom)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件803可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器802或通过通信组件805发送。音频组件还包括至少一个扬声器，用于输出音频信号。i/o接口804为处理器801和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件805用于该界面渲染设备800与其他设备之间进行有线或无线通信。无线通信，例如wi-fi，蓝牙，近场通信(near fieldcommunication，简称nfc)，2g、3g或4g，或它们中的一种或几种的组合，因此相应的该通信组件805可以包括：wi-fi模块，蓝牙模块，nfc模块。
96.在一示例性实施例中，界面渲染设备800可以被一个或多个应用专用集成电路(application specific integrated circuit，简称asic)、数字信号处理器(digitalsignal processor，简称dsp)、数字信号处理设备(digital signal processing device，简称dspd)、可编程逻辑器件(programmable logic device，简称pld)、现场可编程门阵列(field programmable gate array，简称fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的界面渲染方法。
97.在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的界面渲染方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器802，上述程序指令可由界面渲染设备800的处理器801
执行以完成上述的界面渲染方法。
98.实施例4：
99.相应于上面的方法实施例，本实施例中还提供了一种可读存储介质，下文描述的一种可读存储介质与上文描述的一种界面渲染方法可相互对应参照。
100.一种可读存储介质，可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例的界面渲染方法的步骤。
101.该可读存储介质具体可以为u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可存储程序代码的可读存储介质。
102.以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
103.以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。