網(wǎng)頁數(shù)據(jù)加載方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)頁數(shù)據(jù)加載方法和一種網(wǎng)頁數(shù)據(jù)加載系統(tǒng)。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)越來越普及，Web(互聯(lián)網(wǎng))應(yīng)用產(chǎn)品越來越多，Web頁面技術(shù)也越來越成熟，相關(guān)的Web頁面也越來越多，在Web形態(tài)的產(chǎn)品中有眾多的頁面，比如，數(shù)據(jù)可能實(shí)時(shí)變化的頁面、頁面尺寸比較大的頁面等，為了提高Web應(yīng)用的加載和呈現(xiàn)性能以及提高頁面訪問速度，需要將Web應(yīng)用中的頁面和數(shù)據(jù)分塊加載和按需呈現(xiàn)。
[0003]現(xiàn)有的實(shí)現(xiàn)頁面分塊加載和按需呈現(xiàn)的技術(shù)方案，一般通過分頁和預(yù)先加載機(jī)制實(shí)現(xiàn)，該方案對于數(shù)據(jù)能夠分頁處理的情況非常適用，例如表格數(shù)據(jù)展現(xiàn)，但是對于頁面的分塊加載適用性不強(qiáng)，以及對于多頁簽下數(shù)據(jù)的按需呈現(xiàn)適用性也不強(qiáng)。
[0004]具體地，現(xiàn)有技術(shù)方案中，分塊加載數(shù)據(jù)一般是根據(jù)需要加載不同頁的數(shù)據(jù)，更多地應(yīng)用于類似表格的數(shù)據(jù)展現(xiàn)，有很明確的分頁加載數(shù)據(jù)需求，客戶端根據(jù)需要加載第N頁的數(shù)據(jù)，考慮到性能問題，也會(huì)預(yù)先加載第N-1頁、第N+1頁的數(shù)據(jù)，以提高頁面的展現(xiàn)速度，加載流程如圖1所示。
[0005]但是，上述技術(shù)方案存在以下問題:(I)只有數(shù)據(jù)能分塊分頁加載；(2)頁面不能按需綁定；(3)頁面的展現(xiàn)局限于表格展現(xiàn)。
[0006]因此，如何實(shí)現(xiàn)網(wǎng)頁加載的分塊處理且能夠按需呈現(xiàn)及綁定數(shù)據(jù)，同時(shí)提升網(wǎng)頁瀏覽效率，從而提升用戶體驗(yàn)成為亟待解決的技術(shù)問題。

【發(fā)明內(nèi)容】

[0007]本發(fā)明正是基于上述技術(shù)問題，提出了一種新的技術(shù)方案，可以有效地實(shí)現(xiàn)網(wǎng)頁加載的分塊處理且能夠按需呈現(xiàn)及綁定數(shù)據(jù)，同時(shí)提升網(wǎng)頁瀏覽效率，從而提升用戶體驗(yàn)。
[0008]有鑒于此，本發(fā)明的第一方面，提出了一種網(wǎng)頁數(shù)據(jù)加載方法，包括:將所述當(dāng)前網(wǎng)頁頁面分成多個(gè)頁面塊;判斷當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，其中，所述當(dāng)前頁面塊為所述多個(gè)頁面塊中的任一頁面塊；當(dāng)判斷結(jié)果為是時(shí)，向服務(wù)器端發(fā)送數(shù)據(jù)請求，以獲取所述當(dāng)前頁面塊所需的多個(gè)數(shù)據(jù)塊;接收所述服務(wù)器端根據(jù)所述數(shù)據(jù)請求反饋的所述多個(gè)數(shù)據(jù)塊進(jìn)行展現(xiàn)，以完成網(wǎng)頁數(shù)據(jù)加載。
[0009]在該技術(shù)方案中，為當(dāng)前網(wǎng)頁頁面加載數(shù)據(jù)時(shí)，首先將該當(dāng)前網(wǎng)頁頁面劃分成多個(gè)頁面塊，進(jìn)而判斷即將加載數(shù)據(jù)的當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，以及在判定為是時(shí)，向服務(wù)器端請求數(shù)據(jù)，并在接收到服務(wù)器端響應(yīng)請求反饋的多個(gè)數(shù)據(jù)塊后進(jìn)行展現(xiàn)，以完成當(dāng)前頁面塊的數(shù)據(jù)加載，進(jìn)一步完成當(dāng)前網(wǎng)頁頁面的數(shù)據(jù)加載，其中，該當(dāng)前頁面塊為當(dāng)前網(wǎng)頁頁面的多個(gè)頁面塊中的任一頁面塊，如此，可以有效地實(shí)現(xiàn)網(wǎng)頁加載的分塊處理且能夠按需呈現(xiàn)及綁定數(shù)據(jù)。
[0010]在上述技術(shù)方案中，優(yōu)選地，所述判斷當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，具體包括:獲取所述當(dāng)前頁面塊所屬的文檔對象模型元素的Top屬性值和Left屬性值;獲取當(dāng)前瀏覽窗口的Height屬性值和Width屬性值;判斷所述Top屬性值是否大于或等于預(yù)設(shè)閾值且小于或等于所述預(yù)設(shè)閾值與所述Height屬性值之和，生成第一判斷結(jié)果；判斷所述Left屬性值是否大于或等于所述預(yù)設(shè)閾值且小于或等于所述預(yù)設(shè)閾值與所述Width屬性值之和，生成第二判斷結(jié)果;根據(jù)所述第一判斷結(jié)果和所述第二判斷結(jié)果確定所述當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)。
[0011]在該技術(shù)方案中，如何判斷當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，以確定是否請求對應(yīng)的頁面內(nèi)容，具體流程步驟包括:首先，確定當(dāng)前頁面塊所屬的文檔對象模型(D0M，Document Object Model)元素的Top屬性值(即設(shè)置一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移)和Left屬性值(即設(shè)置一個(gè)定位元素左外邊距邊界與其包含塊左邊界之間的偏移)，以及當(dāng)前瀏覽窗口(可以是全屏窗口也可以是任一比例的縮小窗口)的Height屬性值(高度值)和Width屬性值(寬度值)；然后分別判斷Top屬性值是否大于或等于預(yù)設(shè)閾值(比如O)且小于或等于該預(yù)設(shè)閾值與Height屬性值之和，以及Left屬性值是否大于或等于該預(yù)設(shè)閾值且小于或等于該預(yù)設(shè)閾值與Width屬性值之和，進(jìn)而根據(jù)上述判斷結(jié)果確定該當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，如此，可以有效地保證對需要展現(xiàn)的頁面塊進(jìn)行數(shù)據(jù)加載，提高網(wǎng)頁數(shù)據(jù)加載的準(zhǔn)確性和效率。
[0012]在上述任一技術(shù)方案中，優(yōu)選地，根據(jù)所述第一判斷結(jié)果和所述第二判斷結(jié)果確定所述當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，具體包括:當(dāng)所述第一判斷結(jié)果和所述第二判斷結(jié)果均為是時(shí)，確定所述當(dāng)前頁面塊在展現(xiàn)范圍內(nèi)。
[0013]在該技術(shù)方案中，當(dāng)判定Top屬性值大于或等于預(yù)設(shè)閾值(比如O)且小于或等于該預(yù)設(shè)閾值與Height屬性值之和以及判定Left屬性值大于或等于該預(yù)設(shè)閾值且小于或等于該預(yù)設(shè)閾值與Width屬性值之和時(shí)，判定當(dāng)前頁面塊在展現(xiàn)范圍內(nèi)，可以向服務(wù)器請求對應(yīng)的頁面內(nèi)容，以實(shí)現(xiàn)頁面能夠按需呈現(xiàn)及綁定數(shù)據(jù)。
[0014]在上述任一技術(shù)方案中，優(yōu)選地，所述接收所述服務(wù)器端根據(jù)所述數(shù)據(jù)請求反饋的所述多個(gè)數(shù)據(jù)塊進(jìn)行展現(xiàn)，以完成網(wǎng)頁數(shù)據(jù)加載，具體包括:將所述多個(gè)數(shù)據(jù)塊按照所述服務(wù)器端的反饋順序進(jìn)行存儲(chǔ);調(diào)用與所述多個(gè)數(shù)據(jù)塊中的每個(gè)數(shù)據(jù)塊對應(yīng)的回調(diào)函數(shù)，以將所述每個(gè)數(shù)據(jù)塊加載至所述當(dāng)前頁面塊的對應(yīng)位置。
[0015]在該技術(shù)方案中，當(dāng)接收到服務(wù)器端反饋的對該當(dāng)前頁面塊的多個(gè)數(shù)據(jù)塊時(shí)，按照反饋的先后順序依次進(jìn)行存儲(chǔ)，接收完畢后，通過調(diào)用與每個(gè)數(shù)據(jù)塊對應(yīng)的回調(diào)函數(shù)將每個(gè)數(shù)據(jù)塊準(zhǔn)確地加載到該當(dāng)前頁面的對應(yīng)位置，完成該當(dāng)前頁面塊的數(shù)據(jù)加載進(jìn)行展現(xiàn)，如此，可以有效保證數(shù)據(jù)加載的完整性，避免遺漏以及因加載位置有誤而導(dǎo)致頁面加載失敗，進(jìn)而確保了網(wǎng)頁瀏覽效率。
[0016]在上述任一技術(shù)方案中，優(yōu)選地，所述當(dāng)判斷結(jié)果為是時(shí)，向服務(wù)器端發(fā)送數(shù)據(jù)請求，以獲取所述當(dāng)前頁面塊所需的多個(gè)數(shù)據(jù)塊，具體包括:當(dāng)所述判斷結(jié)果為是時(shí)，將用于加載所述當(dāng)前頁面塊的全部數(shù)據(jù)的合并數(shù)據(jù)請求發(fā)送至所述服務(wù)器端，以供所述服務(wù)器端將所述合并數(shù)據(jù)請求拆分為多個(gè)子數(shù)據(jù)請求并獲取與所述多個(gè)子數(shù)據(jù)請求對應(yīng)的所述多個(gè)數(shù)據(jù)塊。
[0017]在該技術(shù)方案中，當(dāng)確定當(dāng)前頁面塊在展現(xiàn)范圍內(nèi)時(shí)，通過向服務(wù)器端發(fā)送合并數(shù)據(jù)請求的方式獲取該當(dāng)前頁面塊的全部數(shù)據(jù)，即供服務(wù)器端將該合并數(shù)據(jù)請求進(jìn)行拆分并分別獲取拆分得到的多個(gè)數(shù)據(jù)請求對應(yīng)的多個(gè)數(shù)據(jù)塊，進(jìn)而由服務(wù)器端將獲取到的所有多個(gè)數(shù)據(jù)塊順序反饋以供該當(dāng)前網(wǎng)頁頁面塊進(jìn)行加載，如此，通過合并數(shù)據(jù)請求的方式從服務(wù)器端獲取相應(yīng)的數(shù)據(jù)，可以有效地提升網(wǎng)頁瀏覽效率，從而提升用戶體驗(yàn)。
[0018]根據(jù)本發(fā)明的第二方面，提出了一種網(wǎng)頁數(shù)據(jù)加載系統(tǒng)，包括:拆分模塊，用于將所述當(dāng)前網(wǎng)頁頁面分成多個(gè)頁面塊;判斷模塊，用于判斷當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，其中，所述當(dāng)前頁面塊為所述多個(gè)頁面塊中的任一頁面塊;數(shù)據(jù)請求模塊，用于當(dāng)判斷結(jié)果為是時(shí)，向服務(wù)器端發(fā)送數(shù)據(jù)請求，以獲取所述當(dāng)前頁面塊所需的多個(gè)數(shù)據(jù)塊;加載模塊，用于接收所述服務(wù)器端根據(jù)所述數(shù)據(jù)請求反饋的所述多個(gè)數(shù)據(jù)塊進(jìn)行展現(xiàn)，以完成網(wǎng)頁數(shù)據(jù)加載。
[0019]在該技術(shù)方案中，為當(dāng)前網(wǎng)頁頁面加載數(shù)據(jù)時(shí)，首先將該當(dāng)前網(wǎng)頁頁面劃分成多個(gè)頁面塊，進(jìn)而判斷即將加載數(shù)據(jù)的當(dāng)前頁面塊是否在展現(xiàn)范圍內(nèi)，以及在判定為是時(shí)，向服務(wù)器端請求數(shù)據(jù)，并在接收到服務(wù)器端響應(yīng)請求反饋的多個(gè)數(shù)據(jù)塊后進(jìn)行展現(xiàn)，以完成當(dāng)前頁面塊的數(shù)據(jù)加載，進(jìn)一步完成當(dāng)前網(wǎng)頁頁面的數(shù)據(jù)加載，其中，該當(dāng)前頁面塊為當(dāng)前網(wǎng)頁頁面的多個(gè)頁面塊中的任一頁面塊，如此，可以有效地實(shí)現(xiàn)網(wǎng)頁加載的分塊處理且能夠按需呈現(xiàn)及綁定數(shù)據(jù)。
[0020]在上述技術(shù)方案中，優(yōu)選地，所述判斷模塊具體包括:第一獲取子模塊，用于獲取所述當(dāng)前頁面塊所屬的文檔對象模型元素的Top屬性值和Left屬性值;第二獲取子模塊，用于獲取當(dāng)前瀏