页面渲染方法和系统与流程

文档序号:18869942发布日期:2019-10-14 19:18阅读:182来源:国知局
页面渲染方法和系统与流程

本发明涉及计算机信息领域,特别是涉及一种页面渲染方法及系统。



背景技术:

ssr是serversiderender的缩写,即服务器端渲染。在没有spa之前,绝大多数的网页都是通过服务器渲染生成的:用户向服务器发送请求,服务器获取请求,然后再查询数据库,根据查询的数据动态的生成一张网页,最后将网页内容返回给浏览器端。

目前,spa(singlepagewebapplication,单页web应用)技术可以为用户提供更好的浏览体验,但是spa技术只有一个web页面,其余页面均通过js(javascript,文件扩展)控制加载。另外,seo(searchengineoptimization,搜索引擎优化)可以使网站更适合搜索引擎的索引原则,但是因为spa的上述结构使得不利于seo对页面进行抓取。为了便于seo对页面的抓取,需要将所有的页面全部渲染成静态页面。

现有的渲染技术采用传统的开发方法,通过前端生成html页面,后端对html页面进行绑定数据并将html页面渲染成静态页面;这样便会造成信息处理的延迟,增加页面的等待时间。



技术实现要素:

基于此,有必要针对上述传统服务器渲染技术会造成信息处理延迟,增加页面的等待时间的问题,提供一种能够解决上述问题的页面渲染方法及系统。

一种页面渲染方法,包括以下步骤:

获取待渲染页面的页面参数;

将页面参数与预设入口文件相关联;

在预设入口文件中查找与页面参数对应的渲染数据;

基于渲染数据对待渲染页面进行渲染,生成目标页面。

在其中一个优选实施方式中,所述获取待渲染页面的页面参数的步骤包括:

读取待渲染页面;

对所述待渲染页面的各地址参数进行配置,并对所述待渲染页面的页面参数进行配置;

将所述待渲染页面与各所述地址参数进行关联。

在其中一个优选实施方式中,所述将将页面参数与预设入口文件相关联的步骤包括:

通过webpack工具将所述页面参数和所述预设入口文件进行关联,得到数据包;

将所述数据包输入至所述待渲染页面。

在其中一个优选实施方式中,所述通过webpack工具将所述页面参数和所述预设入口文件进行关联,得到数据包的步骤中,所述通过webpack工具分别对服务端打包配置及客户端打包配置。

在其中一个优选实施方式中,所述预设入口文件包括客户端入口文件、服务端入口文件。

本实施方式中的上述页面渲染方法可以让浏览器边下载javascript文件的同时渲染html页面,而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时ssr对服务器的压力也是相对较大的,和服务器简单输出静态文件相比,通过node去渲染出页面再传递给客户端显然开销是比较大的,需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度,减少了页面等待时间。同时可以更好的有利于seo,便于页面抓取。

一种页面渲染系统,包括:

参数获取模块,用以获取待渲染页面的页面参数;

参数关联模块,用以将页面参数与预设入口文件相关联;

数据查找模块,用以在预设入口文件中查找与页面参数对应的渲染数据;

页面渲染模块,基于渲染数据对待渲染页面进行渲染,生成目标页面。

,参数获取模块包括:

读取单元,用以读取待渲染页面;

配置单元,用以对所述待渲染页面的各地址参数进行配置,并对所述待渲染页面的页面参数进行配置;

关联单元,用以将所述待渲染页面与各所述地址参数进行关联。

在其中一个优选实施方式中,所述参数关联模块包括:

webpack打包单元,用以通过webpack工具将所述页面参数和所述预设入口文件进行关联,得到数据包;

数据包输入单元,用以将所述数据包输入至所述待渲染页面。

在其中一个优选实施方式中,webpack打包单元分别对服务端打包配置及客户端打包配置。

在其中一个优选实施方式中,所述预设入口文件包括客户端入口文件、服务端入口文件。

本实施方式中的上述页面渲染系统可以让浏览器边下载javascript文件的同时渲染html页面,而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时ssr对服务器的压力也是相对较大的,和服务器简单输出静态文件相比,通过node去渲染出页面再传递给客户端显然开销是比较大的,需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度,减少了页面等待时间。同时可以更好的有利于seo,便于页面抓取。

附图说明

图1为本发明一优选实施方式中的页面渲染方法的流程图;

图2为本发明一优选实施方式中的页面渲染系统的模块图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。

需要说明的是,当元件被称为“设置于”另一个元件,它可以直接在另一个元件上或者也可以存在居中的元件。当一个元件被认为是“连接”另一个元件,它可以是直接连接到另一个元件或者可能同时存在居中元件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的,并不表示是唯一的实施方式。

除非另有定义,本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的,不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。

一种页面渲染方法,包括以下步骤:

s10:获取待渲染页面的页面参数;

具体的,待渲染页面可以为html(hypertextmarkuplanguage,超文本标记语言)模板。通常情况下,对于同一个功能的页面(也即,待渲染页面),当页面显示的语言不同时,其url(uniformresourcelocator,统一资源定位符)地址也不同,也即页面显示的语言与url地址存在对应关系,但是同一个功能页面的页面参数是一致的,其中,url地址也即前述地址参数。因此,对于同一个待渲染页面,其页面参数携带有多个地址参数。

具体地,本步骤中包括读取待渲染页面,并对所述待渲染页面的各地址参数进行配置,并对所述待渲染页面的页面参数进行配置;

将所述待渲染页面与各所述地址参数,例如是url地址参数进行关联。

s20:将页面参数与预设入口文件相关联;

可以通过webpack工具将页面参数与预设入口文件进行关联,得到数据包,并将数据包输入至待渲染页面。其中,webpack工具是一个前端资源加载/打包工具,也即通过webpack工具将上述页面参数和预设入口文件进行打包,并传入待渲染页面。另外,预设入口文件中包括页面参数和渲染数据的对应关系,以便于根据页面参数获取对应的渲染数据,进而对待渲染页面进行渲染。

所述通过webpack工具分别对服务端打包配置及客户端打包配置。

所述预设入口文件包括客户端入口文件、服务端入口文件。

s30:在预设入口文件中查找与页面参数对应的渲染数据;

本实施方式中,进一步的,可以通过js模板语言读取数据包内的页面参数和预设语言包,其中,js可以利用普通的javascript代码生成html页面。另外,因为不同地址参数的渲染数据可能不同,因此在查找到与页面参数对应的渲染数据后,需要进一步获取页面参数携带的各地址参数,并在与页面参数对应的渲染数据中查找与各地址参数对应的渲染数据。

s40:基于渲染数据对待渲染页面进行渲染,生成目标页面。

查找到对应的渲染数据后,便可基于该渲染数据对上述待渲染页面进行渲染,得到静态页面(也即,目标页面),将静态页面保存。进一步的,因为待渲染页面中还可以包括字体、音频和图片等资源,所以还应基于渲染数据对上述资源进行渲染得到静态资源文件并保存。

本实施方式中的上述页面渲染方法可以让浏览器边下载javascript文件的同时渲染html页面,而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时ssr对服务器的压力也是相对较大的,和服务器简单输出静态文件相比,通过node去渲染出页面再传递给客户端显然开销是比较大的,需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度,减少了页面等待时间。同时可以更好的有利于seo,便于页面抓取。

一种页面渲染系统100,包括参数获取模块110、参数关联模块120、数据查找模块130、页面渲染模块140。

参数获取模块110,用以获取待渲染页面的页面参数;

该参数获取模块110包括读取单元、配置单元及关联单元。

其中,读取单元用以读取待渲染页面;配置单元,用以对所述待渲染页面的各地址参数进行配置,并对所述待渲染页面的页面参数进行配置;关联单元,用以将所述待渲染页面与各所述地址参数进行关联。

具体的,待渲染页面可以为html(hypertextmarkuplanguage,超文本标记语言)模板。通常情况下,对于同一个功能的页面(也即,待渲染页面),当页面显示的语言不同时,其url(uniformresourcelocator,统一资源定位符)地址也不同,也即页面显示的语言与url地址存在对应关系,但是同一个功能页面的页面参数是一致的,其中,url地址也即前述地址参数。因此,对于同一个待渲染页面,其页面参数携带有多个地址参数。

参数关联模块120,用以将页面参数与预设入口文件相关联;参数关联模块包括webpack打包单元及数据包输入单元,webpack打包单元用以通过webpack工具将所述页面参数和所述预设入口文件进行关联,得到数据包;数据包输入单元用以将所述数据包输入至所述待渲染页面。

具体地,可以通过webpack工具将页面参数与预设入口文件进行关联,得到数据包,并将数据包输入至待渲染页面。其中,webpack工具是一个前端资源加载/打包工具,也即通过webpack工具将上述页面参数和预设入口文件进行打包,并传入待渲染页面。另外,预设入口文件中包括页面参数和渲染数据的对应关系,以便于根据页面参数获取对应的渲染数据,进而对待渲染页面进行渲染。

webpack打包单元分别对服务端打包配置及客户端打包配置。所述预设入口文件包括客户端入口文件、服务端入口文件。

数据查找模块130用以在预设入口文件中查找与页面参数对应的渲染数据。

本实施方式中,进一步的,可以通过js模板语言读取数据包内的页面参数和预设语言包,其中,js可以利用普通的javascript代码生成html页面。另外,因为不同地址参数的渲染数据可能不同,因此在查找到与页面参数对应的渲染数据后,需要进一步获取页面参数携带的各地址参数,并在与页面参数对应的渲染数据中查找与各地址参数对应的渲染数据。

页面渲染模块140基于渲染数据对待渲染页面进行渲染,生成目标页面。

查找到对应的渲染数据后,便可基于该渲染数据对上述待渲染页面进行渲染,得到静态页面(也即,目标页面),将静态页面保存。进一步的,因为待渲染页面中还可以包括字体、音频和图片等资源,所以还应基于渲染数据对上述资源进行渲染得到静态资源文件并保存。

本实施方式中的上述页面渲染系统可以让浏览器边下载javascript文件的同时渲染html页面,而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时ssr对服务器的压力也是相对较大的,和服务器简单输出静态文件相比,通过node去渲染出页面再传递给客户端显然开销是比较大的,需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度,减少了页面等待时间。同时可以更好的有利于seo,便于页面抓取。

以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1