本發(fā)明涉及網(wǎng)頁(yè)加載的，特別地涉及一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法及系統(tǒng)。

背景技術(shù)：

1、在當(dāng)前的互聯(lián)網(wǎng)應(yīng)用中，網(wǎng)頁(yè)的訪問(wèn)速度和加載性能直接影響用戶體驗(yàn)和留存率。然而，隨著網(wǎng)頁(yè)內(nèi)容日趨豐富和復(fù)雜，網(wǎng)頁(yè)性能優(yōu)化面臨多重技術(shù)問(wèn)題。特別是在css資源加載方面，傳統(tǒng)的css加載方式通常以整合文件的形式提供完整的樣式資源，導(dǎo)致以下技術(shù)問(wèn)題：首次加載時(shí)間過(guò)長(zhǎng)：由于css文件往往包含整個(gè)頁(yè)面的樣式規(guī)則，導(dǎo)致網(wǎng)頁(yè)在初次加載時(shí)需要下載和解析大量樣式文件，增加了頁(yè)面的加載時(shí)間。尤其是在移動(dòng)端或低速網(wǎng)絡(luò)環(huán)境中，完整加載css文件會(huì)顯著延長(zhǎng)網(wǎng)頁(yè)顯示時(shí)間，影響用戶的使用體驗(yàn)。冗余資源消耗：傳統(tǒng)的css文件加載方式無(wú)法有效地識(shí)別用戶的行為和偏好，大量樣式規(guī)則即使在當(dāng)前頁(yè)面未被使用，依舊被下載和解析。特別是在多區(qū)域、內(nèi)容豐富的頁(yè)面中，頁(yè)面會(huì)加載所有區(qū)域的css文件，無(wú)論用戶是否訪問(wèn)這些區(qū)域，造成了帶寬和系統(tǒng)資源的浪費(fèi)。

技術(shù)實(shí)現(xiàn)思路

1、有鑒于此，本發(fā)明提出一種頁(yè)面訪問(wèn)性能優(yōu)化方法及系統(tǒng)，能夠?qū)ss實(shí)現(xiàn)分塊并按需加載結(jié)合用戶的偏好識(shí)別，可以實(shí)現(xiàn)樣式的快速加載。本發(fā)明提供如下技術(shù)方案：

2、一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，所述方法包括：識(shí)別用戶數(shù)據(jù)和網(wǎng)頁(yè)數(shù)據(jù)，并根據(jù)用戶數(shù)據(jù)對(duì)網(wǎng)頁(yè)數(shù)據(jù)中的css分塊；構(gòu)建訪問(wèn)習(xí)慣模型，并基于訪問(wèn)習(xí)慣模型根據(jù)用戶數(shù)據(jù)預(yù)測(cè)用戶操作關(guān)系；基于用戶操作關(guān)系劃分css分塊的加載策略，并動(dòng)態(tài)壓縮css分塊；解析并渲染css分塊，以完成網(wǎng)頁(yè)加載。

3、可選地，所述用戶數(shù)據(jù)包括用戶歷史訪問(wèn)行為數(shù)據(jù)、用戶當(dāng)前訪問(wèn)設(shè)備、當(dāng)前瀏覽器信息，所述網(wǎng)頁(yè)數(shù)據(jù)包括css樣式表；

4、可選地，所述根據(jù)用戶數(shù)據(jù)對(duì)網(wǎng)頁(yè)數(shù)據(jù)中的css分塊的方法包括：根據(jù)用戶的當(dāng)前訪問(wèn)設(shè)備確定網(wǎng)頁(yè)的加載樣式；根據(jù)加載樣式將css分塊。匹配加載樣式的多個(gè)區(qū)域；每個(gè)加載樣式的區(qū)域所對(duì)應(yīng)的css分塊包括與該區(qū)域相關(guān)的所有css規(guī)則；

5、可選地，所述構(gòu)建訪問(wèn)習(xí)慣模型，并基于訪問(wèn)習(xí)慣模型根據(jù)用戶數(shù)據(jù)預(yù)測(cè)用戶操作關(guān)系的方法包括：將用戶歷史訪問(wèn)行為數(shù)據(jù)劃分為區(qū)域訪問(wèn)頻率、區(qū)域停留時(shí)間和區(qū)域訪問(wèn)鏈路；基于機(jī)器學(xué)習(xí)算法構(gòu)建訪問(wèn)習(xí)慣模型；將用戶歷史訪問(wèn)行為數(shù)據(jù)輸入訪問(wèn)習(xí)慣模型，以將用戶劃分為對(duì)應(yīng)類型；基于訪問(wèn)習(xí)慣模型和用戶當(dāng)前的操作，預(yù)測(cè)用戶的下一步操作；

6、可選地，所述基于用戶操作關(guān)系劃分css分塊的加載策略，并動(dòng)態(tài)壓縮css分塊的方法包括：根據(jù)操作關(guān)系獲取用戶的下一步操作所對(duì)應(yīng)的區(qū)域；識(shí)別該區(qū)域的css分塊，并根據(jù)css分塊的資源內(nèi)容選擇按需加載或全部加載；當(dāng)css分塊的資源內(nèi)容為一個(gè)整體時(shí)，選擇全部加載策略，并對(duì)該css分塊全部壓縮；當(dāng)css分塊的資源內(nèi)容為組合時(shí)，選擇按需加載策略，并將css分塊的資源內(nèi)容劃分為核心布局樣式、基礎(chǔ)樣式和裝飾樣式；提取核心布局樣式規(guī)則并壓縮；在觸發(fā)核心布局樣式后，提取基礎(chǔ)樣式規(guī)則和裝飾樣式規(guī)則并壓縮；

7、可選地，所述解析并渲染css分塊，以完成網(wǎng)頁(yè)加載的方法包括：讀取動(dòng)態(tài)壓縮后的css分塊；解析css分塊的規(guī)則結(jié)構(gòu)，以提取css選擇器、屬性、值和媒體查詢，并創(chuàng)建cssom；通過(guò)cssom中定義的選擇器規(guī)則，將css分塊中的樣式規(guī)則與頁(yè)面匹配，并通過(guò)識(shí)別css分塊中的優(yōu)先級(jí)規(guī)則完成樣式加載；對(duì)加載后的樣式進(jìn)行渲染，以完成網(wǎng)頁(yè)的加載。

8、本發(fā)明進(jìn)一步公開了一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化系統(tǒng)，包括：css分塊模塊，用于識(shí)別用戶數(shù)據(jù)和網(wǎng)頁(yè)數(shù)據(jù)，并根據(jù)用戶數(shù)據(jù)對(duì)網(wǎng)頁(yè)數(shù)據(jù)中的css分塊；模型構(gòu)建模塊，用于構(gòu)建訪問(wèn)習(xí)慣模型，并基于訪問(wèn)習(xí)慣模型根據(jù)用戶數(shù)據(jù)預(yù)測(cè)用戶操作關(guān)系；css分塊動(dòng)態(tài)壓縮模塊，用于基于用戶操作關(guān)系劃分css分塊的加載策略，并動(dòng)態(tài)壓縮css分塊；網(wǎng)頁(yè)加載模塊，用于解析并渲染css分塊，以完成網(wǎng)頁(yè)加載。

9、本發(fā)明進(jìn)一步公開了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法。

10、本發(fā)明進(jìn)一步公開了一種電子設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，所述處理器執(zhí)行所述程序時(shí)實(shí)現(xiàn)上述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法。

11、本發(fā)明進(jìn)一步公開了一種電子設(shè)備，包括計(jì)算機(jī)程序，所述計(jì)算機(jī)程序在被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法。

12、根據(jù)本發(fā)明的技術(shù)方案，提出了根據(jù)用戶訪問(wèn)習(xí)慣和操作關(guān)系，劃分css分塊加載策略。通過(guò)行為分析預(yù)判用戶操作路徑，動(dòng)態(tài)加載用戶即將訪問(wèn)區(qū)域的css分塊，有效減少首次加載時(shí)間，還可以實(shí)現(xiàn)通過(guò)延遲加載策略監(jiān)控用戶行為，在用戶即將進(jìn)入未訪問(wèn)區(qū)域時(shí)，觸發(fā)該區(qū)域css分塊的解析和渲染，以保證用戶滾動(dòng)到相應(yīng)位置時(shí)，頁(yè)面的樣式已完成渲染。同時(shí)，分塊按優(yōu)先級(jí)逐步解析，使頁(yè)面的關(guān)鍵部分更快展示，優(yōu)化動(dòng)態(tài)交互的響應(yīng)速度。

技術(shù)特征：

1.一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述方法包括：

2.根據(jù)權(quán)利要求1所述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述用戶數(shù)據(jù)包括用戶歷史訪問(wèn)行為數(shù)據(jù)、用戶當(dāng)前訪問(wèn)設(shè)備、當(dāng)前瀏覽器信息，所述網(wǎng)頁(yè)數(shù)據(jù)包括css樣式表。

3.根據(jù)權(quán)利要求2所述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述根據(jù)用戶數(shù)據(jù)對(duì)網(wǎng)頁(yè)數(shù)據(jù)中的css分塊的方法包括：

4.根據(jù)權(quán)利要求2所述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述構(gòu)建訪問(wèn)習(xí)慣模型，并基于訪問(wèn)習(xí)慣模型根據(jù)用戶數(shù)據(jù)預(yù)測(cè)用戶操作關(guān)系的方法包括：

5.根據(jù)權(quán)利要求4所述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述基于用戶操作關(guān)系劃分css分塊的加載策略，并動(dòng)態(tài)壓縮css分塊的方法包括：

6.根據(jù)權(quán)利要求5所述的網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法，其特征在于，所述解析并渲染css分塊，以完成網(wǎng)頁(yè)加載的方法包括：

7.一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化系統(tǒng)，其特征在于，包括：

8.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述權(quán)利要求1-6任一項(xiàng)所述的方法。

9.一種電子設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，其特征在于，所述處理器執(zhí)行所述程序時(shí)實(shí)現(xiàn)上述權(quán)利要求1-6任一項(xiàng)所述的方法。

10.一種計(jì)算機(jī)程序產(chǎn)品，包括計(jì)算機(jī)程序，其特征在于，所述計(jì)算機(jī)程序在被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述權(quán)利要求1-6中任一項(xiàng)所述的方法。

技術(shù)總結(jié)
本發(fā)明公開了一種網(wǎng)頁(yè)訪問(wèn)性能優(yōu)化方法及系統(tǒng)，該方法包括：識(shí)別用戶數(shù)據(jù)和網(wǎng)頁(yè)數(shù)據(jù)，并根據(jù)用戶數(shù)據(jù)對(duì)網(wǎng)頁(yè)數(shù)據(jù)中的CSS分塊；構(gòu)建訪問(wèn)習(xí)慣模型，并基于訪問(wèn)習(xí)慣模型根據(jù)用戶數(shù)據(jù)預(yù)測(cè)用戶操作關(guān)系；基于用戶操作關(guān)系劃分CSS分塊的加載策略，并動(dòng)態(tài)壓縮CSS分塊；解析并渲染CSS分塊，以完成網(wǎng)頁(yè)加載。根據(jù)用戶訪問(wèn)習(xí)慣和操作關(guān)系，劃分CSS分塊加載策略。通過(guò)行為分析預(yù)判用戶操作路徑，動(dòng)態(tài)加載用戶即將訪問(wèn)區(qū)域的CSS分塊，有效減少首次加載時(shí)間，還可以實(shí)現(xiàn)通過(guò)延遲加載策略監(jiān)控用戶行為，在用戶即將進(jìn)入未訪問(wèn)區(qū)域時(shí)，觸發(fā)該區(qū)域CSS分塊的解析和渲染，以保證用戶滾動(dòng)到相應(yīng)位置時(shí)，頁(yè)面的樣式已完成渲染。

技術(shù)研發(fā)人員：孔艷周
受保護(hù)的技術(shù)使用者：北京餅干科技有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/23