[發(fā)明專利]一種網(wǎng)頁渲染方法及相關(guān)設(shè)備

在審

• 申請?zhí)枺?/td>: 201710042896.3
• 申請日: 2017-01-20
• 公開（公告）號: CN108334517A
• 公開（公告）日: 2018-07-27
• 發(fā)明（設(shè)計）人: 代亞亞;胡鋒;張濤;趙以權(quán)
• 申請（專利權(quán)）人: 華為技術(shù)有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 廣州三環(huán)專利商標(biāo)代理有限公司 44202
• 代理人: 郝傳鑫;熊永強

本發(fā)明實施例公開了一種網(wǎng)頁渲染方法及相關(guān)設(shè)備。其中，該方法包括：服務(wù)器在接收到客戶端的頁面加載請求后，可以獲取頁面加載請求匹配的初始頁面內(nèi)容，返回給客戶端，初始頁面內(nèi)容包括前端框架和至少一個DOM，客戶端可以基于前端框架加載至少一個DOM，以及基于每個DOM的特征屬性獲取與之匹配的頁面模板和頁面元數(shù)據(jù)，從而基于頁面模板將頁面元數(shù)據(jù)進行渲染，得到每個DOM的HTML片段，最后將所有HTML片段組成HTML頁面，并展示HTML頁面。本發(fā)明實施例中，由客戶端進行頁面渲染，從而能夠在高并發(fā)場景下，降低服務(wù)器硬件部署成本，減輕服務(wù)器壓力，減少服務(wù)器內(nèi)存開銷，提高頁面渲染效率以及系統(tǒng)性能。

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

本發(fā)明涉及計算機技術(shù)領(lǐng)域，具體涉及一種網(wǎng)頁渲染方法及相關(guān)設(shè)備。

背景技術(shù)

隨著前端技術(shù)的不斷發(fā)展，網(wǎng)頁已從單純的信息展示發(fā)展為用戶可參與網(wǎng)頁內(nèi)容的生成，即，用戶可進行網(wǎng)頁定制。通常情況下，用戶在進行網(wǎng)頁定制時，修改后的頁面元數(shù)據(jù)一般會保存到數(shù)據(jù)庫中，在進行頁面渲染時，頁面元數(shù)據(jù)在服務(wù)器解析編譯，并渲染成完整的超文本標(biāo)記語言(Hyper Text Mark-up Language，HTML)頁面，從而返回給瀏覽器客戶端展示。如果大量頁面同時請求渲染，服務(wù)器需要同時對大量的元數(shù)據(jù)進行轉(zhuǎn)換，不僅會降低渲染效率，還會增加服務(wù)器的內(nèi)存開銷。

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

本發(fā)明實施例公開了一種網(wǎng)頁渲染方法及相關(guān)設(shè)備，可以在高并發(fā)場景下提高網(wǎng)頁渲染效率，減少服務(wù)器的內(nèi)存開銷。

本發(fā)明實施例第一方面公開了一種網(wǎng)頁渲染方法，該方法可以包括：

客戶端在向服務(wù)器發(fā)送頁面加載請求后，可接收服務(wù)器基于該頁面加載請求返回的初始頁面內(nèi)容，其中，該初始頁面內(nèi)容包括前端框架，例如UEE框架，以及至少一個文檔對象模型(Document Object Model，DOM)?？蛻舳丝梢曰谇岸丝蚣芗虞d該至少一個DOM，以及基于每個DOM的特征屬性獲取與該每個DOM匹配的頁面模板和頁面元數(shù)據(jù)，從而基于該每個DOM匹配的頁面模板將該每個DOM匹配的頁面元數(shù)據(jù)進行渲染，得到該每個DOM的HTML片段，并將至少一個DOM的HTML片段組成HTML頁面，并展示該HTML頁面。

由客戶端進行頁面渲染，從而能夠在高并發(fā)場景下，降低服務(wù)器硬件部署成本，減輕服務(wù)器壓力，減少服務(wù)器內(nèi)存開銷，提高頁面渲染效率以及系統(tǒng)性能。

可選的，客戶端基于前端框架加載至少一個DOM的具體方式可以為：

客戶端將至少一個DOM加載至前端框架，并確定目標(biāo)DOM，其中，目標(biāo)DOM為前端框架從至少一個DOM中識別出的DOM；

那么客戶端基于每個DOM的特征屬性獲取與每個DOM匹配的頁面模板和頁面元數(shù)據(jù)的具體方式可以為：

針對目標(biāo)DOM中的每個DOM，客戶端基于該每個DOM的特征屬性獲取與該每個DOM匹配的頁面模板和頁面元數(shù)據(jù)。

可選的，客戶端向服務(wù)器發(fā)送頁面加載請求后，接收服務(wù)器基于該頁面加載請求返回的初始頁面內(nèi)容之前，該方法還可以包括：

客戶端在接收到頁面定制請求時，展示定制界面，接收用戶在定制界面中的配置操作，得到由配置操作產(chǎn)生的頁面元數(shù)據(jù)，從而建立起頁面元數(shù)據(jù)與DOM的第一屬性的關(guān)聯(lián)關(guān)系，并將該頁面元數(shù)據(jù)發(fā)送至服務(wù)器，以便服務(wù)器保存該頁面元數(shù)據(jù)。

客戶端提供可視化的定制界面，能夠靈活高效的實現(xiàn)頁面配置，讓不懂技術(shù)的用戶也能實現(xiàn)產(chǎn)品定制，降低定制門檻，提升定制效果，從而能夠在一定程度上降低產(chǎn)品二次定制開發(fā)和維護的成本。

可選的，該特征屬性具體可包括第一屬性和第二屬性，第一屬性具體可為元(meta)屬性，第二屬性具體可為名稱name屬性，或者其他屬性，如component-name屬性、meta-id屬性等，本發(fā)明實施例不做限定。