[發明專利]一種對WEB前端網頁進行性能優化的方法、裝置和存儲介質

在審

• 申請號: 202111113100.1
• 申請日: 2021-09-23
• 公開（公告）號: CN113836456A
• 公開（公告）日: 2021-12-24
• 發明（設計）人: 覃樓;陳凱;李貴薪;周思成;謝帆;周萬力
• 申請（專利權）人: 桂林長海發展有限責任公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 北京輕創知識產權代理有限公司 11212
• 代理人: 厲洋洋

1.一種對WEB前端網頁進行性能優化的方法，其特征在于，包括：

對原始WEB前端網頁依次采用HTML優化法、CSS優化法和JavaScript優化法進行處理，得到第一優化網頁；

對所述第一優化網頁依次采用網頁圖片處理技術和網頁內容優化法進行處理，得到第二優化網頁；

獲取并對所述第二優化網頁中的代碼進行合并與壓縮，根據合并與壓縮的代碼得到最終優化網頁。

2.根據權利要求1所述的一種對WEB前端網頁進行性能優化的方法，其特征在于，所述對原始WEB前端網頁依次采用HTML優化法、CSS優化法和JavaScript優化法進行處理，得到第一優化網頁，具體包括：

利用所述HTML優化法對所述原始WEB前端網頁的空白字符進行刪除，并將所述原始WEB前端網頁的絕對路徑替換為相對路徑，并將所述原始WEB前端網頁的文字用標簽進行表示以及將所述原始WEB前端網頁中的iframe標簽進行替換的方式對所述原始WEB前端網頁進行優化，得到第一部分優化網頁；

利用所述CSS優化法將所述第一部分優化網頁中的CSS文件放入head標簽，并對所述CSS文件中存在的相同樣式進行提取并精簡，得到第二部分優化網頁；

利用所述JavaScript優化法對所述第二部分優化網頁進行優化處理，得到所述第一優化網頁。

3.根據權利要求1或2所述的一種對WEB前端網頁進行性能優化的方法，其特征在于，所述網頁圖片處理技術包括CSS Sprites技術和圖片懶加載技術，則所述對所述第一優化網頁依次采用網頁圖片處理技術和網頁內容優化法進行處理，得到第二優化網頁，具體包括：

利用所述CSS Sprites技術對所述第一優化網頁的原始圖片進行整合，并對整合得到的大圖中的各個所述原始圖片進行定位并加載，得到第一圖片處理網頁；

利用所述圖片懶加載技術將所述第一圖片處理網頁的圖片鏈接設置為空白，直至待加載圖片進入可視窗口時，將所述待加載圖片在所述第一圖片處理網頁中顯示，并得到所述第二圖片處理網頁；

利用所述網頁內容優化法對所述第二圖片處理網頁的HTML鏈接增加預加載功能，并將所述第二圖片處理網頁的內容進行緩存處理，得到所述第二優化網頁。

4.一種對WEB前端網頁進行性能優化的裝置，其特征在于，包括：第一優化模塊，第二優化模塊，處理模塊；

所述第一優化模塊用于：對原始WEB前端網頁依次采用HTML優化法、CSS優化法和JavaScript優化法進行處理，得到第一優化網頁；

所述第二優化模塊用于：對所述第一優化網頁依次采用網頁圖片處理技術和網頁內容優化法進行處理，得到第二優化網頁；

所述處理模塊用于：獲取并對所述第二優化網頁中的代碼進行合并與壓縮，根據合并與壓縮的代碼得到最終優化網頁。

5.根據權利要求4所述的一種對WEB前端網頁進行性能優化的裝置，其特征在于，所述第一優化模塊具體用于：

利用所述HTML優化法對所述原始WEB前端網頁的空白字符進行刪除，并將所述原始WEB前端網頁的絕對路徑替換為相對路徑，并將所述原始WEB前端網頁的文字用標簽進行表示以及將所述原始WEB前端網頁中的iframe標簽進行替換的方式對所述原始WEB前端網頁進行優化，得到第一部分優化網頁；

利用所述CSS優化法將所述第一部分優化網頁中的CSS文件放入head標簽，并對所述CSS文件中存在的相同樣式進行提取并精簡，得到第二部分優化網頁；

利用所述JavaScript優化法對所述第二部分優化網頁進行優化處理，得到所述第一優化網頁。