[發(fā)明專利]一種前端Node.js自動(dòng)化正靜態(tài)方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201711025357.5
• 申請(qǐng)日: 2017-10-27
• 公開(kāi)（公告）號(hào): CN107766532A
• 公開(kāi)（公告）日: 2018-03-06
• 發(fā)明（設(shè)計(jì)）人: 張翔
• 申請(qǐng)（專利權(quán)）人: 深圳市行云易通科技有限公司
• 主分類號(hào): G06F17/30
• 分類號(hào): G06F17/30;G06F9/445
• 代理公司: 深圳新創(chuàng)友知識(shí)產(chǎn)權(quán)代理有限公司44223
• 代理人: 江耀純

技術(shù)領(lǐng)域

本發(fā)明涉及信息技術(shù)領(lǐng)域，尤其是涉及一種前端Node.js自動(dòng)化正靜態(tài)方法。

背景技術(shù)

隨著近幾年，web開(kāi)發(fā)技術(shù)的飛速發(fā)展，web開(kāi)發(fā)架構(gòu)也在發(fā)生演變，其中，近年來(lái)發(fā)展的最快、變化最大的就是前端技術(shù)行業(yè)。前后端分離后，前端的框架也在高速的迭代，前端開(kāi)始慢慢的承接越來(lái)越多的重?fù)?dān)了，很多以前是由后端技術(shù)來(lái)解決的問(wèn)題，也開(kāi)始慢慢移交到前端來(lái)完成，比如，其中的數(shù)據(jù)渲染這一項(xiàng)。

現(xiàn)在的市場(chǎng)流行的框架，大多數(shù)都已經(jīng)是前端動(dòng)態(tài)渲染的框架了，比如市場(chǎng)流行的react、angular、Vue等，都是將后端吐出的數(shù)據(jù)接口返回到客戶端后，再在客戶端來(lái)進(jìn)行動(dòng)態(tài)的解析、數(shù)據(jù)的渲染過(guò)程，由后端渲染轉(zhuǎn)為了前端渲染。

前端渲染框架大多都是使用js將數(shù)據(jù)和dom結(jié)構(gòu)解析編譯到一起的一個(gè)過(guò)程，需要預(yù)先設(shè)置好容器，然后將解析后的內(nèi)容填充到容器中，這就導(dǎo)致了現(xiàn)在的流行框架在直接訪問(wèn)其源碼的時(shí)候，只有空的容器而沒(méi)有實(shí)際編譯的代碼，導(dǎo)致爬蟲(chóng)，搜索引擎無(wú)法完成檢索，從而無(wú)法識(shí)別網(wǎng)站的相關(guān)信息和內(nèi)容。

發(fā)明內(nèi)容

本發(fā)明為了解決現(xiàn)有技術(shù)中大部分前端數(shù)據(jù)模板渲染類的框架，在html中只有模板容器而沒(méi)有完整的dom結(jié)構(gòu)的問(wèn)題，提供一種前端Node.js自動(dòng)化正靜態(tài)方法。

為了解決上述問(wèn)題，本發(fā)明采用的技術(shù)方案如下所述：

一種Node.js前端正靜態(tài)化方法，包括如下步驟：根據(jù)url地址通過(guò)配置Nginx代理本地文件，或通過(guò)url地址向遠(yuǎn)程服務(wù)器發(fā)送請(qǐng)求下載靜態(tài)資源文件；將獲得的所述靜態(tài)資源文件經(jīng)過(guò)chrome v8內(nèi)核渲染，得到完整的dom結(jié)構(gòu)并暫存在內(nèi)存中；取出所述dom結(jié)構(gòu)中body部分的代碼在本地進(jìn)行靜態(tài)化渲染，得到靜態(tài)html內(nèi)容并將所述靜態(tài)html內(nèi)容寫(xiě)為緩存文件。

優(yōu)選地，所述步驟T2包括如下步驟：所述chrome v8內(nèi)核執(zhí)行所述靜態(tài)資源文件中的html代碼，所述html代碼會(huì)繼續(xù)下載當(dāng)前網(wǎng)址的js代碼和img資源；所述chrome v8內(nèi)核執(zhí)行所述js代碼，并去服務(wù)器上請(qǐng)求后端接口數(shù)據(jù)，將json格式的數(shù)據(jù)字段解析到對(duì)應(yīng)的html標(biāo)簽容器中，將后臺(tái)的數(shù)據(jù)渲染到了html中所述js代碼繼續(xù)執(zhí)行css代碼，將存在js代碼中的css代碼解析到style標(biāo)簽中，并插入到此時(shí)暫存在內(nèi)存中的dom結(jié)構(gòu)的head標(biāo)簽里；所有靜態(tài)資源文件被執(zhí)行完之后，所述chrome v8內(nèi)核模擬瀏覽器引擎將渲染完成的完整的dom結(jié)構(gòu)輸出。

優(yōu)選地，所述步驟T3包括如下步驟：對(duì)所述dom結(jié)構(gòu)內(nèi)容進(jìn)行解析，取出所述dom結(jié)構(gòu)中所述body部分的代碼片段；根據(jù)預(yù)設(shè)模板編譯得到一個(gè)header內(nèi)容，所述header內(nèi)容包括SEO信息的相關(guān)的title、meta標(biāo)簽以及當(dāng)前網(wǎng)址的框架js引用路徑；將所述header內(nèi)容和body代碼拼接，加上頁(yè)面資源js引用路徑并隨機(jī)生成一條32位hash字符串，拼接在資源js引用路徑的后面，即完成了靜態(tài)html內(nèi)容的渲染過(guò)程；并將所述html內(nèi)容寫(xiě)為緩存文件。

本發(fā)明的有益效果為：提供一種Node.js前端正靜態(tài)化方法，可以渲染出完整的dom結(jié)構(gòu)，并組成完整的html結(jié)構(gòu)，解決了目前大部分前端數(shù)據(jù)模板渲染類的框架在html中只有模板容器而沒(méi)有完整的dom結(jié)構(gòu)，影響到搜索引擎的內(nèi)容檢索的問(wèn)題，可以自動(dòng)化的生成完全的html結(jié)構(gòu)內(nèi)容，將首屏接口數(shù)據(jù)靜態(tài)化并保存到本地或服務(wù)器上，解決了前端js動(dòng)態(tài)渲染頁(yè)面的SEO收錄問(wèn)題，提升搜索引擎對(duì)于網(wǎng)頁(yè)的權(quán)重評(píng)估。

附圖說(shuō)明

圖1是本發(fā)明實(shí)施例1中Node.js前端正靜態(tài)化方法示意圖。

圖2是本發(fā)明實(shí)施例1中得到完整的dom結(jié)構(gòu)的方法示意圖。

圖3是是本發(fā)明實(shí)施例1中得到靜態(tài)html內(nèi)容的方法示意圖。

具體實(shí)施方式

下面結(jié)合附圖通過(guò)具體實(shí)施例對(duì)本發(fā)明進(jìn)行詳細(xì)的介紹，以使更好的理解本發(fā)明，但下述實(shí)施例并不限制本發(fā)明范圍。另外，需要說(shuō)明的是，下述實(shí)施例中所提供的圖示僅以示意方式說(shuō)明本發(fā)明的基本構(gòu)思，附圖中僅顯示與本發(fā)明中有關(guān)的組件而非按照實(shí)際實(shí)施時(shí)的組件數(shù)目、形狀及尺寸繪制，其實(shí)際實(shí)施時(shí)各組件的形狀、數(shù)量及比例可為一種隨意的改變，且其組件布局形態(tài)也可能更為復(fù)雜。

實(shí)施例1

如圖1所示，本實(shí)施例通過(guò)本發(fā)明所述的Node.js前端正靜態(tài)化方法，渲染出完整的dom結(jié)構(gòu)，并組成完整的html結(jié)構(gòu)，具體包括如下步驟：