[發明專利]一種網頁內容逆向渲染的方法及系統裝置

在審

• 申請號: 201810359119.6
• 申請日: 2018-04-20
• 公開（公告）號: CN108595096A
• 公開（公告）日: 2018-09-28
• 發明（設計）人: 何嵩
• 申請（專利權）人: 武漢楚鼎信息技術有限公司
• 主分類號: G06F3/0485
• 分類號: G06F3/0485;G06F17/30
• 代理公司: 暫無信息
• 代理人: 暫無信息

1.一種網頁內容逆向渲染的方法，其特征在于所述方法步驟如下：

步驟一，啟動瀏覽器，加載網頁；

步驟二，所述瀏覽器觸發 DOMContentLoaded 事件，獲取向上滾動預留高度值H3；

步驟三，所述瀏覽器通過 Javascript scrollTop 方法將滑條定位到距HTML文檔頂部H3距離的位置；

步驟四，所述瀏覽器通過 Javascript scroll 事件監聽模塊監聽向上滾動頁面操作，所述監聽模塊監聽到向上滾動頁面操作，獲取scrollTop值S1；

步驟五，所述瀏覽器獲取到所述scrollTop 值S1為0時，創建一個新的文檔對象模型DOM存儲至瀏覽器內存變量 D1 中；

步驟六，所述瀏覽器向服務器發起請求，所述瀏覽器獲取服務器發送的展示內容裝載到 所述DOM中；

步驟七，所述瀏覽器計算所述DOM的高度值H4存儲至內存變量 D2 中；

步驟八，所述瀏覽器獲取所述DOM插入到當前 HTML 文檔的頂部，同時將滑條位置向下移動H4距離；

步驟九，銷毀所述DOM和H4，繼續執行監聽事件，循環步驟三至步驟八 。

2.根據權利要求1所述一種網頁內容逆向渲染的方法，其特征在于，所述步驟2還包括：所述瀏覽器觸發 DOMContentLoaded 事件，計算網頁內容高度值H1，計算瀏覽器顯示頁面內容的區域viewport的高度值H2，當 H1 ＜ H2 + H3 時，將網頁的最小高度min-height設置為 H2 + H3。

3.根據權利要求1或2所述一種網頁內容逆向渲染的方法，其特征在于，步驟四還包括：若S1 ＞ 0時，創建一個計時器 T1；所述監聽模塊在所述計時器T1預設的監聽時間內連續監聽向上滾動頁面操作，直至所述S1值為0且監聽時間超過設定監聽時間，銷毀 T1。

4.根據權利要求1或3所述一種網頁內容逆向渲染的方法，其特征在于,步驟五還包括：所述瀏覽器獲取到所述scrollTop 值S1為0時，且所述計時器T1銷毀，所述監聽模塊再次監聽到向上滾動頁面操作，則創建一個新的文檔對象模型DOM存儲至瀏覽器內存變量 D1 中。

5.根據權利要求4所述一種網頁內容逆向渲染的方法，其特征在于,所述HTML文檔高度不足以支持向下移動H3，則使用 Javascript 增加HTML文檔高度以至此預留空間設置。

6.根據權利要求5所述一種網頁內容逆向渲染的方法，其特征在于,所述瀏覽器讀取本地 localstorage 中的記錄的歷史數據，所述瀏覽器獲取本地 localstorage 中的展示內容裝載到所述DOM中。

7.一種網頁內容逆向渲染的系統，其特征在于所述系統包括：

瀏覽器，所述瀏覽器用于加載頁面，計算所述H1-H4的高度，根據所述scrollTop 值判斷是否創建文檔對象模型DOM，調用內存變量D1、D2，加載服務器提供的展示內容至所述DOM，并插入到當前 HTML 文檔的頂部，控制滑條位置，銷毀所述DOM和H4，以及瀏覽器程序運行相關操作；

監聽模塊，監聽向上滾動頁面操作，并根據所監聽到的向上滾動頁面操作生成scrollTop值，供所述瀏覽器調用；

內存變量，用于存儲包括但不限于所述DOM和H4的數據；

服務器模塊，用于向瀏覽器提供所需的數據，包括但不限于云端服務器或/和本地localstorage。

8.一種網頁內容逆向渲染的系統裝置，其特征在于所述裝置包括：

瀏覽器，所述瀏覽器用于加載頁面，計算所述H1-H4的高度，根據所述scrollTop 值判斷是否創建文檔對象模型DOM，調用內存變量D1、D2，加載服務器提供的展示內容至所述DOM，并插入到當前 HTML 文檔的頂部，控制滑條位置，銷毀所述DOM和H4，以及瀏覽器程序運行相關操作；

監聽裝置，監聽向上滾動頁面操作，并根據所監聽到的向上滾動頁面操作生成scrollTop值，供所述瀏覽器調用；

內存裝置，用于存儲包括但不限于所述DOM和H4的數據；

服務器裝置，用于向瀏覽器提供所需的數據，包括但不限于云端服務器或/和本地localstorage；

還包括處理器、存儲器、總線，所述處理器同存儲器通過總線進行數據連接，所述存儲器內存有多條操作指令，所述處理器加載所述多條操作指令并執行，實現上述權利要求1-6所述的方法。