一种页面渲染方法及装置与流程

本发明涉及页面渲染技术领域，尤其涉及一种页面渲染方法及装置。

背景技术：

随着计算机技术的蓬勃发展，用户与客户端之间的交互也随之增多，用户访问页面的需求量也日益上升。

目前，页面渲染的方式通常有后端渲染和前端渲染两种主要方式，在前端渲染中，前端在捕捉用户的页面访问请求后，通常会从后端获取相应的内容然后对原始页面进行渲染，然而，在对原始页面进行渲染之前，前端会对原始页面进行爬虫即直接抓取原始页面，无法等待前端渲染完成，导致前端渲染完成的页面无法被抓取。

技术实现要素：

本发明实施例提供了一种页面渲染方法及装置，可以在直出同构页面的同时，完成对同构页面的爬虫。

根据本发明的一个方面，提供一种页面渲染方法，包括：

通过反向代理工具判断获取到的页面访问请求是否为爬虫，若是，则执行下一步；

通过nodejs服务向所述反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面；

通过nodejs服务向所述反向代理工具发送页面加载完成指令和所述同构页面，以完成爬虫操作和页面显示。

优选地，所述通过nodejs服务向所述反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面具体为：

通过nodejs服务向所述反向代理工具发送页面加载中指令，确定与所述页面访问请求对应的预置脚本，调用headless执行所述预置脚本完成对原始页面的渲染，得到同构页面。

优选地，所述通过nodejs服务向所述反向代理工具发送页面加载中指令，确定与所述页面访问请求对应的预置脚本，调用headless执行所述预置脚本完成对原始页面的渲染，得到同构页面具体为：

通过nodejs服务调用chrome内核访问原始页面，判断所述页面访问请求的业务类型，若为静态业务，则确定与所述页面访问请求对应的预置脚本，调用headless执行所述预置脚本完成对原始页面的渲染，得到同构页面，若为延迟业务，则在等待相应的延迟时间后，确定与所述页面访问请求对应的预置脚本，调用headless执行所述预置脚本完成对原始页面的渲染，得到同构页面。

优选地，所述预置脚本为javascript脚本。

优选地，所述通过nodejs服务向所述反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面之前还包括：

通过nodejs服务判断所述页面访问请求所请求的页面在redis集群内是否存在缓存，若是，则在所述redis集群读取缓存生成对应的同构页面并发送至所述反向代理工具，若不是，则执行下一步。

优选地，所述通过nodejs服务判断所述页面访问请求所请求的页面在redis集群内是否存在缓存，若是，则在所述redis集群读取缓存生成对应的同构页面，若不是，则执行下一步之前还包括：

通过nodejs服务判断所述页面访问请求所请求的页面域名是否为白名单，若是，则判断所述页面访问请求所请求的页面在redis集群内是否存在缓存，若不是，则向反向代理工具返回拒绝页。

优选地，所述通过nodejs服务向所述反向代理工具发送页面加载完成指令和所述同构页面，以完成爬虫操作和页面显示之后还包括：

通过nodejs服务将所述同构页面储存入redis集群中。

根据本发明的另一方面，提供一种页面渲染装置，包括：

反向代理工具，用于判断获取到的页面访问请求是否为爬虫，若是，则触发nodejs服务；

nodejs服务，用于向所述反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面；

所述nodejs服务还用于向所述反向代理工具发送页面加载完成指令和所述同构页面，以完成爬虫操作和页面显示。

根据本发明的另一方面，提供一种电子设备，包括处理器和存储器，所述存储器上存储有计算机程序指令，当所述程序指令被处理器执行时实现如以上所述的页面渲染方法。

根据本发明的另一方面，提供一种计算机可读存储介质，所述介质上存储有计算机程序指令，当所述程序指令被处理器执行时实现如以上所述的页面渲染方法。

从以上技术方案可以看出，本发明实施例具有以下优点：

本发明提供了一种页面渲染方法及装置，本发明以前端为渲染载体，通过nodejs服务与反向代理工具的结合与引入，在执行爬虫前对原始页面进行提前渲染，使得爬虫能够抓取已经渲染的同构页面，解决传统前端渲染所存在的搜索引擎优化问题(searchengineoptimization，seo)。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。

图1为本发明提供的一种页面渲染方法的一个实施例的流程示意图；

图2为本发明提供的一种页面渲染方法的另一个实施例的流程示意图；

图3为本发明提供的一种页面渲染装置的一个实施例的结构示意图。

具体实施方式

本发明实施例提供了一种页面渲染方法及装置，可以在直出同构页面的同时，完成对同构页面的爬虫。

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

请参阅图1，本发明提供的一种页面渲染方法的一个实施例，包括：

101、通过反向代理工具判断获取到的页面访问请求是否为爬虫，若是，则执行102；

需要说明的是，本发明提供的方法的执行主体为一种页面渲染装置，其可以为一种引擎(包含反向代理工具和nodejs服务)，加载于前端上，当用户访问前端时，且发送页面访问请求，该装置可以通过反向代理工具判断该页面访问请求是正常用户请求还是爬虫请求，若为爬虫请求，则执行下一步。

102、通过nodejs服务向所述反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面；

在确定是需执行爬虫后，则引擎通过nodejs服务向所述反向代理工具发送页面加载中指令(此时爬虫则不会立即抓取原始页面)，然后通过nodejs服务根据预置脚本对原始页面进行渲染，得到同构页面。

需要说明的是，本发明提供的装置中，nodejs服务上开发有多个接口，其中有用于与反向代理工具进行衔接的接口，以便二者进行数据交互。且预置脚本也内置于该引擎中，能够使得本发明不需要与后端(服务端)进行交互，在前端独立完成页面直出，即前后端分离。

103、通过nodejs服务向所述反向代理工具发送页面加载完成指令和所述同构页面，以完成爬虫操作和页面显示。

在同构页面渲染完成后，引擎通过nodejs服务向所述反向代理工具发送页面加载完成指令和所述同构页面，此时同构页面的内容可以被爬虫所抓取，同时也可以被浏览器或平台所捕获进行显示。

本发明以前端为渲染载体，通过nodejs服务与反向代理工具的结合与引入，在执行爬虫前对原始页面进行提前渲染，使得爬虫能够抓取已经渲染的同构页面，解决传统前端渲染所存在的seo问题。

以上为一种页面渲染方法的一个实施例，为进行更具体的说明，下面提供一种页面渲染方法的另一个实施例，请参阅图2，本发明提供的一种页面渲染方法的另一个实施例，包括：

201、通过反向代理工具判断获取到的页面访问请求是否为爬虫，若是，则执行202；

需要说明的是，本发明提供的方法的执行主体为一种页面渲染装置，其可以为一种引擎(包含反向代理工具和nodejs服务)，加载于前端上，当用户访问前端时，且发送页面访问请求，该装置可以通过反向代理工具判断该页面访问请求是正常用户请求还是爬虫请求，若为爬虫请求，则执行下一步。

在本实施例中，反向代理工具可以为nginx、apache、caddy等，能够令实现spa技术所渲染出来的页面可以正常被爬虫以及其余社交平台所捕抓，达到同构直出的目的。

202、通过nodejs服务判断页面访问请求所请求的页面域名是否为白名单，若是，则判断页面访问请求所请求的页面在redis集群内是否存在缓存，若不是，则向反向代理工具返回拒绝页；

为了防止引擎被滥用，通常可以对用户所请求访问的页面域名进行限制，如yy.com设置为白名单，当用户访问其余域名时，则无法调用本发明提供的页面渲染方法，即引擎中的nodejs服务在判断用户需访问的域名为黑名单后，不会对原始页面进行渲染，则会向方向代理工具返回拒绝页。

203、通过nodejs服务判断页面访问请求所请求的页面在redis集群内是否存在缓存，若是，则在redis集群读取缓存生成对应的同构页面并发送至反向代理工具，若不是，则执行204；

可以理解的是，本发明提供的页面渲染方法，其执行主体的引擎还包括redis集群，其可以与nodejs服务进行数据交互，用于作为nodejs服务的渲染页面数据缓存。

若用户请求访问的页面在redis集群中存在缓存(即已经渲染过)，则nodejs服务可以直接在redis中读取与用户的页面访问请求相对应的数据，然后生成相应的同构页面反馈至方向代理工具即可。若是初次渲染的页面，则执行下一步。

204、通过nodejs服务向反向代理工具发送页面加载中指令，确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面；

在本实施例中，原始页面通常为空白内容的spa页面。

更进一步地，步骤204具体为：通过nodejs服务调用chrome内核访问原始页面，判断页面访问请求的业务类型，若为静态业务，则确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面，若为延迟业务，则在等待相应的延迟时间后，确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面。

更进一步地，预置脚本为javascript脚本。

在本实施例中，nodejs服务通过headless作为载体进行页面渲染，headlesschrome是chrome浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有chrome支持的特性运行程序。因此，可以利用headless在前端以后端的方式完美执行页面的javascript脚本，从而得到页面的所有输出信息，完成渲染。且nodejs服务是一种javascript的跨平台运行环境，通过nodejs服务调用headless，可以在没有语言隔膜的情况下进行内容处理。

且在nodejs服务调用headless的同时，加入了事件支持，如静态业务可以立即对页面进行渲染，如延时业务则可以通过nodejs服务中的puppeteer进行观察等待，直到收到puppeteer返回的延时完成指令后然后对页面进行内容渲染。

205、通过nodejs服务向反向代理工具发送页面加载完成指令和同构页面，以完成爬虫操作和页面显示；

完成页面渲染后，即得到同构页面，引擎通过nodejs服务向所述反向代理工具发送页面加载完成指令和所述同构页面，此时同构页面的内容可以被爬虫所抓取，同时也可以被浏览器或平台所捕获进行显示。

206、通过nodejs服务将同构页面储存入redis集群中。

本实施例中，引擎可以通过nodejs服务将初次完成渲染的同构页面存入redis集群中，以便下次用户访问时直接调用。

本发明提供的一种页面渲染方法，其具备以下优点：

1)开发沟通低，前后端分离模式；

2)代码改造成本低，只需在业务层加入需要显示的内容以及延迟的特殊处理即可；

3)接入成本低，标准化接入，支持多平台；

4)维护成本低，由引擎提供方统一运维与服务，不需要额外的开发运维成本；

5)可拓展性高，可涵盖目前市面上所有应用的spa技术的页面；

6)开发效率，相对于其他方案所付出的成本微乎其微；

7)能够解决传统的前端渲染存在seo问题。

以上是对本发明提供的一种页面渲染方法进行的详细说明，以下将对本发明提供的一种页面渲染装置的结构和连接关系进行说明，请参阅图3，本发明提供的一种页面渲染装置的一个实施例，包括：

反向代理工具301，用于判断获取到的页面访问请求是否为爬虫，若是，则触发nodejs服务；

nodejs服务302，用于向反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面；

nodejs服务302还用于向反向代理工具发送页面加载完成指令和同构页面，以完成爬虫操作和页面显示。

更进一步地，nodejs服务302还用于向反向代理工具发送页面加载中指令，确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面。

更进一步地，nodejs服务302调用chrome内核访问原始页面，判断页面访问请求的业务类型，若为静态业务，则确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面，若为延迟业务，则在等待相应的延迟时间后，确定与页面访问请求对应的预置脚本，调用headless执行预置脚本完成对原始页面的渲染，得到同构页面。

更进一步地，预置脚本为javascript脚本。

更进一步地，本发明提供的一种页面渲染装置还包括：redis集群303；

nodejs服务302还用于判断页面访问请求所请求的页面在redis集群303内是否存在缓存，若是，则在redis集群303读取缓存生成对应的同构页面并发送至反向代理工具，若不是，则向反向代理工具发送页面加载中指令，根据预置脚本对原始页面进行渲染，得到同构页面。

更进一步地，nodejs服务302还用于判断页面访问请求所请求的页面域名是否为白名单，若是，则判断页面访问请求所请求的页面在redis集群内是否存在缓存，若不是，则向反向代理工具返回拒绝页。

更进一步地，nodejs服务302还用于将同构页面储存入redis集群303中。

本发明还涉及一种电子设备，包括处理器和存储器，所述存储器上存储有计算机程序指令，当所述程序指令被处理器执行时实现如以上所述的页面渲染方法。

本发明还涉及一种计算机可读存储介质，所述介质上存储有计算机程序指令，当所述程序指令被处理器执行时实现如以上任一项所述的页面渲染方法。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。