一种页面加载的方法、装置及电子设备与流程

1.本发明涉及互联网技术领域，尤其涉及一种页面加载的方法、装置及电子设备。


背景技术：

2.随着计算机技术和互联网技术的快速发展，用户在使用浏览器、应用程序等页面的时候，用户的需求越来越多，为了满足用户的需求浏览器、应用程序等展示的元素也越来越多。
3.在页面展示过程中，由于数据量比较大，易出现页面渲染时间长、卡顿。丢帧等问题。
4.因此，提出一种页面加载的方法、装置及电子设备。


技术实现要素：

5.本说明书提供一种页面加载的方法、装置及电子设备，实现了页面的快速加载，减少了用户的等待时间，提升了用户的使用体验。
6.本技术提供的一种页面加载的方法采用如下的技术方案，包括：
7.获取待渲染数据；
8.对所述待渲染数据中的大数据组进行切分，得到多个数据单元；
9.将所述数据单元分入连续帧的待渲染页面的不同帧的渲染任务队列中；
10.在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，完成当前帧的所述待渲染页面的渲染。
11.可选的，所述对所述待渲染数据中的大数据组进行切分，得到多个数据单元，包括：
12.通过异步线程，按最小颗粒度对所述大数据组进行切分，得到多个所述数据单元。
13.可选的，所述在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，包括：
14.通过主线程对所述待渲染数据中的小数据组进行渲染，并在所述小数据组渲染完毕后，判断当前帧的待渲染页面的渲染任务队列是否为空；
15.当所述渲染任务队列不为空时，提取所述渲染任务队列中的所述数据单元通过所述主线程执行，直至所述渲染任务队列为空；
16.当所述渲染任务队列为空时，完成当前帧的所述待渲染页面的渲染。
17.可选的，所述提取所述渲染任务队列中的所述数据单元通过所述主线程执行，包括：
18.判断所述渲染任务队列中是否包含宏任务；
19.当所述渲染任务队列包含宏任务时，执行所述宏任务；
20.当所述渲染任务队列不包含宏任务时，执行所述微任务。
21.可选的，所述方法还包括：
22.获取每组所述待渲染数据的目标属性；
23.判断所述目标属性是否超过预设阈值；
24.当所述目标属性大于预设阈值时，所述待渲染数据为所述大数据组；
25.当所述目标属性小于或等于预设阈值时，所述待渲染数据为小数据组。
26.本技术提供的一种页面加载的装置采用如下的技术方案，包括：
27.获取模块，用以获取待渲染数据；
28.切分模块，用以对所述待渲染数据中的大数据组进行切分，得到多个数据单元；
29.分组模块，用以将所述数据单元分入连续帧的待渲染页面的不同帧的渲染任务队列中；
30.渲染模块，用以在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，完成当前帧的所述待渲染页面的渲染。
31.可选的，所述切分模块，具体用以通过异步线程，按最小颗粒度对所述大数据组进行切分，得到多个所述数据单元。
32.可选的，所述渲染模块，具体用以通过主线程对所述待渲染数据中的小数据组进行渲染，并在所述小数据组渲染完毕后，判断当前帧的待渲染页面的渲染任务队列是否为空；当所述渲染任务队列不为空时，提取所述渲染任务队列中的所述数据单元通过所述主线程执行，直至所述渲染任务队列为空；当所述渲染任务队列为空时，完成当前帧的所述待渲染页面的渲染。
33.本说明书还提供一种电子设备，其中，该电子设备包括：
34.处理器；以及，
35.存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行上述任一项方法。
36.本说明书还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现上述任一项方法。
37.本发明中，通过异步线程将大数据组进行拆分，得到多个数据单元，将数据单元分到每个视频帧的加载时间段里，即将一个大数据组的加载过程分为多个数据单元进行加载，以解决页面渲染时间长、卡段、丢帧等问题，极大改善设备性能，使系统更加流畅稳定。
附图说明
38.图1为本说明书实施例提供的一种页面加载的方法的原理示意图；
39.图2为本说明书实施例提供的一种页面加载的方法的流程图；
40.图3为本说明书实施例提供的一种页面加载的装置的结构示意图；
41.图4为本说明书实施例提供的一种电子设备的结构示意图；
42.图5为本说明书实施例提供的一种计算机可读介质的原理示意图。
具体实施方式
43.以下描述用于揭露本发明以使本领域技术人员能够实现本发明。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本发明的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背
离本发明的精神和范围的其他技术方案。
44.现在将参考附图1
‑
5更全面地描述本发明的示例性实施例。然而，示例性实施例能够以多种形式实施，且不应被理解为本发明仅限于在此阐述的实施例。相反，提供这些示例性实施例能够使得本发明更加全面和完整，更加便于将发明构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的元件、组件或部分，因而将省略对它们的重复描述。
45.在符合本发明的技术构思的前提下，在某个特定的实施例中描述的特征、结构、特性或其他细节不排除可以以合适的方式结合在一个或更多其他的实施例中。
46.在对于具体实施例的描述中，本发明描述的特征、结构、特性或其他细节是为了使本领域的技术人员对实施例进行充分理解。但是，并不排除本领域技术人员可以实践本发明的技术方案而没有特定特征、结构、特性或其他细节的一个或更多。
47.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
48.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
49.术语“和/或”或者“及/或”包括相关联的列出项目中的任一个或多者的所有组合。
50.图1为本说明书实施例提供的一种页面加载的方法的原理示意图，图2为本说明书实施例提供的一种页面加载的方法的流程图，该方法可以包括：
51.s101：获取待渲染数据。
52.在本说明书实施例中，从数据库中获取待渲染数据，数据库包括mysql、hbase、hive。mysql，一种关系型数据库管理系统；hbase，一个分布式的、面向列的开源数据库；hive，基于hadoop的一个数据仓库工具，用来进行数据提取、转化、加载。
53.s102：对所述待渲染数据中的大数据组进行切分，得到多个数据单元。
54.可选的，所述对所述待渲染数据中的大数据组进行切分，得到多个数据单元，包括：
55.通过异步线程，按最小颗粒度对所述大数据组进行切分，得到多个所述数据单元。
56.在本说明书实施例中，大数据组包括大数据列表、大数据展示区块，按照最小颗粒度对大数据组进行切分，即，将大数据组中的每条数据在待渲染页面对应一条dom(document object model，文档对象模型)生成，利用for循环逐一处理，得到多个数据单元。异步线程，比如：大数据组包括数据a、数据b，将大数据组中的数据a拆分成数据单元a的过程中，数据b发送处理请求后仍然执行当前任务，直至数据单元a处理完成，数据b结束执行当前任务，将大数据组中的数据b拆分成数据单元b。
57.s103：将所述数据单元分入连续帧的待渲染页面的不同帧的渲染任务队列中。
58.在本说明书实施例中，待渲染页面由连续帧组成，浏览器支持帧率渲染方式会进入到事件循环(event loop)中，利用浏览器的api(application programming interface，应用程序接口)将拆分得到的数据单元分入浏览器执行帧(requestidlecallback)中由js引擎执行，基于预设顺序对数据单元进行排列，预设顺序包括分入浏览器执行帧的顺序、根
据经验值设置的优先级顺序。
59.s104：在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，完成当前帧的所述待渲染页面的渲染。
60.可选的，所述在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，包括：
61.通过主线程对所述待渲染数据中的小数据组进行渲染，并在所述小数据组渲染完毕后，判断当前帧的待渲染页面的渲染任务队列是否为空；
62.当所述渲染任务队列不为空时，提取所述渲染任务队列中的所述数据单元通过所述主线程执行，直至所述渲染任务队列为空；
63.当所述渲染任务队列为空时，完成当前帧的所述待渲染页面的渲染。
64.在本说明书实施例中，主线程包括js执行栈，js执行栈的任务为渲染任务，js执行栈中任务都为不耗时同步任务。js执行栈对待渲染数据的小数据组以队列的形式进行渲染，同时，待渲染数据的大数据在异步线程中进行切分任务以及进入事件循环中。当小数据组渲染完毕后，判断当前帧的渲染任务队列是否为空，即当前帧的渲染任务队列是否执行完毕。当渲染队列没有执行完毕的时候，提取渲染任务队列中的数据单元，将提取的数据单元通过js执行栈执行渲染任务，直至渲染任务队列全部执行完毕。当渲染队列执行完毕的时候，当前帧的待渲染页面的渲染工作完成。
65.可选的，所述提取所述渲染任务队列中的所述数据单元通过所述主线程执行，包括：
66.判断所述渲染任务队列中是否包含宏任务；
67.当所述渲染任务队列包含宏任务时，执行所述宏任务；
68.当所述渲染任务队列不包含宏任务时，执行所述微任务。
69.在本说明书实施例中，事件循环机制，即分析任务是属于宏任务还是微任务。宏任务、微任务之间存在优先级，优先执行宏任务，后执行微任务。当渲染任务队列包含宏任务，优先执行宏任务再执行微任务；当渲染任务队列不包含宏任务，直接执行微任务。
70.可选的，所述方法还包括：
71.获取每组所述待渲染数据的目标属性；
72.判断所述目标属性是否超过预设阈值；
73.当所述目标属性大于预设阈值时，所述待渲染数据为所述大数据组；
74.当所述目标属性小于或等于预设阈值时，所述待渲染数据为小数据组。
75.在本说明书实施例中，待渲染数据的目标属性包括待渲染数据的数据条数、待渲染数据的数据量大小，分别对应设置相应的预设阈值。比如：获取待渲染数据的数据量大小，即length(长度)，判断length是否超过10000，当length大于10000时，待渲染数据即为大数据组；当length小于或等于10000时，待渲染数据为小数据组。
76.在本说明书实施例中，通过异步线程将大数据组进行拆分，得到多个数据单元，将数据单元分到每个视频帧的加载时间段里，即将一个大数据组的加载过程分为多个数据单元进行加载，以解决页面渲染时间长、卡段、丢帧等问题，极大改善设备性能，使系统更加流畅稳定。
77.图3本说明书实施例提供的一种页面加载的装置的结构示意图，该装置可以包括：
78.获取模块201，用以获取待渲染数据；
79.切分模块202，用以对所述待渲染数据中的大数据组进行切分，得到多个数据单元；
80.分组模块203，用以将所述数据单元分入连续帧的待渲染页面的不同帧的渲染任务队列中；
81.渲染模块204，用以在待渲染数据中的小数据组渲染完毕后，获取当前帧的待渲染页面的渲染任务队列中的所述数据单元进行渲染，完成当前帧的所述待渲染页面的渲染。
82.可选的，所述切分模块，具体用以通过异步线程，按最小颗粒度对所述大数据组进行切分，得到多个所述数据单元。
83.可选的，所述渲染模块，具体用以通过主线程对所述待渲染数据中的小数据组进行渲染，并在所述小数据组渲染完毕后，判断当前帧的待渲染页面的渲染任务队列是否为空；当所述渲染任务队列不为空时，提取所述渲染任务队列中的所述数据单元通过所述主线程执行，直至所述渲染任务队列为空；当所述渲染任务队列为空时，完成当前帧的所述待渲染页面的渲染。
84.可选的，所述提取所述渲染任务队列中的所述数据单元通过所述主线程执行，具体还包括：
85.判断所述渲染任务队列中是否包含宏任务；
86.当所述渲染任务队列包含宏任务时，执行所述宏任务；
87.当所述渲染任务队列不包含宏任务时，执行所述微任务。
88.可选的，所述装置还包括：
89.获取每组所述待渲染数据的目标属性；
90.判断所述目标属性是否超过预设阈值；
91.当所述目标属性大于预设阈值时，所述待渲染数据为所述大数据组；
92.当所述目标属性小于或等于预设阈值时，所述待渲染数据为小数据组。
93.本发明实施例的装置的功能已经在上述的方法实施例中进行了描述，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。
94.基于同一发明构思，本说明书实施例还提供一种电子设备。
95.下面描述本发明的电子设备实施例，该电子设备可以视为对于上述本发明的方法和装置实施例的具体实体实施方式。对于本发明电子设备实施例中描述的细节，应视为对于上述方法或装置实施例的补充；对于在本发明电子设备实施例中未披露的细节，可以参照上述方法或装置实施例来实现。
96.图4为本说明书实施例提供的一种电子设备的结构示意图。下面参照图4来描述根据本发明该实施例的电子设备300。图4显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
97.如图4所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：至少一个处理单元310、至少一个存储单元320、连接不同系统组件(包括存储单元320和处理单元310)的总线330、显示单元340等。
98.其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述处理方法部分中描述的根据本发明各种示例
性实施方式的步骤。例如，所述处理单元310可以执行如图1所示的步骤。
99.所述存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(ram)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(rom)3203。
100.所述存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
101.总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
102.电子设备300也可以与一个或多个外部设备400(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。网络适配器360可以通过总线330与电子设备300的其它模块通信。应当明白，尽管图4中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid系统、磁带驱动器以及数据备份存储系统等。
103.通过以上的实施方式的描述，本领域的技术人员易于理解，本发明描述的示例性实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个计算机可读的存储介质(可以是cd
‑
rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本发明的上述方法。当所述计算机程序被一个数据处理设备执行时，使得该计算机可读介质能够实现本发明的上述方法，即：如图1所示的方法。
104.图5为本说明书实施例提供的一种计算机可读介质的原理示意图。
105.实现图1所示方法的计算机程序可以存储于一个或多个计算机可读介质上。计算机可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑盘只读存储器(cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。
106.所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、rf等等，或者上述的任意合适的组合。
107.可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如java、c 等，还包括常规的过程式程序设计语言—诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(lan)或广域网(wan)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
108.综上所述，本发明可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(dsp)等通用数据处理设备来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
109.以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，本发明不与任何特定计算机、虚拟装置或者电子设备固有相关，各种通用装置也可以实现本发明。以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
110.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。
111.以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。