[發明專利]一種可與后端架構分離開發的瀏覽器前端架構系統

有效

• 申請號: 202010192629.6
• 申請日: 2020-03-18
• 公開（公告）號: CN111428168B
• 公開（公告）日: 2020-11-10
• 發明（設計）人: 金震;耿金帥;張憲濤
• 申請（專利權）人: 北京三維天地科技股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958;G06F3/0484
• 代理公司: 北京冠和權律師事務所 11399
• 代理人: 陳國軍

本發明提出了一種可與后端架構分離開發的瀏覽器前端架構系統，包括訪問層、HTML單頁面應用模塊、視圖模塊、webpack模塊打包器、控制模塊和模型層；用以解決現有瀏覽器每一頁面請求靜態資源耗時、引入js文件時變量沖突、頁面局部刷新時DOM元素渲染慢和性能差的問題，具有提高前端架構系統性能的特點。

技術領域

本發明涉及瀏覽器構建技術領域，特別涉及一種可與后端架構分離開發的瀏覽器前端架構系統。

背景技術

隨著互聯網應用越來越大、業務邏輯處理越來越復雜、用戶獲得良好體驗的期望越來越高，在這種情況下，如果還繼續維持以頁面為單位的開發方式，勢必會造成很多問題，例如每一頁面請求靜態資源耗時、引入js文件時變量沖突、頁面局部刷新時DOM元素渲染慢、性能差等問題，同時因為前端技術的極速發展，使得不同瀏覽器對ES的兼容性不一，這就導致了傳統的開發方式無法使用自ES6版本以后的許多新語法。

發明內容

本發明提供了一種可與后端架構分離開發的瀏覽器前端架構系統，用以解決現有瀏覽器每一頁面請求靜態資源耗時、引入js文件時變量沖突、頁面局部刷新時DOM元素渲染慢和性能差的問題，所采取的技術方案如下：

一種可與后端架構分離開發的瀏覽器前端架構系統，所述瀏覽器前端架構系統包括：

訪問層，用于執行對瀏覽器的訪問操作；

HTML單頁面應用模塊，用于利用單頁面應用的方式對瀏覽器所展示的業務頁面進行開發，構建業務頁面的應用內容；

視圖模塊，用于通過資源預加載、圖片格式轉換以及組件加載的方式將所述HTML單頁面應用模塊構建的業務頁面應用內容展示出來，并實現人與業務頁面交互功能；

webpack模塊打包器，用于對視圖模塊中的預加載資源進行分析，找到預加載資源中的JavaScript模塊，并將JavaScript模塊轉換和打包為與使用的瀏覽器匹配的格式，同時將前端工程打包壓縮形成靜態資源；

控制模塊，用于當用戶訪問靜態資源時，接收用戶請求并針對用戶請求調用模型層中的模型進行數據處理，將處理好的數據發送至視圖模塊，將用戶訪問的靜態資源展示出來；其中，所述模型層為由公共方法、組件解析器、工具類和頁面緩存機制形成的模型庫。

進一步地，所述瀏覽器前端架構系統還包括白屏情況確定模塊和白屏信息反饋模塊；

所述白屏情況確定模塊，用于用戶啟動瀏覽器進行網頁訪問時，根據白屏期間的鼠標動、靜狀態來監控瀏覽器當前頁面被訪問時的白屏情況；

所述白屏信息反饋模塊，用于白屏情況確定模塊在確認白屏時間超時后，將白屏時間超時信息反饋給視圖模塊。

進一步地，所述視圖模塊包括：

資源預加載子模塊，用于瀏覽器首屏被訪問之前，將瀏覽器首屏的頁面資源提前進行加載；

圖片轉換子模塊，用于對資源預加載過程中出現的圖片資源進行格式轉換，將資源中的圖片轉換為SVG格式圖片；

組件加載子模塊，用于在資源預加載的同時，對瀏覽器首屏的網頁組件進行加載。

進一步地，所述視圖模塊還包括：

時間信息接收子模塊，用于接收瀏覽器頁面展示過程中白屏信息反饋模塊發送的白屏時間超時的時間檢測信息；

網絡狀態檢測子模塊，用于在時間信息接收子模塊接收到時間檢測信息后，進行網絡狀態檢測，如果首屏訪問當前存在網絡故障問題，則在首屏頁面上顯示網絡故障狀態；如果首屏訪問當前無網絡故障問題，則向資源重置子模塊發出資源重置指令；

資源重置子模塊，用于在接收到網絡狀態檢測子模塊和白屏情況確定模塊發來的資源重置指令后，重新進行網頁的資源加載；