[發(fā)明專利]一種優(yōu)化WebApp內(nèi)存和節(jié)點的方法

在審

• 申請?zhí)枺?/td>: 202010104446.4
• 申請日: 2020-02-20
• 公開（公告）號: CN111258682A
• 公開（公告）日: 2020-06-09
• 發(fā)明（設(shè)計）人: 曾毅;劉姍姍;周偉;喻雅倩;張欽云
• 申請（專利權(quán)）人: 四川長虹電器股份有限公司
• 主分類號: G06F9/445
• 分類號: G06F9/445
• 代理公司: 四川省成都市天策商標專利事務(wù)所 51213
• 代理人: 張秀敏

本發(fā)明公開了一種優(yōu)化WebApp內(nèi)存和節(jié)點的方法，包括：將頁面分為高度相等的上方區(qū)域、可視區(qū)域和下方區(qū)域并通過組件來渲染；初次加載頁面時，向服務(wù)器請求n個組件的內(nèi)容，獲取到首頁數(shù)據(jù)時進行緩存；負責頁面渲染管理的實例對象依次向頁面中添加節(jié)點，當用戶滾動操作的距離超過一個屏幕顯示區(qū)域的高度時，負責頁面渲染的實例類動態(tài)地添加到dom樹中；當首頁數(shù)據(jù)渲染完成，負責頁面數(shù)據(jù)管理的實例對象會向服務(wù)器請求，并將請求的數(shù)據(jù)連接到首頁數(shù)據(jù)的后方/前方，負責頁面渲染管理的實例對象對添加的數(shù)據(jù)依次進行渲染。本發(fā)明解決了web頁面dom節(jié)點多占用內(nèi)存以及顯存過大問題。

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

本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，具體的說，是一種優(yōu)化WebApp內(nèi)存和節(jié)點的方法。

背景技術(shù)

web前端技術(shù)發(fā)展日新月異，前端模塊化和組件化也越來越被人們熟知，其中模塊化經(jīng)歷了從全局變量到閉包再到后來的amd、cmd、commonJs、es6標準的模塊導出與模塊導入，同時也誕生了許多的構(gòu)建工具如webpack、gulp、fis等，這些工具的誕生也使得前端開發(fā)更加標準化與工程化，提升了前端開發(fā)的效率與團隊協(xié)作的能力。在web中，如果想要為用戶展示更多內(nèi)容，可以有兩種方法，一是可以采用分頁展示，用戶想要更多的內(nèi)容是通過用戶主動點擊上一頁、下一頁或者要跳轉(zhuǎn)的頁數(shù)，這種方式可以節(jié)省內(nèi)存提高性能，但是這種用戶主動觸發(fā)或者選擇的方式在用戶體驗上存在不足，在移動設(shè)備或者智能電視上不能做到沉浸式體驗；二是可以通過瀑布流的方式，用戶在向下滾動的時候主動的去請求數(shù)據(jù)，展示更多內(nèi)容，這種瀑布流的形式能有效地提升用戶體驗，但是存在web頁面dom節(jié)點多、占用內(nèi)存與顯存過大的問題。

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

本發(fā)明的目的在于提供一種優(yōu)化WebApp內(nèi)存和節(jié)點的方法，用于解決現(xiàn)有技術(shù)中采用瀑布流方式展示頁面內(nèi)容時存在web頁面dom節(jié)點多、占用內(nèi)存與顯存過大的問題。

本發(fā)明通過下述技術(shù)方案解決上述問題：

一種優(yōu)化WebApp內(nèi)存和節(jié)點的方法，包括：

步驟S1：將頁面分為高度相等的上方區(qū)域、可視區(qū)域和下方區(qū)域，即將頁面中整體渲染為可視區(qū)域高度的三倍，頁面又通過多個組件來渲染，組件的高度根據(jù)云端數(shù)據(jù)設(shè)置，組件的寬度為頁面寬度，通過一行一行的組件來堆砌頁面顯示內(nèi)容；

步驟S2：初次加載頁面時，向服務(wù)器請求n個組件的內(nèi)容，組件的內(nèi)容包括組件的高度、組件標識符以及需要向用戶展示的數(shù)據(jù)內(nèi)容；

步驟S3：負責頁面數(shù)據(jù)管理的實例對象獲取到首頁數(shù)據(jù)時，該實例會將數(shù)據(jù)保存在該實例的某個屬性中并進行緩存；

步驟S4：負責頁面渲染管理的實例對象根據(jù)這些數(shù)據(jù)，依次向頁面中添加高度為云端獲取到的組件高度數(shù)據(jù)，寬度為頁面寬度的節(jié)點，并且通過對應(yīng)組件標識符數(shù)據(jù)字段在組件對象管理的實例對象方法中找到該組件的實例化對象，并使用該實例化對象的渲染方法將展示內(nèi)容的dom節(jié)點添加到對應(yīng)的父節(jié)點中，依次添加的組件的高度不能超過可視區(qū)域的2倍，超過部分則不添加到頁面dom樹中；通過初始化加載后頁面中渲染區(qū)域則為屏幕顯示區(qū)域和屏幕顯示區(qū)域下方/上方超出屏幕顯示區(qū)域1倍屏幕高度的區(qū)域；

步驟S5：當用戶操作頁面向上或下任意方向滾動時，屏幕顯示區(qū)域顯示的內(nèi)容會向屏幕上方或下方滾動，當向上或下滾動的距離超過一個屏幕的高度時，負責頁面渲染的實例類會將超過部分組件的父節(jié)點從dom樹中移除，這時設(shè)備就會釋放掉該部分所占用的資源。屏幕顯示區(qū)域下方或上方的內(nèi)容則會向上或下移動至屏幕顯示區(qū)域，并且將之前沒有渲染的數(shù)據(jù)根據(jù)滾動距離依次添加到dom樹中；

步驟S6：當首頁數(shù)據(jù)中沒有渲染的數(shù)據(jù)都添加到頁面中時，這時負責頁面數(shù)據(jù)的實例對象會第二次向服務(wù)器請求，并將請求到的數(shù)據(jù)連接到首頁數(shù)據(jù)的后方/前方，然后負責頁面渲染的對象就會根據(jù)添加的數(shù)據(jù)依次渲染。