一种页面渲染方法、装置以及设备与流程

1.本说明书涉及计算机技术领域，尤其涉及一种页面渲染方法、装置以及设备


背景技术：

2.随着互联网的高速发展，传输速度大大加快，用户体验越来越重要，前端人员越来越重视页面的实现。其实，采用客户端渲染的模式，即页面在浏览器端进行渲染，访问页面时需要等待浏览器先下载框架文件、业务代码及静态资源并完成加载后，才能开始页面渲染工作，存在整页加载速度慢、白屏等待时间长的问题，同时，客户端渲染效率严重依赖于客户端及浏览器性能，在一些性能较差的设备或者浏览器中，渲染效率会大幅降低。
3.因此，需要一种新的页面渲染方法，能够解决页面访问性能瓶颈，提升用户体验。


技术实现要素：

4.本说明书实施例提供一种页面渲染方法、装置以及设备，用于解决以下技术问题：页面渲染开销大，路由切换时无法有效使用浏览器渲染能力，导致页面切换较慢，用户体验差。
5.为解决上述技术问题，本说明书实施例是这样实现的：
6.本说明书实施例提供的一种页面渲染方法，包括：
7.服务端获取客户端发送的页面加载请求；
8.解析所述页面加载请求，获得解析结果；
9.基于所述解析结果，获得渲染排序序列；
10.将所述渲染排序序列发送至所述客户端，进行页面渲染。
11.进一步地，所述解析所述页面加载请求，获得解析结果，具体包括：
12.所述服务端对页面加载http请求进行http解析，获得解析结果。
13.进一步地，所述基于所述解析结果，获得渲染排序序列，具体包括：
14.基于所述解析结果，获得业务包；
15.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
16.进一步地，所述基于所述解析结果，获得业务包，具体包括：
17.基于所述解析结果，获得vue业务包。
18.进一步地，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
19.进一步地，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
20.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
21.进一步地，所述预设框架为vue框架。
22.进一步地，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
23.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
24.本说明书实施例提供的一种页面渲染装置，包括：
25.获取模块，服务端获取客户端发送的页面加载请求；
26.解析模块，解析所述页面加载请求，获得解析结果；
27.渲染模块，基于所述解析结果，获得渲染排序序列；
28.发送模块，将所述渲染排序序列发送至所述客户端，进行页面渲染。
29.进一步地，所述解析所述页面加载请求，获得解析结果，具体包括：
30.所述服务端对页面加载http请求进行http解析，获得解析结果。
31.进一步地，所述基于所述解析结果，获得渲染排序序列，具体包括：
32.基于所述解析结果，获得业务包；
33.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
34.进一步地，所述基于所述解析结果，获得业务包，具体包括：
35.基于所述解析结果，获得vue业务包。
36.进一步地，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
37.进一步地，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
38.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
39.进一步地，所述预设框架为vue框架。
40.进一步地，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
41.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
42.本说明书实施例还提供一种电子设备，包括：
43.至少一个处理器；以及，
44.与所述至少一个处理器通信连接的存储器；其中，
45.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
46.服务端获取客户端发送的页面加载请求；
47.解析所述页面加载请求，获得解析结果；
48.基于所述解析结果，获得渲染排序序列；
49.将所述渲染排序序列发送至所述客户端，进行页面渲染。
50.进一步地，所述解析所述页面加载请求，获得解析结果，具体包括：
51.所述服务端对页面加载http请求进行http解析，获得解析结果。
52.进一步地，所述基于所述解析结果，获得渲染排序序列，具体包括：
53.基于所述解析结果，获得业务包；
54.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
55.进一步地，所述基于所述解析结果，获得业务包，具体包括：
56.基于所述解析结果，获得vue业务包。
57.进一步地，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
58.进一步地，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
59.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
60.进一步地，所述预设框架为vue框架。
61.进一步地，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
62.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
63.本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：能够解决页面访问性能瓶颈，降低服务器性能的消耗，提升用户体验。
附图说明
64.为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
65.图1为本说明书实施例提供的一种页面渲染方法的示意图；
66.图2为本说明书实施例提供的一种页面渲染装置的示意图。
具体实施方式
67.为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本技术保护的范围。
68.服务器端渲染的优势就是容易实现seo(search engine optimization)优化，首屏加载快。由于客户端接收到的是完整的html页面，有利于进行seo优化。首屏加载快：首页是通过node加载的html字符串，用户直接可以看到完整html，所以更快。目前vue的服务端渲染性能消耗性能相对于react相对较大，因此，本说明书实施例提供一种页面渲染方法，以降低vue的服务端渲染性能的消耗。
69.vue是一套构建用户界面的渐进式(用到哪一块就用哪一块，不需要全部用上)前端框架，vue的核心库只关注视图层。reactreact是一个用于构建用户界面的javascript库，主要用于ui。
70.图1为本说明书实施例提供的一种页面渲染方法的示意图，该页面渲染方法包括：
71.步骤s101：服务端获取客户端发送的页面加载请求。
72.在本说明书实施例中，所述客户端可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(pda)、车载设备、智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表、智能手环等。
73.在本说明书实施例中，服务端为户端服务的，服务的内容诸如向客户端提供资源，保存客户端数据等。在本说明书实施例中，服务端可以为便携式计算机、台式电脑等。
74.在本说明书实施例中，页面加载请求为页面渲染请求，具体的，页面加载请求为http(hyper text transfer protocol，超文本传输协议)请求。
75.步骤s103：解析所述页面加载请求，获得解析结果。
76.在本说明书实施例中，所述解析所述页面加载请求，获得解析结果，具体包括：
77.所述服务端对页面加载http请求进行http解析，获得解析结果。
78.步骤s105：基于所述解析结果，获得渲染排序序列。
79.在本说明书实施例中，所述基于所述解析结果，获得渲染排序序列，具体包括：
80.基于所述解析结果，获得业务包；
81.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
82.在本说明书实施例中，业务包为可进行服务端页面渲染的框架的业务包。具体地，进行服务端页面渲染的框架可以为vue框架。
83.在本说明书实施例中，所述基于所述解析结果，获得业务包，具体包括：
84.基于所述解析结果，获得vue业务包。
85.在本说明书实施例中，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
86.在本说明书实施例中，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
87.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
88.在本说明书实施例中，所述预设框架为vue框架。
89.继续延续前例，业务包为vue业务包，预设框架为vue框架，进一步从服务端的运行环境中，通过wget下载vue框架后，在源代码中提取vue框架的运行库，将获取的vue框架的运行库注入服务端的运行环境中，获得服务端的运行库。
90.wget是一个强力方便的命令行下的下载工具，可以通过http和ftp协议(两种最广泛的互联网协议)从因特网中检索并获取文件，可实现批量下载。
91.进一步地，根据已注入运行库的所述服务端的运行环境中，通过vue运行指令，运行前述vue业务包，获得渲染操作序列。
92.步骤s107：将所述渲染排序序列发送至所述客户端，进行页面渲染。
93.在本说明书实施例中，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
94.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
95.采用本说明书实施例提供的页面渲染方法，能够解决页面访问性能瓶颈，降低服务器性能的消耗，提升用户体验。
96.上述内容详细说明了一种页面渲染方法，与之相应的，本说明书还提供了一种页面渲染装置，如图2所示。图2为本说明书实施例提供的一种页面渲染装置的示意图，本说明书实施例提供的页面渲染装置包括：
97.获取模块201，服务端获取客户端发送的页面加载请求；
98.解析模块203，解析所述页面加载请求，获得解析结果；
99.渲染模块205，基于所述解析结果，获得渲染排序序列；
100.发送模块207，将所述渲染排序序列发送至所述客户端，进行页面渲染。
101.进一步地，所述解析所述页面加载请求，获得解析结果，具体包括：
102.所述服务端对页面加载http请求进行http解析，获得解析结果。
103.进一步地，所述基于所述解析结果，获得渲染排序序列，具体包括：
104.基于所述解析结果，获得业务包；
105.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
106.进一步地，所述基于所述解析结果，获得业务包，具体包括：
107.基于所述解析结果，获得vue业务包。
108.进一步地，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
109.进一步地，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
110.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
111.进一步地，所述预设框架为vue框架。
112.进一步地，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
113.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
114.本说明书实施例还提供一种电子设备，包括：
115.至少一个处理器；以及，
116.与所述至少一个处理器通信连接的存储器；其中，
117.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
118.服务端获取客户端发送的页面加载请求；
119.解析所述页面加载请求，获得解析结果；
120.基于所述解析结果，获得渲染排序序列；
121.将所述渲染排序序列发送至所述客户端，进行页面渲染。
122.进一步地，所述解析所述页面加载请求，获得解析结果，具体包括：
123.所述服务端对页面加载http请求进行http解析，获得解析结果。
124.进一步地，所述基于所述解析结果，获得渲染排序序列，具体包括：
125.基于所述解析结果，获得业务包；
126.在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列。
127.进一步地，所述基于所述解析结果，获得业务包，具体包括：
128.基于所述解析结果，获得vue业务包。
129.进一步地，所述运行库是在所述服务端的运行环境中，在预设框架中提取预设框架的运行库，将所述预设框架的运行库注入所述服务端的运行环境，获得的运行库。
130.进一步地，所述在已注入运行库的所述服务端的运行环境中，运行所述业务包，获得所述渲染排序序列，具体包括：
131.所述在已注入运行库的所述服务端的运行环境中，通过运行指令，运行所述业务包，获得所述渲染排序序列。
132.进一步地，所述预设框架为vue框架。
133.进一步地，所述将所述渲染排序序列发送至所述客户端，进行页面渲染，具体包括：
134.将所述渲染排序序列发送至所述客户端，所述客户端根据所述渲染排序序列进行页面渲染。
135.上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
136.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
137.本说明书实施例提供的装置、电子设备、非易失性计算机存储介质与方法是对应的，因此，装置、电子设备、非易失性计算机存储介质也具有与对应方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述对应装置、电子设备、非易失性计算机存储介质的有益技术效果。
138.在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因
此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(programmable logic device,pld)(例如现场可编程门阵列(field programmable gate array，fpga))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片pld上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(hardware description language，hdl)，而hdl也并非仅有一种，而是有许多种，如abel(advanced boolean expression language)、ahdl(altera hardware description language)、confluence、cupl(cornell university programming language)、hdcal、jhdl(java hardware description language)、lava、lola、myhdl、palasm、rhdl(ruby hardware description language)等，目前最普遍使用的是vhdl(very
‑
high
‑
speed integrated circuit hardware description language)与verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。
139.控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(application specific integrated circuit，asic)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：arc 625d、atmel at91sam、microchip pic18f26k20以及silicone labs c8051f320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
140.上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
141.为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书一个或多个实施例时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
142.本领域内的技术人员应明白，本说明书实施例可提供为方法、系统、或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
143.本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的
流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据优化设备的处理器以产生一个机器，使得通过计算机或其他可编程数据优化设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
144.这些计算机程序指令也可存储在能引导计算机或其他可编程数据优化设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
145.这些计算机程序指令也可装载到计算机或其他可编程数据优化设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
146.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
147.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
148.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd
‑
rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
149.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
150.本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
151.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实
施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
152.以上所述仅为本说明书实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。