近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行。许多公司和开发人员使用这些JavaScript框架开发应用程序。这些框架有很多的优势:

前端和后端独立开发
JavaScript框架+RESTFUL的API(或微服务架构)
SPA(Single Page Application)
某种程度上有利于提高开发效率
但是使用JavaScript框架对前台尤其是需要支持搜索引擎的页面是很有问题的,这是因为我们使用这些框架基本上都是基于虚拟元素或属性和JavaScript绑定JSON对象,都是SEO不友好的。很多搜索引擎,社交媒体,爬虫甚至不支持抓取JavaScript的网页。

很庆幸的是,我们可以使用PreRender预渲染页面(PreRender通过执行页面上的JavaScript,然后呈现给搜索引擎爬虫)。

PreRender 预渲染解决方案

根据PreRender逻辑,有3个不同的级别的解决方案来实施prerender

方案1:应用层

通过中间件实现对应用程序级别prerender逻辑(即Express NodeJS中间件,Ruby on Rails的中间件,ASP.NET MVC中间件,…)

Http请求到达
应用程序将检查Http请求是否来自爬虫(User Agent)。
如果请求来自爬虫,那么appliaction将调用prerender服务,把原来的URL作为查询字符串。
预渲染服务将调用应用程序
应用程序返回原始的HTML用JavaScript逻辑的prerender服务
预渲染服务将执行内部HTML的JavaScript(与浏览器类似)
预渲染服务将最终的HTML返回到应用程序。
Appliaction将最终的HTML返回到浏览器。
如果Http请求来自普通用户,应用程序将执行输出,并发送回浏览器。

方案2:服务器容器级别

通过使用URL重写中间件,实施服务器容器级别prerender逻辑(i.e. Apache,Nginx,IIS)。

Http请求到达
服务器容器(如Apache,Nginx,IIS)将检查Http请求是否来自爬虫(User Agent)。
如果Http请求来自爬虫,然后重写URL(将原始URL作为查询字符串)预呈现服务。
预渲染服务将调用应用程序
应用程序返回JavaScript逻辑原始的HTML
预渲染服务将执行内部HTML的JavaScript,与浏览器类似
预渲染服务将返回最终的HTML服务器容器(Apache,Nginx,IIS)。
如果Http请求来自普通用户,然后将流量重定向到应用程序。应用程序将执行并返回输出到服务器容器。

方案3:网络级别

我们通过负载均衡的代理实现网络级prerender逻辑,i.e. HAProxy:

Http请求到达
负载均衡代理会检查Http请求是否来自爬虫(User Agent)。
如果Http来自爬虫,然后将流量重定向(将原始URL作为查询字符串)预呈现服务。
预渲染服务将调用应用程序
应用程序返回包含JavaScript原始的HTML
预渲染服务将执行内部HTML的JavaScript,与浏览器类似
预渲染服务将最终的HTML返回给负载平衡的代理。
如果Http请求来自普通用户,将流量重定向到应用程序。应用程序将执行并返回输出到负载平衡的代理。

解决方案比较

以上3种不同的解决方案是在不同的级别解决相同的问题,但是它们有着不同的性能结果。

方案1:应用层

该解决方案易于实施,易于调试,但它也加重应用程序负载,因为应用程序需要等待的prerender服务调用的应用程序和执行JavaScript,这将需要大量的时间等待,并且等待时间取决于它的JavaScript逻辑的复杂性。因此,这种解决方案的瓶颈是应用程序。

如果的prerender服务已关闭,会影响普通用户访问体验(长时间的请求预呈现服务,消耗应用程序和服务器容器资源)。

推荐指数:1

方案2:服务器容器级别

这种解决方案利用URL重写逻辑来将负载瓶颈从应用级移到IIS级,这种方案提高了应用程序的灵活性。
如果的prerender服务已关闭,会影响普通用户访问体验是(长时间的请求预呈现服务,消耗服务器容器资源)。

推荐指数:2

方案3:网络级别

这种解决方案将在最高水平通过使用负载平衡来实现,在网络级,因此,存在于服务器容器和应用程序无瓶颈,因为它移动到负载平衡。
有了这个解决方案,甚至的prerender服务关闭,也不会影响到普通用户的接入体验。

推荐指数:3

基于上述的基本分析,通常来说,方案3比方案2更好,方案2比方案1更好。

性能问题

无论我们将要使用那种解决方案,我们总应该思考如何提高性能,因为执行JavaScript逻辑总会比执行服务器端逻辑花费更长的时间,而且不可预见。

在另一方面,如果我们只重定向爬虫的Http请求到预渲染服务,我们不需要提供最新信息给爬虫,我们可以使用prerender的缓存服务来提高性能,我们可以缓存爬虫访问过的页面12小时-1天。

Prerender.io – 预渲染架构,提高AngularJS SEO
http://www.cnblogs.com/bmwchampion/p/6513517.html

前端渲染与 SEO 优化踩坑 小记
https://www.v2ex.com/t/302616

Prerender – AngularJS SEO, BackboneJS SEO, or EmberJS SEO
https://prerender.io/

打赏

Leave a Reply

Your email address will not be published. Required fields are marked *