CN112527293A - 首屏页面渲染方法、装置、计算机设备及存储介质 - Google Patents

首屏页面渲染方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN112527293A
CN112527293A CN202011483716.3A CN202011483716A CN112527293A CN 112527293 A CN112527293 A CN 112527293A CN 202011483716 A CN202011483716 A CN 202011483716A CN 112527293 A CN112527293 A CN 112527293A
Authority
CN
China
Prior art keywords
page
request information
rendering
server
template
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011483716.3A
Other languages
English (en)
Inventor
潘刘兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Pingan Payment Technology Service Co Ltd
Original Assignee
Pingan Payment Technology Service Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Pingan Payment Technology Service Co Ltd filed Critical Pingan Payment Technology Service Co Ltd
Priority to CN202011483716.3A priority Critical patent/CN112527293A/zh
Publication of CN112527293A publication Critical patent/CN112527293A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请涉及界面设计技术领域,揭露一种首屏页面渲染方法、装置、计算机设备及存储介质,其中方法包括获取来自用户端的页面请求信息;判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;若判断结果为内容分发网络中不存在对应的内容,则向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截;通过Node服务端接收Nginx服务器所拦截的页面请求信息;通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面。本申请还涉及区块链技术,页面请求信息存储于区块链中。本申请通过服务器内置的Node服务端进行页面数据渲染,形成首屏页面,有利于提高首屏页面的渲染效率。

Description

首屏页面渲染方法、装置、计算机设备及存储介质
技术领域
本申请涉及界面设计技术领域,尤其涉及一种首屏页面渲染方法、装置、计算机设备及存储介质。
背景技术
在前后端分离的单页应用,存在着一个问题,即在进行首屏渲染,用户第一次打开页面时,要通过Ajax加载后端的数据,因为是首次打开,所以要加载的数据较多,用户就感知到了延迟,影响用户体验。
为了解决上述问题,现有的解决方式是页面通过服务器生成HTML字符串,再发送到浏览器,最后将静态标记为客户端上完全交互的应用程序。但是这种方式是直接通过服务器生成HTML字符串,需要服务器与客户端进行频繁的交互,导致占用服务器过多资源,使得服务器负载过重,从而导致前端页面渲染效率较低。现亟需一种提高前端首屏页面渲染效率的方法。
发明内容
本申请实施例的目的在于提出一种首屏页面渲染方法、装置、计算机设备及存储介质,以提高首屏页面渲染的效率。
为了解决上述技术问题,本申请实施例提供一种首屏页面渲染方法,应用于服务器中,所述服务器配置有Node服务端,包括:
获取来自用户端的页面请求信息;
判断所述页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;
若所述判断结果为所述内容分发网络中不存在所述对应的内容,则向Nginx服务器发出页面拦截请求,以使得所述Nginx服务器对所述页面请求信息进行拦截;
通过所述Node服务端接收所述Nginx服务器所拦截的页面请求信息;
通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面。
为了解决上述技术问题,本申请实施例提供一种首屏页面渲染装置,应用于服务器中,所述服务器配置有Node服务端,包括:
请求信息获取模块,用于获取来自用户端的页面请求信息;
判断结果获取模块,用于判断所述页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;
请求信息拦截模块,用于若所述判断结果为所述内容分发网络中不存在所述对应的内容,则向Nginx服务器发出页面拦截请求,以使得所述Nginx服务器对所述页面请求信息进行拦截;
请求信息发送模块,用于通过所述Node服务端接收所述Nginx服务器所拦截的页面请求信息;
首屏页面形成模块,用于通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面。
为解决上述技术问题,本发明采用的一个技术方案是:提供一种计算机设备,包括,一个或多个处理器;存储器,用于存储一个或多个程序,使得一个或多个处理器实现上述任意一项所述的首屏页面渲染方法。
为解决上述技术问题,本发明采用的一个技术方案是:一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现上述任意一项所述的首屏页面渲染方法。
本发明实施例提供了一种首屏页面渲染方法、装置、计算机设备及存储介质。其中,方法包括:获取来自用户端的页面请求信息;判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;若判断结果为内容分发网络中不存在对应的内容,则则向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截;通过Node服务端接收Nginx服务器所拦截的页面请求信息;通过Node服务端进行页面数据渲染,形成首屏页面。本发明实施例通过服务器内置的Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面,实现减少服务器与客户端的频繁交互,减轻服务器的负载,有利于提高首屏页面的渲染效率。
附图说明
为了更清楚地说明本申请中的方案,下面将对本申请实施例描述中所需要使用的附图作一个简单介绍,显而易见地,下面描述中的附图是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的首屏页面渲染方法的应用环境示意图;
图2根据本申请实施例提供的首屏页面渲染方法的一实现流程图;
图3是本申请实施例提供的首屏页面渲染方法中子流程的一实现流程图;
图4是本申请实施例提供的首屏页面渲染方法中子流程的又一实现流程图;
图5是本申请实施例提供的首屏页面渲染方法中子流程的又一实现流程图;
图6是本申请实施例提供的首屏页面渲染方法中子流程的又一实现流程图;
图7是本申请实施例提供的首屏页面渲染方法中子流程的又一实现流程图;
图8是本申请实施例提供的首屏页面渲染方法中子流程的又一实现流程图;
图9是本申请实施例提供的首屏页面渲染装置示意图;
图10是本申请实施例提供的计算机设备的示意图。
具体实施方式
除非另有定义,本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同;本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的,不是旨在于限制本申请;本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形,意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象,而不是用于描述特定顺序。
在本文中提及“实施例”意味着,结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例,也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是,本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案,下面将结合附图,对本申请实施例中的技术方案进行清楚、完整地描述。
下面结合附图和实施方式对本发明进行详细说明。
请参阅图1,系统架构100可以包括终端设备101、102、103,网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互,以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用,例如网页浏览器应用、搜索类应用、即时通信工具等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器,例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是,本申请实施例所提供的首屏页面渲染方法一般由服务器执行,相应地,首屏页面渲染装置一般配置于服务器中。
应该理解,图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
请参阅图2,图2示出了首屏页面渲染方法的一种具体实施方式。
需注意的是,若有实质上相同的结果,本发明的方法并不以图2所示的流程顺序为限,该方法包括如下步骤:
S1:获取来自用户端的页面请求信息。
具体的,在用户需要打开某一新的页面时,用户通过用户端向服务器发起页面请求信息,服务器通过接受页面请求信息,从而进行后续页面渲染的相关步骤。
其中,页面请求信息包括天气、新闻、娱乐等信息的页面请求。
S2:判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果。
具体的,由于只要有一个用户首次进行该页面请求信息后,服务器针对该页面请求信息进行首屏页面的渲染,渲染成功后的Html页面就可能保存在对应的内容分发网络中。这样在该用户或者其他用户再次进行该页面的访问时,服务器就直接通过存储在内容分发网络中的Html页面进行页面渲染,这样进行的页面渲染不需要再经过Node服务端渲染或者客户端渲染等方式的页面渲染,加快页面渲染的速度。所以服务器在获取到来自用户端的页面请求信息后,首先判断该页面请求信息所访问页面的对应内容,在内容分发网络中是否存在。
其中,内容分发网络是通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输得更快、更稳定。内容分发网络系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。在本实施例中,通过判断用户所访问的页面内容在内容分发网络中是否缓存到相关内容,从而进行页面渲染。
S3:若判断结果为内容分发网络中不存在对应的内容,则向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截。
具体的,内容分发网络中不存在页面请求信息对应的内容时,说明该用户或者其他用户没有进行过该页面的访问;亦或者是用户对该页面进行访问过后,该页面的相关内容由于某种原因,没有保存在内容分发网络中,所以需要对该用户进行的页面请求进行首屏页面渲染。在本实施例中,进行首屏页面渲染时,所采用手段是通过Node服务端进行页面渲染,所以需要向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截,然后将拦截的页面请求信息指向对应的Node服务端。
其中,Nginx服务器是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器。其特点是占有内存少,并发能力强。其中,Nginx服务器是介于内容分发网络与Node服务端之间,其能够根据接收到服务器拦截请求,从而对页面请求信息进行拦截,进而将拦截的页面请求信息指向Node服务端,进而使得Node服务端根据页面请求信息,进行页面渲染。
其中,Node服务端位于服务器内,且其为用于服务器与客户端进行数据交互的中间端口。在本申请实施例中,Node服务端在接收到页面请求信息后,在服务器内部进行页面渲染,从而生成首屏页面,而不需要和外部客户端进行频繁交互,有利于提高首屏页面的渲染效率。
S4:通过Node服务端接收Nginx服务器所拦截的页面请求信息。
具体的,由于Node服务端位于服务器内,其为用于服务器与客户端进行数据交互的中间端口,且在本申请中,需要通过Node服务端进行页面渲染,故而需要通过Node服务端接收Nginx服务器所拦截的页面请求信息,便于后续对页面进行渲染。
S5:通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面。
具体的,Node服务端渲染页面是建立在Ajax之上的一种页面渲染方式,在Node服务端中相当于内置了一个类似浏览器内核,只需要在Node服务端中进行页面的渲染,而不需要和外部浏览器频繁地进行交互,能够实现快速的页面渲染,从而形成首屏页面。所以通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面。
其中,Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。在本申请实施例中,Node服务端渲染页面是建立在Ajax之上的一种页面渲染方式。
本实施例中,通过获取来自用户端的页面请求信息,并判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;若判断结果为内容分发网络中不存在对应的内容,则则向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截;通过Node服务端接收Nginx服务器所拦截的页面请求信息,最后通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面。本发明实施例通过服务器内置的Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面,实现减少服务器与客户端的频繁交互,减轻服务器的负载,有利于提高首屏页面的渲染效率。
请参阅图3,图3示出了步骤S5的一种具体实施方式,步骤S5中通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面的具体实现过程,详叙如下:
S51:通过Node服务端,匹配页面请求信息对应的路由,得到目标路由。
具体的,在本申请实施例中,Node服务端根据页面请求信息,匹配对应的路由,得到目标路由,并根据目标路由,通过统一资源定位系统URL返回不同的页面内容。
其中,路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。路由工作在OSI参考模型第三层-网络层的数据包转发设备。路由器通过转发数据包来实现网络互连。在本申请实施例中,目标路由为在Node服务端中,页面请求信息所对应的路由。
S52:获取页面模板和静态资源,抽取页面模板的公共模板,并将静态资源引入公共模板中,得到基础页面。
具体的,根据目标路由,通过统一资源定位系统URL返回不同的页面内容,获取静态资源;通过模板引擎,获取页面请求信息对应的页面模板,并抽取页面模板的公共模板,该公共模板为页面的公用部分,包括导航、页面底部、Html模板等等。再将静态资源引入公共模板中,得到基础页面。
其中,静态资源可以理解为前端的固定页面,这里面包含Html、CSS、JS、图片等等,不需要查数据库也不需要程序处理,直接就能够显示的页面,其静态资源的访问效率较高。在本申请实施例中,在Node服务端接收到页面请求信息后,根据目标路由,通过统一资源定位系统URL返回服务器内部不同的页面内容,获取静态资源。
其中,公共模板为页面的公用部分,如导航、页面底部、Html模板等。基础页面是公共模板加入了静态资源后,进行编译得到的。
S53:根据目标路由,获取基础页面对应接口数据,并通过接口数据对基础页面进行填充,得到首屏页面。
具体的,将获取的接口数据对公共模板进行填充,丰富页面内容,然后进行监听和编译,再进行日志打印,最终得到首屏页面。
其中,接口数据是页面配置所需要的各种配置数据。
在本实施中,通过Node服务端,匹配页面请求信息对应的路由,得到目标路由,获取页面模板和静态资源,抽取页面模板的公共模板,并将静态资源引入公共模板中,得到基础页面,根据目标路由,获取基础页面对应接口数据,并通过接口数据对基础页面进行填充,得到首屏页面,实现在Node服务端内部形成首屏页面,有利于提高首屏页面渲染的效率。
请参阅图4,图4示出了步骤S52的一种具体实施方式,步骤S52中获取页面模板和静态资源,抽取页面模板的公共模板,并将静态资源引入公共模板中,得到基础页面的具体实现过程,详叙如下:
S521:通过模板引擎获取页面模板,并抽取页面模板的公用部分,作为公共模板。
其中,模板引擎就是基于模板配合数据构造出字符串输出的一个组件。在本申请实施例中,模板引擎采用的是Nunjucks,通过模板引擎Nunjucks进行解析Html模板并返回该请求页面,得到页面模板。
S522:通过目标路由,获取静态资源。
具体的,通过目标路由,根据统一资源定位系统URL返回服务器内部不同的页面内容,获取静态资源。
S523:将静态资源引入公共模板中,并对公共模板进行编译,形成基础页面。
具体的,对将静态资源引入公共模板中进行实时监控,当静态资源完成引入公共模板后,对公共模板进行编译,从而形成基础页面。
其中,基础页面是静态资源完成引入公共模板后,对公共模板进行编译而形成的页面。
本实施例中,通过模板引擎获取页面模板,并抽取页面模板的公用部分,作为公共模板,通过目标路由,获取静态资源,将静态资源引入公共模板中,并对公共模板进行编译,形成基础页面,实现在Node服务端内部形成基础页面,便于后续对首屏页面的渲染,从而提高首屏页面渲染的效率。
请参阅图5,图5示出了步骤S5之后的一种具体实施方式,该实施例包括:
S5A:通过Node服务端将首屏页面,发送给预先加载的网页视图组件。
具体的,该网页视图组件加载渲染该首屏页面;每次用户通过用户端启动的时候,初始化一个全局的网页视图组件待使用,该全局的网页视图组件是用于加载整个应用的页面承载器,待应用销毁时,该全局网页视图组件被销毁。
S5B:通过预先加载的网页视图组件,将首屏页面加载给用户端。
具体的,通过预先加载的网页视图组件,对首屏页面进行加载,并返回到用户端,从而实现页面的快速加载。
本实施例中,通过Node服务端将首屏页面,发送给预先加载的网页视图组件,并通过预先加载的网页视图组件,将首屏页面加载给用户端,实现快速将渲染完成的首屏页面加载到用户端。
请参阅图6,图6示出了步骤S2的一种具体实施方式,步骤S2中判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果的具体实现过程,详叙如下:
S21:解析页面请求信息,获取页面请求信息中的页面标识。
其中,页面标识是用来识别在内容分发网络中是否有该页面请求信息的对应内容,该页面标识可以是统一资源定位系统或是Html页面对应标识等。
S22:基于内容分发网络,将页面标识与内容分发网络的节点标识进行匹配,得到匹配结果。
具体的,通过解析页面请求信息,获取到页面标识,通过该页面标识解析到内容分发网络对应的节点中,进行匹配,从而判断在内容分发网络中是否存在页面请求信息对应的内容。在匹配过程中,内容分发网络的节点中存储着不同的页面内容,每个页面内容都有其独有的节点标识,该节点标识可以是统一资源定位系统或是Html页面对应标识等。将节点标识与页面标识进行匹配,若两者能够匹配,即匹配结果成功,否则,匹配结果为未成功。
S23:若匹配结果为匹配未成功,则判断结果为内容分发网络中不存在对应的内容。
具体的,若匹配结果为匹配未成功,则判断结果为内容分发网络中不存在对应的内容,也即该用户的页面请求信息属于首屏页面请求,则后续步骤对该请求进行首屏页面渲染。
S24:若匹配结果为匹配成功,则判断结果为内容分发网络中存在对应的内容。
具体的,若匹配结果为匹配成功,则判断结果为内容分发网络中存在对应的内容这样,这样服务器就直接通过存储在内容分发网络中的Html页面进行页面渲染,这样进行的页面渲染不需要再经过Node服务端渲染或者客户端渲染等方式的页面渲染,加快页面渲染的速度。
本实施例中,解析页面请求信息,获取页面请求信息中的页面标识,基于内容分发网络,将页面标识与内容分发网络的节点标识进行匹配,得到匹配结果,若匹配结果未成功,则判断结果为内容分发网络中不存在对应的内容,若匹配结果成功,则判断结果为内容分发网络中存在对应的内容,实现对用户的页面请求信息进行判断,判断其是否为首屏页面渲染请求,从而提高首屏页面渲染的效率。
请参阅图7,图7示出了步骤S5之后的一种具体实施方式,该实施例包括:
S5C:通过请求状态码,判断Node服务端是否正常运行。
具体的,通过请求状态码来判断Node服务端是否正常运行,如果返回的请求状态码不是预设的请求状态码,就认为Node服务器执行报错。
S5D:若判定Node服务端未正常运行,则将页面请求信息发送到单页应用程序对应的路径,以使客户端进行页面渲染而得到首屏页面。
具体的,由于Node服务端未正常运行,也即不能够通过Node服务端进行页面渲染,为了保证实现首屏页面能继续渲染成功,则将页面请求信息发送到单页应用程序对应的路径,也即将页面请求信息发送到单页应用程序的内容分发网络对应静态资源路径,以使得客户端进行页面渲染而得到首屏页面。
其中,客户端进行页面渲染是指在服务端预先设置了一个Html页面,客户端在接收到页面请求信息后,服务端将Html页面发送到客户端,客户端在收到服务端响应的字符串后,然后通过浏览器从上到下依次解析,在解析过程中,如果客户端接收到Ajax请求,则再次向服务器发起新的请求,服务器接收到Ajax响应结果后,再通过模板引擎获取页面模板,从而进行页面渲染,进而实现首屏页面渲染。在本申请实施例中,若是Node服务端未正常运行,将页面请求信息发送到单页应用程序对应的路径,以使客户端进行页面渲染而得到首屏页面。
其中,单页应用程序是指单页Web应用(single page web application,SPA),其只有一张Web页面的应用,是加载单个Html页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
本实施例中,通过请求状态码,判断Node服务端是否正常运行,若判定Node服务端未正常运行,则返回内容分发网络对应静态资源路径,执行客户端渲染,得到首屏页面,实现当Node服务端页面渲染失败后,通过客户端渲染的方式,以保证首屏页面渲染成功。
请参阅图8,图8示出了步骤S5之后的一种具体实施方式,该实施例包括:
S5E:判断Node服务端中是否存在配置Redis缓存机制。
具体的,在Node服务端进行页面渲染时,会判断该页面渲染后是否存在配置Redis缓存机制中,如果是将渲染完成后,将首屏页面存在配置Redis缓存机制,这样下次用户再次访问回源到Redis分布式服务器,直接从Redis分布式服务器返回渲染好的数据,有利于提高响应速度和提高服务器的负载能力。
其中,配置Redis缓存机制是指服务器中配置有将首屏页面渲染完成后,指向Redis分布式服务器,将首屏页面信息存储于Redis分布式服务器对应的数据库中。
S5F:若判定Node服务端中存在配置Redis缓存机制,则将首屏页面存储于Redis分布式服务器中。
具体的,将首屏页面存储于Redis分布式服务器中,便于后续用户进行页面渲染时,直接从Redis分布式服务器中取走对应页面信息,提高页面渲染效率。
本实施例中,通过判断Node服务端中是否存在配置Redis缓存机制,若判定Node服务端中存在配置Redis缓存机制,则将首屏页面存储于Redis分布式服务器中,有利于提高页面响应速度和提高服务器的负载能力。
需要强调的是,为进一步保证上述页面请求信息的私密和安全性,上述页面请求信息还可以存储于一区块链的节点中。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,该计算机程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)等非易失性存储介质,或随机存储记忆体(Random Access Memory,RAM)等。
请参考图9,作为对上述图2所示方法的实现,本申请提供了一种首屏页面渲染装置的一个实施例,该装置实施例与图2所示的方法实施例相对应,该装置具体可以应用于各种电子设备中。
如图9所示,本实施例的首屏页面渲染装置包括:请求信息获取模块61、判断结果获取模块62、请求信息拦截模块63、请求信息发送模块64及首屏页面形成模块65,其中:
请求信息获取模块61,用于获取来自用户端的页面请求信息;
判断结果获取模块62,用于判断页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;
请求信息拦截模块63,用于若判断结果为内容分发网络中不存在对应的内容,则向Nginx服务器发出页面拦截请求,以使得Nginx服务器对页面请求信息进行拦截;
请求信息发送模块64,用于通过Node服务端接收Nginx服务器所拦截的页面请求信息;
首屏页面形成模块65,用于通过Node服务端对页面请求信息,进行页面数据渲染,形成首屏页面。
进一步的,首屏页面形成模块65包括:
目标路由获取单元,用于通过Node服务端,匹配页面请求信息对应的路由,得到目标路由;
基础页面获取单元,用于获取页面模板和静态资源,抽取页面模板的公共模板,并将静态资源引入公共模板中,得到基础页面;
基础页面填充单元,用于根据目标路由,获取基础页面对应接口数据,并通过接口数据对基础页面进行填充,得到首屏页面。
进一步的,基础页面获取单元包括:
公共模板获取子单元,用于通过模板引擎获取页面模板,并抽取页面模板的公用部分,作为公共模板;
静态资源获取子单元,用于通过目标路由,获取静态资源;
公共模板编译子单元,用于将静态资源引入公共模板中,并对公共模板进行编译,形成基础页面。
进一步的,在首屏页面形成模块65之后,该首屏页面渲染装置还包括:
首屏页面发送模块,用于通过Node服务端将首屏页面,发送给预先加载的网页视图组件;
首屏页面加载模块,用于通过预先加载的网页视图组件,将首屏页面加载给用户端。
进一步的,判断结果获取模块62包括:
页面标识获取单元,用于解析页面请求信息,获取页面请求信息中的页面标识;
匹配结果获取单元,用于基于内容分发网络,将页面标识与内容分发网络的节点标识进行匹配,得到匹配结果;
第一判断结果单元,用于若匹配结果为匹配未成功,则判断结果为内容分发网络中不存在对应的内容;
第二判断结果单元,用于若匹配结果为匹配成功,则判断结果为内容分发网络中存在对应的内容。
进一步的,在首屏页面形成模块65之后,该首屏页面渲染装置还包括:
服务端运行判断模块,用于通过请求状态码,判断Node服务端是否正常运行;
客户端渲染模块,用于若判定Node服务端未正常运行,则将页面请求信息发送到单页应用程序对应的路径,以使客户端进行页面渲染而得到首屏页面。
进一步的,在首屏页面形成模块65之后,该首屏页面渲染装置还包括:
缓存机制判断模块,用于判断Node服务端中是否存在配置Redis缓存机制;
首屏页面存储模块,用于若判定Node服务端中存在配置Redis缓存机制,则将首屏页面存储于Redis分布式服务器中。
需要强调的是,为进一步保证上述页面请求信息的私密和安全性,上述页面请求信息还可以存储于一区块链的节点中。
为解决上述技术问题,本申请实施例还提供计算机设备。具体请参阅图10,图10为本实施例计算机设备基本结构框图。
计算机设备7包括通过系统总线相互通信连接存储器71、处理器72、网络接口73。需要指出的是,图中仅示出了具有三种组件存储器71、处理器72、网络接口73的计算机设备7,但是应理解的是,并不要求实施所有示出的组件,可以替代的实施更多或者更少的组件。其中,本技术领域技术人员可以理解,这里的计算机设备是一种能够按照事先设定或存储的指令,自动进行数值计算和/或信息处理的设备,其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit,ASIC)、可编程门阵列(Field-Programmable Gate Array,FPGA)、数字处理器(Digital Signal Processor,DSP)、嵌入式设备等。
计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
存储器71至少包括一种类型的可读存储介质,可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如,SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中,存储器71可以是计算机设备7的内部存储单元,例如该计算机设备7的硬盘或内存。在另一些实施例中,存储器71也可以是计算机设备7的外部存储设备,例如该计算机设备7上配备的插接式硬盘,智能存储卡(SmartMedia Card,SMC),安全数字(Secure Digital,SD)卡,闪存卡(Flash Card)等。当然,存储器71还可以既包括计算机设备7的内部存储单元也包括其外部存储设备。本实施例中,存储器71通常用于存储安装于计算机设备7的操作系统和各类应用软件,例如首屏页面渲染方法的程序代码等。此外,存储器71还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器72在一些实施例中可以是中央处理器(Central Processing Unit,CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器72通常用于控制计算机设备7的总体操作。本实施例中,处理器72用于运行存储器71中存储的程序代码或者处理数据,例如运行一种首屏页面渲染方法的程序代码。
网络接口73可包括无线网络接口或有线网络接口,该网络接口73通常用于在计算机设备7与其他电子设备之间建立通信连接。
本申请还提供了另一种实施方式,即提供一种计算机可读存储介质,计算机可读存储介质存储有服务器维护程序,服务器维护程序可被至少一个处理器执行,以使至少一个处理器执行如上述的一种首屏页面渲染方法的步骤。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本申请各个实施例的方法。
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain),本质上是一个去中心化的数据库,是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一批次网络交易的信息,用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
显然,以上所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例,附图中给出了本申请的较佳实施例,但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现,相反地,提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明,对于本领域的技术人员来而言,其依然可以对前述各具体实施方式所记载的技术方案进行修改,或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构,直接或间接运用在其他相关的技术领域,均同理在本申请专利保护范围之内。

Claims (10)

1.一种首屏页面渲染方法,应用于服务器中,所述服务器配置有Node服务端,其特征在于,包括:
获取来自用户端的页面请求信息;
判断所述页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;
若所述判断结果为所述内容分发网络中不存在所述对应的内容,则向Nginx服务器发出页面拦截请求,以使得所述Nginx服务器对所述页面请求信息进行拦截;
通过所述Node服务端接收所述Nginx服务器所拦截的页面请求信息;
通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面。
2.根据权利要求1所述的首屏页面渲染方法,其特征在于,所述通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面,包括:
通过所述Node服务端,匹配所述页面请求信息对应的路由,得到目标路由;
获取页面模板和静态资源,抽取所述页面模板的公共模板,并将所述静态资源引入所述公共模板中,得到基础页面;
根据所述目标路由,获取所述基础页面对应接口数据,并通过所述接口数据对所述基础页面进行填充,得到所述首屏页面。
3.根据权利要求2所述的首屏页面渲染方法,其特征在于,获取页面模板和静态资源,抽取所述页面模板的公共模板,并将所述静态资源引入所述公共模板中,得到基础页面,包括:
通过模板引擎获取所述页面模板,并抽取所述页面模板的公用部分,作为所述公共模板;
通过所述目标路由,获取所述静态资源;
将所述静态资源引入所述公共模板中,并对所述公共模板进行编译,形成所述基础页面。
4.根据权利要求2所述的首屏页面渲染方法,其特征在于,在根据所述目标路由,获取所述基础页面对应接口数据,并通过所述接口数据对所述基础页面进行填充,得到所述首屏页面之后,所述方法还包括:
通过所述Node服务端将所述首屏页面,发送给预先加载的网页视图组件;
通过所述预先加载的网页视图组件,将所述首屏页面加载给所述用户端。
5.根据权利要求1所述的首屏页面渲染方法,其特征在于,所述判断所述页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果,包括:
解析所述页面请求信息,获取页面请求信息中的页面标识;
基于所述内容分发网络,将所述页面标识与内容分发网络的节点标识进行匹配,得到匹配结果;
若所述匹配结果为匹配未成功,则所述判断结果为所述内容分发网络中不存在所述对应的内容;
若所述匹配结果为匹配成功,则所述判断结果为所述内容分发网络中存在所述对应的内容。
6.根据权利要求1所述的首屏页面渲染方法,其特征在于,所述通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面之后,所述方法还包括:
通过请求状态码,判断所述Node服务端是否正常运行;
若判定所述Node服务端未正常运行,则将所述页面请求信息发送到单页应用程序对应的路径,以使客户端进行页面渲染而得到所述首屏页面。
7.根据权利要求1至6任一项所述的首屏页面渲染方法,其特征在于,所述通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面之后,所述方法还包括:
判断所述Node服务端中是否存在配置Redis缓存机制;
若判定所述Node服务端中存在配置Redis缓存机制,则将所述首屏页面存储于Redis分布式服务器中。
8.一种首屏页面渲染装置,应用于服务器中,所述服务器配置有Node服务端,其特征在于,包括:
请求信息获取模块,用于获取来自用户端的页面请求信息;
判断结果获取模块,用于判断所述页面请求信息对应的内容在内容分发网络中是否存在,得到判断结果;
请求信息拦截模块,用于若所述判断结果为所述内容分发网络中不存在所述对应的内容,则向Nginx服务器发出页面拦截请求,以使得所述Nginx服务器对所述页面请求信息进行拦截;
请求信息发送模块,用于通过所述Node服务端接收所述Nginx服务器所拦截的页面请求信息;
首屏页面形成模块,用于通过所述Node服务端对所述页面请求信息,进行页面数据渲染,形成首屏页面。
9.一种计算机设备,其特征在于,包括存储器和处理器,所述存储器中存储有计算机程序,所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的首屏页面渲染方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的首屏页面渲染方法。
CN202011483716.3A 2020-12-16 2020-12-16 首屏页面渲染方法、装置、计算机设备及存储介质 Pending CN112527293A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011483716.3A CN112527293A (zh) 2020-12-16 2020-12-16 首屏页面渲染方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011483716.3A CN112527293A (zh) 2020-12-16 2020-12-16 首屏页面渲染方法、装置、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
CN112527293A true CN112527293A (zh) 2021-03-19

Family

ID=75000538

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011483716.3A Pending CN112527293A (zh) 2020-12-16 2020-12-16 首屏页面渲染方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN112527293A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113326043A (zh) * 2021-05-26 2021-08-31 上海哔哩哔哩科技有限公司 网页渲染方法、网页制作方法及网页渲染系统
CN113934953A (zh) * 2021-10-11 2022-01-14 上海哔哩哔哩科技有限公司 网页首屏渲染方法及装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113326043A (zh) * 2021-05-26 2021-08-31 上海哔哩哔哩科技有限公司 网页渲染方法、网页制作方法及网页渲染系统
CN113326043B (zh) * 2021-05-26 2022-05-03 上海哔哩哔哩科技有限公司 网页渲染方法、网页制作方法及网页渲染系统
CN113934953A (zh) * 2021-10-11 2022-01-14 上海哔哩哔哩科技有限公司 网页首屏渲染方法及装置

Similar Documents

Publication Publication Date Title
EP3229148B1 (en) Website access method and device, and website system
ES2256292T3 (es) Servidor de red.
US7665094B2 (en) Systems and methods for mobile communication
CN110334297B (zh) 终端页面的加载方法、终端、服务器及存储介质
US20070050519A1 (en) Storing state in a dynamic content routing network
US20110231482A1 (en) Automated Optimization Based On Determination Of Website Usage Scenario
WO2004040481A1 (en) A system and method for providing and displaying information content
CN112073405A (zh) 网页数据加载方法、装置、计算机设备及存储介质
CN112527293A (zh) 首屏页面渲染方法、装置、计算机设备及存储介质
CN111563216A (zh) 本地数据缓存方法、装置及相关设备
WO2023005163A1 (zh) 应用页面的加载方法、存储介质、及其相关设备
CN115668894A (zh) 被配置为服务多个单页应用的服务工作器
CN111817984A (zh) 消息发送方法、装置、设备及存储介质
CN113259479A (zh) 一种数据处理方法以及设备
CN109977677A (zh) 漏洞信息收集方法、装置、设备及可读存储介质
US9485330B2 (en) Web browser operation method and system
CN111782244A (zh) 配置文件的更新方法、装置、计算机设备及存储介质
CN113761412A (zh) 应用页面的显示方法、装置、电子设备、介质及应用系统
WO2014019467A1 (en) A web browser operation method and system
CN113315829B (zh) 客户端离线化h5页面加载方法、装置、计算机设备及介质
CN115733685A (zh) Web会话认证管理方法、装置、计算机设备及存储介质
CN113271300B (zh) 一种认证的系统和方法
CN113765972A (zh) 数据请求响应方法、装置、系统、服务器和存储介质
CN109981738B (zh) 一种适用于窄带物联网应用的云服务器
CN113037848A (zh) 文件上传方法和系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination