[發(fā)明專利]一種實(shí)現(xiàn)網(wǎng)站接口化渲染的方法與裝置

有效

• 申請(qǐng)?zhí)枺?/td>: 201611131599.8
• 申請(qǐng)日: 2016-12-09
• 公開（公告）號(hào): CN106777055B
• 公開（公告）日: 2021-01-01
• 發(fā)明（設(shè)計(jì)）人: 杜偉
• 申請(qǐng)（專利權(quán)）人: 武漢斗魚網(wǎng)絡(luò)科技有限公司
• 主分類號(hào): G06F16/958
• 分類號(hào): G06F16/958
• 代理公司: 湖北武漢永嘉專利代理有限公司 42102
• 代理人: 許美紅

本發(fā)明提供了一種實(shí)現(xiàn)網(wǎng)站接口化渲染的方法與裝置，該方法包括以下步驟：1)瀏覽器接收服務(wù)器響應(yīng)的HTML內(nèi)容，加載網(wǎng)站頁面首屏完畢后，由前端腳本獲取頁面中待接口化渲染的區(qū)塊；2)前端腳本找到了頁面中待接口化渲染的區(qū)塊后，將這些區(qū)塊緩存起來，同去本地配置文件中找到對(duì)應(yīng)的接口地址；3)根據(jù)緩存的區(qū)塊和區(qū)塊對(duì)應(yīng)的接口，前端腳本將會(huì)分批請(qǐng)求各個(gè)區(qū)塊所對(duì)應(yīng)的接口地址，從服務(wù)器上獲取各個(gè)區(qū)塊的HTML內(nèi)容；完成渲染；4)當(dāng)所有待接口化渲染的區(qū)塊完成渲染或被刪除處理后，結(jié)束。本發(fā)明方法使用接口進(jìn)行渲染，利于網(wǎng)站頁面的首屏渲染加速和降低網(wǎng)絡(luò)帶寬消耗，還能便于網(wǎng)站的SEO擴(kuò)展。

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

本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)，尤其涉及一種實(shí)現(xiàn)網(wǎng)站接口化渲染的方法與裝置。

背景技術(shù)

目前互聯(lián)網(wǎng)彈幕直播網(wǎng)站的頁面渲染邏輯一般都是：客戶端瀏覽器發(fā)送請(qǐng)求給網(wǎng)站服務(wù)器，服務(wù)器收到請(qǐng)求并完成頁面內(nèi)容渲染，然后服務(wù)器響應(yīng)內(nèi)容給客戶端瀏覽器，瀏覽器再解析服務(wù)器響應(yīng)的內(nèi)容并渲染展示給用戶。當(dāng)頁面內(nèi)容越來越多，服務(wù)器上渲染頁面內(nèi)容的時(shí)間會(huì)增長，同時(shí)服務(wù)器與客戶端瀏覽器之間的數(shù)據(jù)傳輸時(shí)間會(huì)變長，不僅影響用戶體驗(yàn)，而且極大的增加的網(wǎng)站的帶寬消耗。

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

本發(fā)明要解決的技術(shù)問題在于針對(duì)現(xiàn)有技術(shù)中的缺陷，提供一種實(shí)現(xiàn)網(wǎng)站接口化渲染的方法與裝置。

本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案是：一種實(shí)現(xiàn)網(wǎng)站接口化渲染的方法，包括以下步驟：

1)瀏覽器接收服務(wù)器響應(yīng)的HTML內(nèi)容，加載網(wǎng)站頁面首屏完畢后(即window.onload事件)，由前端腳本獲取頁面中待接口化渲染的區(qū)塊；

所述頁面中待接口化渲染的區(qū)塊是前端預(yù)先定義好的有data-async-render屬性的HTML DIV元素；

前端腳本通過尋找當(dāng)前網(wǎng)頁中所有包含data-async-render屬性的DIV元素，以此來收集當(dāng)前網(wǎng)頁中待接口渲染的容器；如果前端腳本沒有找到了待接口化渲染的區(qū)塊，則終止執(zhí)行，否則進(jìn)入步驟2)

2)前端腳本找到了頁面中待接口化渲染的區(qū)塊后，將這些區(qū)塊緩存起來，同時(shí)根據(jù)區(qū)塊的data-async-render屬性的值，去本地配置文件中找到對(duì)應(yīng)的接口地址，所述本地配置文件是前端提前定義好的js文件，在頁面初始化的時(shí)候會(huì)被頁面加載；

3)根據(jù)緩存的區(qū)塊和區(qū)塊對(duì)應(yīng)的接口，前端腳本將會(huì)分批請(qǐng)求各個(gè)區(qū)塊所對(duì)應(yīng)的接口地址，從服務(wù)器上獲取各個(gè)區(qū)塊的HTML內(nèi)容；

如果接口返回正確，前端腳本將從服務(wù)器上獲得的各個(gè)區(qū)塊的HTML內(nèi)容插入到對(duì)應(yīng)的各個(gè)區(qū)塊中去，瀏覽器會(huì)自動(dòng)完成渲染；

反之如果請(qǐng)求失敗，前端腳本將會(huì)從頁面中和緩存中刪除對(duì)應(yīng)的區(qū)塊；

4)當(dāng)所有待接口化渲染的區(qū)塊完成渲染或被刪除處理后，結(jié)束。

按上述方案，所述步驟1)DIV元素中data-async-render屬性，其屬性的值是唯一的，用于區(qū)分其它的區(qū)塊。

按上述方案，所述步驟3)中分批請(qǐng)求區(qū)塊所對(duì)應(yīng)的接口地址時(shí)，每批請(qǐng)求一個(gè)區(qū)塊所對(duì)應(yīng)的接口地址。

一種實(shí)現(xiàn)網(wǎng)站接口化渲染的裝置，包括：

獲取模塊，用于獲取網(wǎng)頁頁面中待接口化渲染的區(qū)塊；具體如下：瀏覽器接收服務(wù)器響應(yīng)的HTML內(nèi)容，加載網(wǎng)站頁面首屏完畢后，由前端腳本獲取頁面中待接口化渲染的區(qū)塊；

所述頁面中待接口化渲染的區(qū)塊是前端預(yù)先定義好的有data-async-render屬性的HTML DIV元素；

前端腳本通過尋找當(dāng)前網(wǎng)頁中所有包含data-async-render屬性的DIV元素，以此來收集當(dāng)前網(wǎng)頁中待接口渲染的容器；