[發明專利]一種網站移動端速度優化方法

在審

• 申請號: 202011094105.X
• 申請日: 2020-10-14
• 公開（公告）號: CN112163175A
• 公開（公告）日: 2021-01-01
• 發明（設計）人: 易永杰;胡成鋼
• 申請（專利權）人: 南京焦點領動云計算技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 南京瑞弘專利商標事務所(普通合伙) 32249
• 代理人: 陳建和

一種網站移動端速度優化方法，基于組件和區塊來搭建的SaaS提供商平臺服務器并在網站發布，1)計算出移動端首屏區域內的區塊組件，在首次加載的時候，只需要展示出所計算出的區塊和組件，并對其加載，在識別或計算完畢后，對不在首屏區域內的組件區塊，進行懶加載，當滾動到不在首屏區域內的組件區塊的位置時，再對其進行js，和css文件的加載；2)對其區塊組件開發相應的移動端組件和區塊，進行dom結構、js和css的進行精簡，在保證展示效果的同時進行代碼的“瘦身”；提取首屏區域內區塊組件的必須的css樣式，進行css樣式的內聯用于移動端展示。

技術領域

本發明屬于計算機數據處理的領域，具體涉及一種基于網站移動端速度優化解決方案。

背景技術

SaaS提供商(如本申請人的領動云營銷平臺)是一款基于Saas模式的云建站工具(SaaS提供商為企業搭建信息化所需要的所有網絡基礎設施及軟件、硬件運作平臺，并負責所有前期的實施、后期的維護等一系列服務，企業無需購買軟硬件、建設機房、招聘IT人員，即可通過互聯網使用信息系統)，SaaS平臺上有很多積木組件和區塊，客戶可以通過一個或多個組件組合成網頁的一行，或者以區塊作為一行，客戶頁面由這些行組合成，這樣客戶就能夠很輕松的通過拖拽組件和區塊生成自己想要的頁面。但是隨著SaaS提供商業務的快速發展，頁面內容越加豐富，組件和區塊數量也越來越多，從而導致頁面移動端的加載速度變緩，文件加載過多：

1)SaaS提供商的組件和區塊都可以看成一個單獨的小頁面，都擁有相互獨立的樣式文件，dom元素和js代碼，頁面上的內容越多，相關的代碼也越多，從而導致加載速度變緩。

2)移動端，所有的js文件和樣式文件在一開始都是加載的，從而導致請求數過多，google頁面速度測試，其中有一項檢測項目就是頁面中的加載資源數目，請求數過多，導致頁面分數很低。

3)移動端的展示是pc端的代碼通過，css的響應式方法，來適應移動端的，但是pc端的dom結構(DOM是網頁中的用來表示文檔中對象的標準模型,通過JavaScript可以對網頁中的所有DOM對象進行操作)不太適合移動端的展示習慣，展示的效果不是很好。

4)通常的習慣是對css文件(css文件是指css代碼放到一個單獨的文件里，并以css擴展名命名如yangshi.css，這樣就是css文件)用link標簽進行引入，但是當頁面內容較多的時候，雖進行了懶加載，只加載首屏區域的css，但是相對的樣式文件也較大，用外部樣式加載還是要一定的時間。

發明內容

本發明目的是，基于現有技術的上述情況，本發明目的是，需要提出一個移動端的優化方案，這種方案可以滿足以下的需求：1)減少頁面上的請求個數；2)提升頁面的加載速度；3)移動端的區塊展示更加適合移動端；4)google頁面測速分數提升。

本發明技術方案是，一種網站移動端速度優化方法，基于組件和區塊來搭建的SaaS提供商平臺于服務器并在網站發布，用于服務于移動端，1)計算出移動端首屏區域內的區塊和組件，這樣在首次加載的時候，只需要展示出所計算出的區塊和組件，并對其加載，在識別或計算完畢后，對不在首屏區域內的組件區塊，進行懶加載，當滾動到不在首屏區域內的組件區塊的位置時，再對其進行js，和css文件的加載；

2)當面對依賴太多、移動端展示效果較差的區塊組件，對其區塊組件開發相應的移動端組件和區塊，進行dom結構、js和css的進行精簡，在保證展示效果的同時進行代碼的“瘦身”；

在此之上，提取首屏區域內區塊組件的必須的css樣式，進行css樣式的內聯(用于移動端展示)。從而提升了頁面渲染的速度，進一步減少樣式文件的加載，從而提升速度。