[发明专利]一种前端Node.js自动化正静态方法

说明书

技术领域

本发明涉及信息技术领域，尤其是涉及一种前端Node.js自动化正静态方法。

背景技术

随着近几年，web开发技术的飞速发展，web开发架构也在发生演变，其中，近年来发展的最快、变化最大的就是前端技术行业。前后端分离后，前端的框架也在高速的迭代，前端开始慢慢的承接越来越多的重担了，很多以前是由后端技术来解决的问题，也开始慢慢移交到前端来完成，比如，其中的数据渲染这一项。

现在的市场流行的框架，大多数都已经是前端动态渲染的框架了，比如市场流行的react、angular、Vue等，都是将后端吐出的数据接口返回到客户端后，再在客户端来进行动态的解析、数据的渲染过程，由后端渲染转为了前端渲染。

前端渲染框架大多都是使用js将数据和dom结构解析编译到一起的一个过程，需要预先设置好容器，然后将解析后的内容填充到容器中，这就导致了现在的流行框架在直接访问其源码的时候，只有空的容器而没有实际编译的代码，导致爬虫，搜索引擎无法完成检索，从而无法识别网站的相关信息和内容。

发明内容

本发明为了解决现有技术中大部分前端数据模板渲染类的框架，在html中只有模板容器而没有完整的dom结构的问题，提供一种前端Node.js自动化正静态方法。

为了解决上述问题，本发明采用的技术方案如下所述：

一种Node.js前端正静态化方法，包括如下步骤：根据url地址通过配置Nginx代理本地文件，或通过url地址向远程服务器发送请求下载静态资源文件；将获得的所述静态资源文件经过chrome v8内核渲染，得到完整的dom结构并暂存在内存中；取出所述dom结构中body部分的代码在本地进行静态化渲染，得到静态html内容并将所述静态html内容写为缓存文件。

优选地，所述步骤T2包括如下步骤：所述chrome v8内核执行所述静态资源文件中的html代码，所述html代码会继续下载当前网址的js代码和img资源；所述chrome v8内核执行所述js代码，并去服务器上请求后端接口数据，将json格式的数据字段解析到对应的html标签容器中，将后台的数据渲染到了html中所述js代码继续执行css代码，将存在js代码中的css代码解析到style标签中，并插入到此时暂存在内存中的dom结构的head标签里；所有静态资源文件被执行完之后，所述chrome v8内核模拟浏览器引擎将渲染完成的完整的dom结构输出。

优选地，所述步骤T3包括如下步骤：对所述dom结构内容进行解析，取出所述dom结构中所述body部分的代码片段；根据预设模板编译得到一个header内容，所述header内容包括SEO信息的相关的title、meta标签以及当前网址的框架js引用路径；将所述header内容和body代码拼接，加上页面资源js引用路径并随机生成一条32位hash字符串，拼接在资源js引用路径的后面，即完成了静态html内容的渲染过程；并将所述html内容写为缓存文件。

本发明的有益效果为：提供一种Node.js前端正静态化方法，可以渲染出完整的dom结构，并组成完整的html结构，解决了目前大部分前端数据模板渲染类的框架在html中只有模板容器而没有完整的dom结构，影响到搜索引擎的内容检索的问题，可以自动化的生成完全的html结构内容，将首屏接口数据静态化并保存到本地或服务器上，解决了前端js动态渲染页面的SEO收录问题，提升搜索引擎对于网页的权重评估。

附图说明

图1是本发明实施例1中Node.js前端正静态化方法示意图。

图2是本发明实施例1中得到完整的dom结构的方法示意图。

图3是是本发明实施例1中得到静态html内容的方法示意图。

具体实施方式

下面结合附图通过具体实施例对本发明进行详细的介绍，以使更好的理解本发明，但下述实施例并不限制本发明范围。另外，需要说明的是，下述实施例中所提供的图示仅以示意方式说明本发明的基本构思，附图中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的形状、数量及比例可为一种随意的改变，且其组件布局形态也可能更为复杂。

实施例1

如图1所示，本实施例通过本发明所述的Node.js前端正静态化方法，渲染出完整的dom结构，并组成完整的html结构，具体包括如下步骤：