[發(fā)明專利]一種網(wǎng)站移動端速度優(yōu)化方法

在審

• 申請?zhí)枺?/td>: 202011094105.X
• 申請日: 2020-10-14
• 公開（公告）號: CN112163175A
• 公開（公告）日: 2021-01-01
• 發(fā)明（設(shè)計）人: 易永杰;胡成鋼
• 申請（專利權(quán)）人: 南京焦點領(lǐng)動云計算技術(shù)有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 南京瑞弘專利商標(biāo)事務(wù)所(普通合伙) 32249
• 代理人: 陳建和

1.一種網(wǎng)站移動端速度優(yōu)化方法，其特征是，基于組件和區(qū)塊來搭建的SaaS提供商平臺服務(wù)器并在網(wǎng)站發(fā)布，1)計算出移動端首屏區(qū)域內(nèi)的區(qū)塊組件，在首次加載的時候，只需要展示出所計算出的區(qū)塊和組件，并對其加載，在識別或計算完畢后，對不在首屏區(qū)域內(nèi)的組件區(qū)塊，進(jìn)行懶加載，當(dāng)滾動到不在首屏區(qū)域內(nèi)的組件區(qū)塊的位置時，再對其進(jìn)行js，和css文件的加載；

2)當(dāng)面對依賴太多、移動端展示效果較差的區(qū)塊組件，對其區(qū)塊組件開發(fā)相應(yīng)的移動端組件和區(qū)塊，進(jìn)行dom結(jié)構(gòu)、js和css的進(jìn)行精簡，在保證展示效果的同時進(jìn)行代碼的“瘦身”；

提取首屏區(qū)域內(nèi)區(qū)塊組件的必須的css樣式，進(jìn)行css樣式的內(nèi)聯(lián)用于移動端展示。

2.根據(jù)權(quán)利要求1所述的網(wǎng)站移動端速度優(yōu)化方法，其特征是，移動端首屏區(qū)域，區(qū)塊組件識別選擇下述兩種方案之一：

第一種：在移動端首屏區(qū)域頁面發(fā)布后，往數(shù)據(jù)庫中存儲一條數(shù)據(jù)，用一個隊列程序，取出該數(shù)據(jù)庫中的數(shù)據(jù)，在服務(wù)器后臺，用無界面瀏覽器的形式，計算出首屏區(qū)域內(nèi)的區(qū)塊和組件，存儲在數(shù)據(jù)庫中，在頁面渲染時，對此相關(guān)的區(qū)塊和組件進(jìn)行加載渲染；

第二種：在移動端首屏區(qū)域頁面編輯時，提供一個按鈕提示，能點擊按鈕，在當(dāng)前移動端首屏區(qū)域頁面計算出相應(yīng)的組件和區(qū)塊；在離開頁面，或者發(fā)布網(wǎng)站的時候，如未手動計算，自動計算出當(dāng)前頁面的組件區(qū)塊。通過主動和被動的方式，把計算出的數(shù)據(jù)存儲在數(shù)據(jù)庫中，在頁面渲染時，對相關(guān)的區(qū)塊和組件進(jìn)行加載渲染。

3.根據(jù)權(quán)利要求1所述的網(wǎng)站移動端速度優(yōu)化方法，其特征是，識別內(nèi)容外的區(qū)塊組件懶加載：當(dāng)客戶使用訪問移動端時，會將之前計算的首屏內(nèi)容區(qū)塊組件的相關(guān)的js代碼文件，css樣式文件加載；而其余的內(nèi)容則不進(jìn)行加載，當(dāng)且只當(dāng)用戶滾動到該區(qū)塊組件的位置時，才會對其依賴文件進(jìn)行加載，這樣既保證了首次加載的速度，也保證了頁面的展示效果不受大的影響。

4.根據(jù)權(quán)利要求1所述的網(wǎng)站移動端速度優(yōu)化方法，其特征是，區(qū)塊組件的移動端改進(jìn)的步驟：

1)開發(fā)新的移動端版本

對區(qū)塊組件的移動端展示效果的區(qū)塊組件，開辟出一個版本，用更加精煉的dom結(jié)構(gòu)，dom結(jié)構(gòu)只描繪移動端需要的內(nèi)容相應(yīng)的js代碼和css代碼，相當(dāng)于只是針對移動端進(jìn)行訂制，能加快訪問速度；同時每個移動端版本也擁有不同風(fēng)格移動端的展示效果，滿足頁面?zhèn)€性化需求；

2)對移動端不需要的區(qū)塊組件進(jìn)行隱藏

有些區(qū)塊組件，在pc端可能是需要展示的，但在移動端并不需要，對此添加了一個設(shè)置項，如果需要隱藏移動端不需要的區(qū)塊組件，只需設(shè)置一下，就能在移動端的時候不進(jìn)行加載，進(jìn)一步精簡代碼；

3)移動端首屏區(qū)塊組件，進(jìn)行緩加載；

針對在首屏的區(qū)塊組件，采用緩加載，先加載出第一張圖，或者第一幀圖像，在頁面加載完畢后，再對其相關(guān)的依賴進(jìn)行加載。

5.根據(jù)權(quán)利要求1所述的網(wǎng)站移動端速度優(yōu)化方法，其特征是，首屏區(qū)塊組件的樣式文件，進(jìn)行樣式收集和內(nèi)聯(lián)：用無界面瀏覽器的形式，對css樣式進(jìn)行收集，只收集對頁面展示產(chǎn)生影響的css代碼，將其存儲下來，頁面展示的時候，把其存儲下的css代碼，內(nèi)聯(lián)到頁面中，等頁面加載完畢后，再把完整的css文件引入。

6.根據(jù)權(quán)利要求1所述的網(wǎng)站移動端速度優(yōu)化方法，其特征是，在頁面編輯時，提供一個按鈕提示，能點擊按鈕，在當(dāng)前頁面計算出相應(yīng)的組件和區(qū)塊；在離開頁面，或者發(fā)布網(wǎng)站的時候，如未手動計算，自動計算出當(dāng)前頁面的組件區(qū)塊。通過主動和被動的方式，把計算出的數(shù)據(jù)存儲在數(shù)據(jù)庫中，在頁面渲染時，對相關(guān)的區(qū)塊和組件進(jìn)行加載渲染；在頁面后臺的編輯頁面，添加了一個立即優(yōu)化的按鈕，當(dāng)頁面保存時，該按鈕上會添加上一個紅點，用于提示用戶去點擊進(jìn)行手動優(yōu)化，當(dāng)用戶點擊時，頁面會彈出一個彈出層，提示用戶正在進(jìn)行移動端優(yōu)化，在彈層下面所編輯的頁面，會展示移動端的頁面樣式，計算出首屏區(qū)域內(nèi)的組件和區(qū)塊。