[發明專利]網頁渲染方法及裝置

在審

• 申請號: 201911330379.1
• 申請日: 2019-12-20
• 公開（公告）號: CN111143732A
• 公開（公告）日: 2020-05-12
• 發明（設計）人: 唐莉;錢學敏
• 申請（專利權）人: 貝殼技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958;G06F40/151;G06F16/951
• 代理公司: 北京潤平知識產權代理有限公司 11283
• 代理人: 肖冰濱;王曉曉

本發明涉及互聯網技術領域，公開了一種網頁渲染方法及裝置，所述方法包括：創建文檔片段；獲取頁面加載請求的文本數據，將所述文本數據轉換為文件對象模型DOM；將所述DOM的節點存儲到所述文檔片段；將存儲有所述DOM節點的所述文檔片段渲染到頁面。本發明的網頁渲染方法，適用于后臺服務器返回的數據為爬蟲數據(富文本字符串)的情況，實現在頁面渲染時對爬蟲數據懶加載，而且文本數據的轉換在客戶端內存中操作(內存中操作DOM)，性能消耗小。

技術領域

本發明涉及互聯網技術領域，具體而言，涉及一種網頁渲染方法、一種網頁渲染裝置及一種存儲介質。

背景技術

網頁渲染就是客戶端瀏覽器將HTML(Hyper Text Markup Language，超文本標記語言)代碼根據預定義規則顯示在瀏覽器窗口中的過程。客戶端瀏覽器在渲染HTML頁面時，需要從服務器獲取用于進行頁面渲染的各種資源，通過加載獲取到的資源從而實現HTML頁面渲染。

網頁一般包含文字和圖片，當用戶向后臺服務器發送加載網頁的請求后，將接收后臺服務器發送的文字和圖片。如果網頁的圖片同時加載，存在用戶查看網頁其中一個位置，對應位置的圖片卻未加載的問題。圖片懶加載是一種圖片的加載方式。具體的，如果網頁包含數以百計的圖片，當用戶訪問這些頁面(網頁)時，等待的時間特別長，也就是說，在接收到用戶的瀏覽請求后，同時加載所有的圖片，導致圖片加載的時間過長。而使用圖片懶加載，便可以較好的解決這個問題。在用戶訪問頁面時，先加載幾頁的圖片并顯示，然后監聽用戶對網頁的操作，當用戶瀏覽到后續的頁面時再加載后續頁面的圖片。如果用戶僅僅瀏覽網頁的一部分，那么后續的圖片便不需要加載，以減輕后臺服務器的壓力，極大地提升用戶體驗，保障交互的流暢性。

在網頁渲染懶加載的過程中，若后臺服務器返回的數據為爬蟲數據(即客戶端得到的是一堆富文本字符串)，由于無法定義爬蟲數據的數據結構，此時客戶端無法直接對爬蟲數據實現懶加載。

發明內容

本發明的目的是提供一種網頁渲染方法及裝置，以實現在頁面渲染時對爬蟲數據懶加載。

為了實現上述目的，本發明第一方面提供一種網頁渲染方法，所述方法包括：

創建文檔片段；

獲取頁面加載請求的文本數據，將所述文本數據轉換為文件對象模型DOM；

將所述DOM的節點存儲到所述文檔片段；

將存儲有所述DOM節點的所述文檔片段渲染到頁面。

進一步地，在將所述DOM的節點存儲到所述文檔片段之前，所述方法還包括：

判斷所述DOM的節點是否為圖片；

若判斷所述DOM的節點為圖片，則將所述圖片替換為預設圖片。

進一步地，所述將所述圖片替換為預設圖片，包括：

將所述圖片的屬性信息替換為所述預設圖片的資源路徑。

進一步地，所述將存儲有所述DOM節點的所述文檔片段渲染到頁面，包括：

獲取所述頁面的目標節點，判斷所述目標節點是否完成渲染；

若所述目標節點已完成渲染，則將所述目標節點對應的圖片的屬性信息替換為所述圖片的原始資源路徑。

進一步地，在判斷所述DOM的節點是否為圖片之前，所述方法還包括：

將所述DOM的類數組轉換為數組，并遍歷所述數組。

進一步地，所述獲取頁面加載請求的文本數據，將所述文本數據轉換為文件對象模型DOM，包括：