本发明涉及计算机技术领域,具体涉及一种网页渲染方法及相关设备。
背景技术:
随着前端技术的不断发展,网页已从单纯的信息展示发展为用户可参与网页内容的生成,即,用户可进行网页定制。通常情况下,用户在进行网页定制时,修改后的页面元数据一般会保存到数据库中,在进行页面渲染时,页面元数据在服务器解析编译,并渲染成完整的超文本标记语言(hypertextmark-uplanguage,html)页面,从而返回给浏览器客户端展示。如果大量页面同时请求渲染,服务器需要同时对大量的元数据进行转换,不仅会降低渲染效率,还会增加服务器的内存开销。
技术实现要素:
本发明实施例公开了一种网页渲染方法及相关设备,可以在高并发场景下提高网页渲染效率,减少服务器的内存开销。
本发明实施例第一方面公开了一种网页渲染方法,该方法可以包括:
客户端在向服务器发送页面加载请求后,可接收服务器基于该页面加载请求返回的初始页面内容,其中,该初始页面内容包括前端框架,例如uee框架,以及至少一个文档对象模型(documentobjectmodel,dom)。客户端可以基于前端框架加载该至少一个dom,以及基于每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据,从而基于该每个dom匹配的页面模板将该每个dom匹配的页面元数据进行渲染,得到该每个dom的html片段,并将至少一个dom的html片段组成html页面,并展示该html页面。
由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
可选的,客户端基于前端框架加载至少一个dom的具体方式可以为:
客户端将至少一个dom加载至前端框架,并确定目标dom,其中,目标dom为前端框架从至少一个dom中识别出的dom;
那么客户端基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以为:
针对目标dom中的每个dom,客户端基于该每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
可选的,客户端向服务器发送页面加载请求后,接收服务器基于该页面加载请求返回的初始页面内容之前,该方法还可以包括:
客户端在接收到页面定制请求时,展示定制界面,接收用户在定制界面中的配置操作,得到由配置操作产生的页面元数据,从而建立起页面元数据与dom的第一属性的关联关系,并将该页面元数据发送至服务器,以便服务器保存该页面元数据。
客户端提供可视化的定制界面,能够灵活高效的实现页面配置,让不懂技术的用户也能实现产品定制,降低定制门槛,提升定制效果,从而能够在一定程度上降低产品二次定制开发和维护的成本。
可选的,该特征属性具体可包括第一属性和第二属性,第一属性具体可为元(meta)属性,第二属性具体可为名称name属性,或者其他属性,如component-name属性、meta-id属性等,本发明实施例不做限定。
那么客户端基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以包括以下几种:
方式一、
初始页面内容还可以包括页面模板和页面元数据,客户端从而可以从初始页面内容中查找与每个dom的第二属性相匹配的页面模板,以及与每个dom的第一属性关联的页面元数据。页面元数据和页面模板与前端框架和dom一起发送给客户端,可以减少客户端与服务器之间的信息交互,能够提高页面渲染效率,并减少客户端与服务器两侧的运行压力。
方式二、
客户端向服务器发送请求消息,该请求消息用于请求获取每个dom的页面模板和页面元数据,其中,该请求消息包含每个dom的第二属性和第一属性,客户端从而接收服务器基于该请求消息返回与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
可选的,初始页面内容还可以只包括所需的页面元数据,客户端可以从初始页面内容中查找与每个dom的meta属性关联的页面元数据,而页面模板需要客户端向服务器发送单独的请求消息才能获取。
针对方式二,客户端向服务器发送请求消息可以理解为:1.针对每个dom,客户端向服务器分别发送第一请求消息和第二请求消息,其中,第一请求消息用于获取该dom的页面模板,第一请求消息包含了该dom的第二属性,第二请求消息用于获取该dom的页面元数据,第二请求消息包含了该dom的第一属性;2.针对每个dom,客户端向服务器发送一请求消息,该请求消息用于获取该dom的页面模板和页面元数据,该请求消息包含了该dom的第二属性和第一属性;3.针对页面模板,客户端向服务器发送一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面模板,该请求消息包含了每个dom的第二属性;针对页面元数据,客户端向服务器发送另一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面元数据,该请求消息包含了每个dom的第一属性;4.针对前端框架识别的所有dom,客户端向服务器发送一个请求消息,该请求消息用于请求获取所有dom中每个dom的页面模板和页面元数据,该请求消息包含了所有dom中每个dom的第二属性和第一属性。
因此,服务器在接收到客户端的请求消息后,会分别查找与第一属性关联的页面元数据,以及与第二属性相匹配的页面模板,从而将其返回给客户端。
可选的,客户端在获取到页面模板后,还可以将页面模板缓存在本地,那么在下次需要获取页面模板时,客户端可以首先从本地中查找是否存在相应的页面模板,如果存在,则可从本地获取,如果不存在,则需要从服务器获取。也就是说,客户端获取的每个dom的页面模板也可以是从本地获取的。将页面模板缓存在本地,从而避免每次进行页面渲染时都需要向服务器获取页面模板,可以减少客户端与服务器之间的信息交互,能够提高页面渲染效率,并减少客户端与服务器两侧的运行压力。
本发明实施例第二方面公开了另一种网页渲染方法,该方法可以包括:
服务器在接收到客户端发送的页面加载请求时,可获取与该页面加载请求匹配的初始页面内容,并将其发送给客户端。其中,该初始页面内容包括前端框架以及至少一个dom。
由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
可选的,服务器接收客户端发送的页面加载请求之后,该方法还可以包括:
服务器确定当前的负载,并在负载超过预设负载阈值的情况下,执行获取与该页面加载请求匹配的初始页面内容的操作。
可选的,服务器在该负载未超过预设负载阈值的情况下,基于该页面加载请求进行页面渲染,得到html页面的源代码,从而向客户端发送该源代码,由客户端基于该源代码展示html页面。
服务器在接收到客户端的页面加载请求后,可以结合当前的负载情况确定是由客户端侧进行页面渲染,还是由服务器端进行页面渲染,如果服务器负载过大,则由客户端侧进行页面渲染,从而可以减轻服务器运行压力,提高页面渲染效率。如果服务器负载较小,则由服务器端进行页面渲染,从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染,提升系统性能。
可选的,
本发明实施例第三方面公开了一种客户端,可以包括处理器、收发器和输出装置,可用于执行第一方面公开的网页渲染方法。由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
本发明实施例第四方面公开了另一种客户端,可以包括:收发模块、加载模块、获取模块、渲染模块、展示模块以及建立模块,可用于执行第一方面公开的网页渲染方法。其中,收发模块对应的实体设备可以是第三方面公开的收发器,加载模块、获取模块、渲染模块以及建立模块对应的实体设备可以是第三方面公开的处理器,展示模块对应的实体设备可以是第三方面公开的输出装置。由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
本发明实施例第五方面公开了一种服务器,可以包括:处理器、收发器和存储器,可用于执行第二方面公开的网页渲染方法。由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
本发明实施例第六方面公开了另一种服务器,可以包括:收发模块、获取模块、确定模块、渲染模块以及保存模块,可用于执行第二方面公开的网页渲染方法。其中,收发模块对应的实体设备可以是第五方面公开的收发器,获取模块、确定模块、渲染模块对应的实体设备可以是第五方面公开的处理器,保存模块对应的实体设备可以是第五方面公开的存储器。由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
实施本发明实施例,具有如下有益效果:
本发明实施例中,服务器在接收到客户端的页面加载请求后,可以获取页面加载请求匹配的初始页面内容,返回给客户端,初始页面内容包括前端框架和至少一个dom,客户端从而基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与之匹配的页面模板和页面元数据,从而基于页面模板将页面元数据进行渲染,得到每个dom的html片段,最后将所有html片段组成html页面,并展示html页面。本发明实施例中,由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例公开的一种网页渲染系统的结构示意图;
图2是本发明实施例公开的一种网页渲染方法的流程示意图;
图3是本发明实施例公开的另一种网页渲染方法的流程示意图;
图4a是本发明实施例公开的定制界面的第一示意图;
图4b是本发明实施例公开的定制界面的第二示意图;
图4c是本发明实施例公开的定制界面的第三示意图;
图4d是本发明实施例公开的定制界面的第四示意图;
图4e是本发明实施例公开的定制界面的第五示意图;
图5是本发明实施例公开的一种客户端的结构示意图;
图6是本发明实施例公开的另一种客户端的结构示意图;
图7是本发明实施例公开的一种服务器的结构示意图;
图8是本发明实施例公开的另一种服务器的结构示意图。
具体实施方式
下面将结合附图,对本发明的实施例进行描述。
本发明实施例公开了一种网页渲染方法及相关设备,可以在高并发场景下提高网页渲染效率,减少服务器的内存开销。以下分别进行详细说明。
请参阅图1,图1是本发明实施例公开的一种网页渲染系统的结构示意图。在图1所示的系统中,包括服务器和至少一个客户端。其中,服务器和至少一个客户端通过互联网连接,服务器可以是一个独立的服务设备,也可以是由多个独立的服务设备共同构成的集群服务设备,该服务器可以为浏览器应用(application,app)提供后台服务;客户端可以是指浏览器应用,也可以是指安装有浏览器app的终端设备,该终端设备可以包括如智能手机、平板电脑、笔记本电脑、台式电脑、车载终端、智能可穿戴设备等,本发明实施例不做限定。
在图1所描述的系统中,客户端可以根据用户在显示界面的操作向服务器发送页面加载请求,从而展示相应的html页面,服务器可以存储有多种页面内容,可以基于客户端发送的页面加载请求获取相应的页面内容,并发送给客户端,也可以基于客户端发送的页面加载请求进行页面渲染,并将得到的html页面发送给客户端。
基于图1所示的系统,本发明实施例公开了一种网页渲染方法。请参阅图2,图2是本发明实施例公开的一种网页渲染方法的流程示意图。如图2所示,该方法可以包括以下步骤:
201、客户端向服务器发送页面加载请求。
本发明实施例中,页面加载请求可以是用户触发的,例如,用户点击了一个网页链接,或者在网页的地址栏输入了网页地址,并点击“进入”或“确定”功能按键等,客户端在检测到用户的上述操作后,从而可以生成页面加载请求,并将其发送至后台的服务器。
202、服务器接收页面加载请求,并获取与页面加载请求匹配的初始页面内容。
本发明实施例中,初始页面内容包括前端框架以及至少一个dom,其中,前端框架主要包括面向互联网体验的万维网,也称全球广域网(worldwideweb,web)开发框架,即,用户体验环境(userexperienceenvironment,uee)框架,dom,也可以称为页面组件,如<body>、<uee:gadget>这类标签就可以称为dom。
需要说明的是,初始页面内容包括的至少一个dom中,可以是原始dom,也可以是经过用户配置后的dom,本发明实施例不做限定。
本发明实施例中,页面加载请求携带有需要访问网页的网址,服务器存储有与网址具有绑定关系的前端框架和多个dom,因此,服务器在接收到客户端发送的页面加载请求后,从而可以进一步获取与页面加载请求匹配的初始页面内容。
203、服务器向客户端发送初始页面内容。
本发明实施例中,服务器在获取到与页面加载请求匹配的前端框架和至少一个dom后,可以将其返回给客户端。
204、客户端接收初始页面内容,并基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据。
本发明实施例中,服务器在获取到与页面加载请求匹配的初始页面内容后,可以将其发送给客户端,客户端从而可以接收对应的初始页面内容,具体可以通过脚本script标签加载app.js的方式引入uee框架。客户端在接收到服务器发送的初始页面内容后,进而可以加载该初始页面内容,具体可以基于该初始页面内容包括的前端框架加载该初始页面内容包括的至少一个dom。
进一步的,客户端在接收到初始页面内容后,还可以基于至少一个dom中每个dom的特征属性获取与该dom匹配的页面模板和页面元数据。
具体的,客户端基于前端框架加载至少一个dom的具体方式可以为:
客户端将至少一个dom加载至前端框架,并确定目标dom,其中,目标dom为前端框架从至少一个dom中识别出的dom。
那么客户端基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以为:
针对目标dom中的每个dom,客户端基于该每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
具体实现中,前端框架可为dom配置有位置,客户端在获取到前端框架和dom后,会将每个dom加载至前端框架相应的位置,从而组成页面。客户端在加载每个dom时,uee框架监听每个dom的加载,例如通过以下示例代码加载:
document.addeventlistener('domcontentloaded',function(){...},false)
如果当前加载的dom是uee框架识别的dom,客户端从而将该dom确定为目标dom,并获取与之特征属性匹配的页面框架和页面元数据;如果当前加载的dom不是uee框架识别的dom,客户端可不做响应。
进一步的,每个dom加载完成后,客户端的页面都会发送domcontentloaded给uee引擎,uee引擎从而基于获取的页面模板和页面元数据进行页面渲染。
可以理解的是,客户端可以是先将dom加载至前端框架,再获取每个dom的页面模板和页面元数据,也可以是同时进行,还可以相反,本发明实施例不做限定。
205、客户端基于每个dom匹配的页面模板将每个dom匹配的页面元数据进行渲染,得到每个dom的html片段。
本发明实施例中,在页面内容加载完成,以及获取到每个dom匹配的页面模板和页面元数据后,客户端会针对每个dom,基于页面模板将页面元数据进行页面渲染,从而得到该dom的html片段。具体可以通过渲染引擎,如angularjs引擎将页面模板和页面元数据编译生成html片段。
206、客户端将至少一个dom的html片段组成html页面,并展示该html页面。
本发明实施例中,客户端针对每个dom都生成一个相应的html片段,并在生成所有dom的html片段后,可以将所有html片段组成html页面,从而在客户端的显示界面中展示。
可见,在图2所描述的方法中,服务器在接收到客户端的页面加载请求后,可以获取页面加载请求匹配的初始页面内容,返回给客户端,初始页面内容包括前端框架和至少一个dom,客户端可以基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与之匹配的页面模板和页面元数据,从而基于页面模板将页面元数据进行渲染,得到每个dom的html片段,最后将所有html片段组成html页面,并展示html页面。本发明实施例中,由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。
基于图1所示的系统,本发明实施例公开了另一种网页渲染方法。请参阅图3,图3是本发明实施例公开的另一种网页渲染方法的流程示意图。如图3所示,该方法可以包括以下步骤:
301、客户端在接收到页面定制请求时,展示定制界面。
本发明实施例中,页面定制请求可以是用户触发的,例如,用户在客户端的显示界面点击页面定制的功能按钮,客户端从而生成页面定制请求;也可以是由其他设备或者客户端发送的,例如用户在其他客户端上触发,由其他客户端生成页面定制请求,并发送给该客户端,本发明实施例不做限定。
本发明实施例中,客户端在接收到页面定制请求后,进而可以展示定制界面。其中,定制界面可以为用户提供页面定制的功能,用户在定制界面上可以对各个可定制dom进行配置,从而改变网页的展示风格。
302、客户端接收在定制界面中的配置操作,得到由配置操作产生的页面元数据,并建立页面元数据与dom的第一属性的关联关系。
本发明实施例中,客户端在展示定制界面后,用户可以在定制界面上对可定制dom进行配置操作,客户端可以接收到用户的配置操作,并得到由配置操作产生的页面元数据,从而建立每个dom的页面元数据与该dom的第一属性的关联关系。
可以理解的是,定制界面可以是空白界面,用户需要从无到有的配置页面所需展示的dom,如添加页面中可以展示的dom;定制界面也可以是服务器端提供的原始界面,原始界面中包含了部分dom的属性,即,原始的页面元数据,用户可以在原始界面中对原始的页面元数据进行修改、添加、删除等配置操作,本发明实施例不做限定。
举例来说,以表单模板dom在设计者系统定制为例,请一并参阅图4a~图4e,图4a示出了服务器端提供的原始界面,原始界面中展示了可定制dom以及不可定制dom,用户可以将鼠标移动至可定制dom区域,也可以通过触控方式点击可定制dom区域,原始界面中从而展示了“设置”按钮,用户通过鼠标或者触控方式点击该“设置”按钮,客户端从而可以展示该可定制dom的定制界面。该定制界面具体可以是以弹窗的形式展示,如图4b所示,也可以是一个新界面,本发明实施例不做限定。
在图4b中,用户可在定制界面中配置表单展示的列数,例如,可设置3列;用户也可以在定制界面配置页面展示的字段,具体可从可供选择的字段中选中需要展示的字段。其中,可供选择的字段包括如服务号码、家庭号码、个人号码、处理时间、兴趣、时间间隔等。在选中页面需要展示的字段(服务号码、家庭号码、处理时间、定制字段)后,用户可进一步配置标题的展示字段名称、字段名、展示类型、展示顺序等,具体可以是以文本框、输入框、下拉框等形式供用户配置,如图4c所示,配置界面主要是以下拉框的形式供用户进行页面配置。
进一步的,在图4c中,定制界面还可以展示如“编辑”字样的功能按钮,当用户点击“编辑”按钮后,页面从而展示更加详细的定制界面,如图4d所示,在该界面中,用户可以配置每个字段对应的控件按钮的属性,如只读、可写、可读可写等;也可以配置每个控件在输入内容时的校验规则,例如,用户点击校验规则选择按钮可以弹出校验规则选择框,用户只需选择所需的校验规则即可;还可以配置该控件是否可用,也即是,在页面中是否需要展示该控件。以上只是举例,具体实现方式本发明实施例不做限定。
进一步的,用户在配置完成后,可以点击定制界面的“保存”按钮,客户端从而基于用户的配置操作,将产生的页面元数据存放在当前页面中的script标签里,并通过身份标识(identify,id)与定制dom的meta属性(也可以理解为meta值)建立关联关系。如图4e所示,被用户配置的dom的meta="uee-6527997d-95e1-4c14-8347-99728d6c21d6",相应的,配置操作所产生的页面原数据的id="uee-6527997d-95e1-4c14-8347-99728d6c21d6",从而通过meta关联页面元数据。在图4e中,配置操作产生的页面元数据可以json格式保存在前端文件中。
303、客户端将该页面元数据发送至服务器。
本发明实施例中,客户端得到由用户的配置操作所产生的页面元数据后,可将其发送给服务器,具体可以将前端文件发送给服务器。
304、服务器接收并保存该页面元数据。
本发明实施例中,服务器在接收到客户端侧配置的页面元数据后,从而可以将其保存在服务器的meta数据库中。
305、客户端向服务器发送页面加载请求。
本发明实施例中,步骤305与上一实施例中步骤201的实现方式相同,本发明实施例在此不再赘述。可以理解的是步骤301~步骤304可在步骤305之前执行,也可以在之后执行,本发明实施例不做限定。
306、服务器接收页面加载请求,并确定当前的负载。
本发明实施例中,服务器在接收到客户端的页面加载请求后,首先可以确定该服务器的当前负载。具体可检测服务器的内存运行状态,和/或在同一时间段内所接收的页面加载请求,等等,得到负载信息,服务器从而从负载信息中确定当前的负载情况。
可选的,外部设备可检测服务器的运行状态,从而得到服务器的负载信息,并将其发送给服务器,服务器从而可以基于该负载信息确定当前的负载情况。
307、在负载超过预设负载阈值的情况下,服务器获取与页面加载请求匹配的初始页面内容。
本发明实施例中,为了避免负载过大而导致服务器的运行性能下降,服务器可预先设置负载阈值,该预设负载阈值可以是75%,也可以是80%,本发明实施例不做限定。因此,当服务器确定当前的负载后,可判断该负载是否超过预设负载阈值,如果超过,则获取与该页面加载请求匹配的初始页面内容,从而将其发送给客户端,由客户端侧进行页面渲染。具体上一实施例中步骤202的实现方式,本发明实施例在此不再赘述。
308、服务器向客户端发送初始页面内容。
309、客户端接收初始页面内容,并基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据。
本发明实施例中,步骤308与步骤309的具体实现方式可同上一实施例中步骤203和步骤204,本发明实施例在此不再赘述。
基于用户在定制界面对dom的配置操作,本发明实施例中的特征属性具体可包括第一属性和第二属性,第一属性具体可为meta属性,第二属性具体可为name属性,或者其他属性,如component-name属性、meta-id属性等,本发明实施例不做限定。可以理解的是,服务器在向客户端返回dom时,每个dom可携带各自的特征属性。
需要说明的是,客户端基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以包括以下几种:
方式一、
初始页面内容还可以包括页面模板和页面元数据,客户端从而可以从初始页面内容中查找与每个dom的第二属性相匹配的页面模板,以及与每个dom的第一属性关联的页面元数据。
方式二、
客户端向服务器发送请求消息,该请求消息用于请求获取每个dom的页面模板和页面元数据,其中,该请求消息包含每个dom的第二属性和第一属性,服务器从而基于客户端的请求消息向客户端返回与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
针对方式一,服务器在接收到客户端的页面加载请求,并确定该页面加载请求匹配的前端框架和dom后,可以进一步获取所需的页面模板和页面元数据,从而将页面模板和页面元数据与前端框架和dom作为初始页面内容一起发送给客户端。客户端在需要获取每个dom对应的页面模板和页面元数据时,即可通过dom的meta属性和name属性分别从初始页面内容中查找关联的页面元数据以及匹配的页面模板。页面元数据和页面模板与前端框架和dom一起发送给客户端,可以减少客户端与服务器之间的信息交互,能够提高页面渲染效率,并减少客户端与服务器两侧的运行压力。
举例来说,客户端可通过dom配置的name属性,假设为richtex,到模板文件夹中找到名称为richtex的页面模板,并可以根据uee:gadget的meta属性到meta数据库中查找相应id的元数据。
可选的,初始页面内容还可以只包括所需的页面元数据,客户端可以从初始页面内容中查找与每个dom的meta属性关联的页面元数据,而页面模板需要客户端向服务器发送单独的请求消息才能获取。
针对方式二,客户端向服务器发送请求消息可以理解为:1.针对每个dom,客户端向服务器分别发送第一请求消息和第二请求消息,其中,第一请求消息用于获取该dom的页面模板,第一请求消息包含了该dom的第二属性,第二请求消息用于获取该dom的页面元数据,第二请求消息包含了该dom的第一属性;2.针对每个dom,客户端向服务器发送一请求消息,该请求消息用于获取该dom的页面模板和页面元数据,该请求消息包含了该dom的第二属性和第一属性;3.针对页面模板,客户端向服务器发送一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面模板,该请求消息包含了每个dom的第二属性;针对页面元数据,客户端向服务器发送另一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面元数据,该请求消息包含了每个dom的第一属性;4.针对前端框架识别的所有dom,客户端向服务器发送一个请求消息,该请求消息用于请求获取所有dom中每个dom的页面模板和页面元数据,该请求消息包含了所有dom中每个dom的第二属性和第一属性。
因此,服务器在接收到客户端的请求消息后,会分别查找与第一属性关联的页面元数据,以及与第二属性相匹配的页面模板,从而将其返回给客户端。
综上所述,客户端获取dom的页面元数据和页面模板的方式可以是服务器返回的初始页面内容包含了相应的页面模板和页面元数据,客户端直接从初始页面内容获取每个dom对应的页面模板和页面元数据即可;也可以是客户端向服务器发送请求消息以获取每个dom的页面模板和页面元数据,具体分为,就每个dom向服务器发送一个请求消息,或者,就前端框架识别的所有dom发送一个请求消息,或者,就每个dom的页面元数据和页面模板分别发送不同的请求消息,或者,就前端框架识别的所有dom的页面元数据和页面模板分别发送不同的请求消息,本发明实施例不做限定。
可选的,客户端在获取到页面模板后,还可以将页面模板缓存在本地,那么在下次需要获取页面模板时,客户端可以首先从本地中查找是否存在相应的页面模板,如果存在,则可从本地获取,如果不存在,则需要从服务器获取。也就是说,客户端获取的每个dom的页面模板也可以是从本地获取的。将页面模板缓存在本地,从而避免每次进行页面渲染时都需要向服务器获取页面模板,可以减少客户端与服务器之间的信息交互,能够提高页面渲染效率,并减少客户端与服务器两侧的运行压力。
需要说明的是,不同的页面加载请求所需的dom可能存在相同的,那么客户端可以预先存储或者缓存常用dom的页面模板,从而可以在需要获取页面模板时从本地获取,这样不需要频繁地进行服务器与客户端之间的信息交互,减少服务器负载,提高页面模板获取效率。
310、客户端基于每个dom匹配的页面模板将每个dom匹配的页面元数据进行渲染,得到每个dom的html片段。
举例来说,客户端通过angularjs引擎可以将名称为richtex的uee:gadget的页面模板和页面元数据编译生成html片段。
311、客户端将至少一个dom的html片段组成html页面,并展示该html页面。
本发明实施例中,步骤310与步骤311的具体实现方式同上一实施例中步骤205和步骤206,本发明实施例在此不再赘述。
312、在负载未超过预设负载阈值的情况下,服务器基于页面加载请求进行页面渲染,得到html页面的源代码。
313、服务器向客户端发送该源代码。
本发明实施例中,服务器在确定当前的负载情况后,如果判断该负载未超过预设负载阈值,则可以在服务器侧进行页面渲染。也即是说,服务器会基于该页面加载请求,进行页面渲染,从而得到html页面的源代码,从而将其发送给客户端。
314、客户端接收该源代码,并基于该源代码展示html页面。
本发明实施例中,客户端在接收到服务器侧发送的html页面的源代码后,从而可以基于该源代码直接展示html页面。能够在一定程度上减轻客户端侧的运行压力,提高系统性能。
可以理解的是步骤307~步骤311与步骤312~步骤314为并列关系,在服务器的当前负载超过预设负载阈值的情况下,执行步骤307~步骤312,在服务器的当前负载未超过预设负载阈值的情况下,可以执行步骤312~步骤314,本发明实施例不做限定。
可见,在图3所描述的方法中,服务器在接收到客户端的页面加载请求后,可以结合当前的负载情况确定是由客户端侧进行页面渲染,还是由服务器端进行页面渲染,如果服务器负载过大,则由客户端侧进行页面渲染,从而可以减轻服务器运行压力,提高页面渲染效率。如果服务器负载较小,则由服务器端进行页面渲染,从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染,提升系统性能。进一步的,客户端提供可视化的定制界面,能够灵活高效的实现页面配置,让不懂技术的用户也能实现产品定制,降低定制门槛,提升定制效果,从而能够在一定程度上降低产品二次定制开发和维护的成本。
基于图1所示的系统,本发明实施例公开了一种客户端。请参阅图5,图5是本发明实施例公开的一种客户端的结构示意图。其中,图5所描述的客户端可以包括:至少一个处理器501,如中央处理器(centralprocessingunit,cpu),收发器502、输出装置503、存储器504以及至少一个通信总线505,上述处理器501、收发器502、输出装置503和存储器504通过总线505连接。
其中,上述输出装置503具体可为客户端500的显示屏,用于输出显示界面,如定制界面。
上述存储器504可以是高速ram存储器,也可为非不稳定的存储器(non-volatilememory),例如磁盘存储器。可选的,还可以是至少一个位于处理器的存储装置。
上述存储器504用于存储一组程序代码,上述处理器501、收发器502以及输出装置503用于调用存储器504中存储的程序代码,执行如下操作:
收发器502,用于向服务器发送页面加载请求后,接收服务器基于该页面加载请求返回的初始页面内容,其中,该初始页面内容包括前端框架,例如uee框架,以及至少一个dom。
处理器501,用于基于该前端框架加载该至少一个dom,并基于每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
处理器501,还用于基于该每个dom匹配的页面模板将该每个dom匹配的页面元数据进行渲染,得到该每个dom的html片段。
输出装置503,用于将至少一个dom的html片段组成html页面,并展示该html页面。
作为一种可行的实施方式,处理器501基于前端框架加载至少一个dom的具体方式可以为:
将至少一个dom加载至前端框架,并确定目标dom,其中,目标dom为前端框架从至少一个dom中识别出的dom。
那么处理器501基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以为:
针对目标dom中的每个dom,基于该每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
作为另一种可行的实施方式,上述输出装置503,还用于在收发器502接收到页面定制请求时,展示定制界面。
上述收发器502,还用于接收在该定制界面中的配置操作,得到由该配置操作产生的页面元数据。其中,该配置操作可由用户触发。
上述处理器501,还用于建立该页面元数据与dom的第一属性的关联关系。具体通过id与第一属性(meta值)绑定。
上述收发器502,还用于将该页面元数据发送至服务器,以便服务器保存该页面元数据。
作为又一种可行的实施方式,该特征属性具体可包括第一属性和第二属性,第一属性具体可为meta属性,第二属性具体可为name属性,或者其他属性,如component-name属性、meta-id属性等,本发明实施例不做限定。可以理解的是,服务器在向客户端500返回dom时,每个dom可携带各自的特征属性。
因此,处理器501基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以包括以下几种:
方式一、
初始页面内容还可以包括页面模板和页面元数据,处理器501从而可以从初始页面内容中查找与每个dom的第二属性相匹配的页面模板,以及与每个dom的第一属性关联的页面元数据。
方式二、
处理器501通过收发器502向服务器发送请求消息,该请求消息用于请求获取每个dom的页面模板和页面元数据,其中,该请求消息包含每个dom的第二属性和第一属性,收发器502从而接收服务器基于该请求消息返回的与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
可选的,初始页面内容还可以只包括所需的页面元数据,处理器501可以从初始页面内容中查找与每个dom的meta属性关联的页面元数据,而页面模板需要客户端500向服务器发送单独的请求消息才能获取。
针对方式二,处理器501通过收发器502向服务器发送请求消息可以理解为:1.针对每个dom,收发器502向服务器分别发送第一请求消息和第二请求消息,其中,第一请求消息用于获取该dom的页面模板,第一请求消息包含了该dom的第二属性,第二请求消息用于获取该dom的页面元数据,第二请求消息包含了该dom的第一属性;2.针对每个dom,收发器502向服务器发送一请求消息,该请求消息用于获取该dom的页面模板和页面元数据,该请求消息包含了该dom的第二属性和第一属性;3.针对页面模板,收发器502向服务器发送一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面模板,该请求消息包含了每个dom的第二属性;针对页面元数据,收发器502向服务器发送另一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面元数据,该请求消息包含了每个dom的第一属性;4.针对前端框架识别的所有dom,收发器502向服务器发送一个请求消息,该请求消息用于请求获取所有dom中每个dom的页面模板和页面元数据,该请求消息包含了所有dom中每个dom的第二属性和第一属性。
因此,服务器在接收到客户端500的请求消息后,会分别查找与第一属性关联的页面元数据,以及与第二属性相匹配的页面模板,从而将其返回给客户端500。
可选的,处理器501在获取到页面模板后,还可以通过存储器504将页面模板缓存在本地,那么在下次需要获取页面模板时,处理器501可以首先从本地中查找是否存在相应的页面模板,如果存在,则可从本地获取,如果不存在,则需要从服务器获取。也就是说处理器501获取的每个dom的页面模板也可以是从本地获取的。
需要说明的是,不同的页面加载请求所需的dom可能存在相同的,那么处理器501可以预先存储或者缓存常用dom的页面模板,从而可以在需要获取页面模板时从本地获取,这样不需要频繁地进行服务器与客户端之间的信息交互,减少服务器负载,提高页面模板获取效率。
请参阅图6,图6是本发明实施例公开的另一种客户端的结构示意图。如图6所示,该客户端600可以包括:
收发模块601,用于向服务器发送页面加载请求后,接收服务器基于该页面加载请求返回的初始页面内容,其中,该初始页面内容包括前端框架,例如uee框架,以及至少一个dom。
加载模块602,用于基于该前端框架加载该至少一个dom。
获取模块603,用于基于每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
渲染模块604,用于基于该每个dom匹配的页面模板将该每个dom匹配的页面元数据进行渲染,得到该每个dom的html片段。
展示模块605,用于将至少一个dom的html片段组成html页面,并展示该html页面。
作为一种可行的实施方式,加载模块602基于前端框架加载至少一个dom的具体方式可以为:
将至少一个dom加载至前端框架,并确定目标dom,其中,目标dom为前端框架从至少一个dom中识别出的dom。
那么获取模块603基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以为:
针对目标dom中的每个dom,基于该每个dom的特征属性获取与该每个dom匹配的页面模板和页面元数据。
作为另一种可行的实施方式,该客户端600还可以包括建立模块606,其中:
展示模块605,还用于在收发模块601接收到页面定制请求时,展示定制界面。
收发模块601,还用于接收在该定制界面中的配置操作,得到由该配置操作产生的页面元数据。其中,该配置操作可由用户触发。
建立模块606,用于建立该页面元数据与dom的第一属性的关联关系。具体通过id与第一属性(meta值)绑定。
所述收发模块601,还用于将该页面元数据发送至服务器,以便服务器保存该页面元数据。
作为又一种可行的实施方式,该特征属性具体可包括第一属性和第二属性,第一属性具体可为meta属性,第二属性具体可为name属性,或者其他属性,如component-name属性、meta-id属性等,本发明实施例不做限定。可以理解的是,服务器在向客户端600返回dom时,每个dom可携带各自的特征属性。
因此,获取模块603基于每个dom的特征属性获取与每个dom匹配的页面模板和页面元数据的具体方式可以包括以下几种:
方式一、
初始页面内容还可以包括页面模板和页面元数据,获取模块603从而可以从初始页面内容中查找与每个dom的第二属性相匹配的页面模板,以及与每个dom的第一属性关联的页面元数据。
方式二、
获取模块603通过收发模块601向服务器发送请求消息,该请求消息用于请求获取每个dom的页面模板和页面元数据,其中,该请求消息包含每个dom的第二属性和第一属性,收发模块601从而接收服务器基于该请求消息返回的与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
可选的,初始页面内容还可以只包括所需的页面元数据,获取模块603可以从初始页面内容中查找与每个dom的meta属性关联的页面元数据,而页面模板需要客户端600向服务器发送单独的请求消息才能获取。
针对方式二,获取模块603通过收发模块601向服务器发送请求消息可以理解为:1.针对每个dom,收发模块601向服务器分别发送第一请求消息和第二请求消息,其中,第一请求消息用于获取该dom的页面模板,第一请求消息包含了该dom的第二属性,第二请求消息用于获取该dom的页面元数据,第二请求消息包含了该dom的第一属性;2.针对每个dom,收发模块601向服务器发送一请求消息,该请求消息用于获取该dom的页面模板和页面元数据,该请求消息包含了该dom的第二属性和第一属性;3.针对页面模板,收发模块601向服务器发送一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面模板,该请求消息包含了每个dom的第二属性;针对页面元数据,收发模块601向服务器发送另一请求消息,该请求消息用于获取前端框架识别的所有dom中每个dom的页面元数据,该请求消息包含了每个dom的第一属性;4.针对前端框架识别的所有dom,收发模块601向服务器发送一个请求消息,该请求消息用于请求获取所有dom中每个dom的页面模板和页面元数据,该请求消息包含了所有dom中每个dom的第二属性和第一属性。
因此,服务器在接收到客户端600的请求消息后,会分别查找与第一属性关联的页面元数据,以及与第二属性相匹配的页面模板,从而将其返回给客户端600。
可选的,获取模块603在获取到页面模板后,还可以将页面模板缓存在本地,那么在下次需要获取页面模板时,获取模块603可以首先从本地中查找是否存在相应的页面模板,如果存在,则可从本地获取,如果不存在,则需要从服务器获取。也就是说,获取模块603获取的每个dom的页面模板也可以是从本地获取的。
需要说明的是,不同的页面加载请求所需的dom可能存在相同的,那么获取模块603可以预先存储或者缓存常用dom的页面模板,从而可以在需要获取页面模板时从本地获取,这样不需要频繁地进行服务器与客户端之间的信息交互,减少服务器负载,提高页面模板获取效率。
可见,在图5和图6所描述的客户端中,客户端在向服务器发送页面加载请求后,接收到服务器返回的初始页面内容,其包括前端框架和至少一个dom,并基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与之匹配的页面模板和页面元数据,从而基于页面模板将页面元数据进行渲染,得到每个dom的html片段,最后将所有html片段组成html页面,并展示html页面。本发明实施例中,由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。进一步的,服务器在接收到客户端的页面加载请求后,可以结合当前的负载情况确定是由客户端侧进行页面渲染,还是由服务器端进行页面渲染,如果服务器负载过大,则由客户端侧进行页面渲染,从而可以减轻服务器运行压力,提高页面渲染效率。如果服务器负载较小,则由服务器端进行页面渲染,从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染,提升系统性能。进一步的,客户端可提供可视化的定制界面,能够灵活高效的实现页面配置,让不懂技术的用户也能实现产品定制,降低定制门槛,提升定制效果,从而能够在一定程度上降低产品二次定制开发和维护的成本。
基于图1所示的系统,本发明实施例公开了一种服务器。请参阅图7,图7是本发明实施例公开的一种服务器的结构示意图。其中,图7所描述的服务器可以包括:至少一个处理器701,如cpu,收发器702、存储器704以及至少一个通信总线704,上述处理器701、收发器702和存储器703通过总线704连接。
其中,上述存储器703可以是高速ram存储器,也可为非不稳定的存储器(non-volatilememory),例如磁盘存储器。可选的,还可以是至少一个位于处理器的存储装置。
上述存储器703用于存储一组程序代码,上述处理器701以及收发器702用于调用存储器703中存储的程序代码,执行如下操作:
收发器702,用于接收客户端发送的页面加载请求。
处理器701,用于获取与该页面加载请求匹配的初始页面内容,其中,该初始页面内容包括前端框架以及至少一个dom。
收发器702,还用于将该初始页面内容发送给该客户端。
作为一种可行的实施方式,处理器701,还用于在收发器702接收到客户端发送的页面加载请求后,确定服务器700当前的负载,并在该负载超过预设负载阈值的情况下,获取与该页面加载请求匹配的初始页面内容的操作。
作为另一种可行的实施方式,处理器701,还用于在该负载未超过预设负载阈值的情况下,基于该页面加载请求进行页面渲染,得到html页面的源代码。
收发器702,还用于向该客户端发送该源代码,由该客户端基于该源代码展示该html页面。
作为又一种可行的实施方式,收发器702,还用于接收该客户端发送的页面元数据。
存储器703,用于保存该页面元数据。其中,该页面元数据具体可为用户对页面进行配置后产生的数据。
作为又一种可行的实施方式,收发器702在向客户端发送初始页面内容时,该初始页面内容还可包括页面模板和页面元数据。这样客户端就可以从初始页面内容中查找到每个dom匹配的页面目标和页面元数据。
或者,
收发器702,还用于接收该客户端发送的请求消息,其中,该请求消息用于请求获取每个dom的页面模板和页面元数据,该请求消息包含该每个dom的第二属性和第一属性。
收发器702,还用于基于该请求消息向该客户端返回与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
请参阅图8,图8是本发明实施例公开的另一种服务器的结构示意图。如图8所示,该服务器800可以包括:
收发模块801,用于接收客户端发送的页面加载请求。
获取模块802,用于获取与该页面加载请求匹配的初始页面内容,其中,该初始页面内容包括前端框架以及至少一个dom。
收发模块801,还用于将该初始页面内容发送给该客户端。
作为一种可行的实施方式,该服务器800还可以包括:
确定模块803,用于在收发模块801接收到客户端发送的页面加载请求后,确定服务器800当前的负载,并在该负载超过预设负载阈值的情况下,触发获取模块802执行获取与该页面加载请求匹配的初始页面内容的操作。
作为另一种可行的实施方式,该服务器800还可以包括渲染模块804,其中:
渲染模块804,用于在该负载未超过预设负载阈值的情况下,基于该页面加载请求进行页面渲染,得到html页面的源代码。
那么收发模块801,还用于向该客户端发送该源代码,由该客户端基于该源代码展示该html页面。
作为又一种可行的实施方式,该服务器800还可以包括保存模块805,其中:
收发模块801,还用于接收该客户端发送的页面元数据。
保存模块805,用于保存该页面元数据。其中,该页面元数据具体可为用户对页面进行配置后产生的数据。
作为又一种可行的实施方式,收发模块801在向客户端发送初始页面内容时,该初始页面内容还可包括页面模板和页面元数据。这样客户端就可以从初始页面内容中查找到每个dom匹配的页面目标和页面元数据。
或者,
收发模块601,还用于接收该客户端发送的请求消息,其中,该请求消息用于请求获取每个dom的页面模板和页面元数据,该请求消息包含该每个dom的第二属性和第一属性。
收发模块601,还用于基于该请求消息向该客户端返回与第二属性相匹配的页面模板,以及与第一属性关联的页面元数据。
可见,在图7和图8所描述的服务器中,服务器在接收到客户端的页面加载请求后,可以获取页面加载请求匹配的初始页面内容,返回给客户端,初始页面内容包括前端框架和至少一个dom,客户端可以基于前端框架加载至少一个dom,以及基于每个dom的特征属性获取与之匹配的页面模板和页面元数据,从而基于页面模板将页面元数据进行渲染,得到每个dom的html片段,最后将所有html片段组成html页面,并展示html页面。本发明实施例中,由客户端进行页面渲染,从而能够在高并发场景下,降低服务器硬件部署成本,减轻服务器压力,减少服务器内存开销,提高页面渲染效率以及系统性能。进一步的,服务器在接收到客户端的页面加载请求后,可以结合当前的负载情况确定是由客户端侧进行页面渲染,还是由服务器端进行页面渲染,如果服务器负载过大,则由客户端侧进行页面渲染,从而可以减轻服务器运行压力,提高页面渲染效率。如果服务器负载较小,则由服务器端进行页面渲染,从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染,提升系统性能。进一步的,客户端可提供可视化的定制界面,能够灵活高效的实现页面配置,让不懂技术的用户也能实现产品定制,降低定制门槛,提升定制效果,从而能够在一定程度上降低产品二次定制开发和维护的成本。
需要说明的是,在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详细描述的部分,可以参见其他实施例的相关描述。其次,本领域技术人员也应该知悉,说明书中所涉及的动作和模块并不一定是本发明所必须的。
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
本发明实施例客户端、服务器中的模块可以根据实际需要进行合并、划分和删减。
本发明实施例中所述客户端和服务器,可以通过通用集成电路,例如cpu(centralprocessingunit,中央处理器),或通过asic(applicationspecificintegratedcircuit,专用集成电路)来实现。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(read-onlymemory,rom)或随机存储记忆体(randomaccessmemory,ram)等。
以上对本发明实施例公开的一种网页渲染方法及相关设备进行了详细介绍,本文中应用了具体实例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。