網頁數據加載方法及系統的制作方法
【技術領域】
[0001]本發明涉及計算機技術領域,具體而言,涉及一種網頁數據加載方法和一種網頁數據加載系統。
【背景技術】
[0002]隨著互聯網越來越普及,Web(互聯網)應用產品越來越多,Web頁面技術也越來越成熟,相關的Web頁面也越來越多,在Web形態的產品中有眾多的頁面,比如,數據可能實時變化的頁面、頁面尺寸比較大的頁面等,為了提高Web應用的加載和呈現性能以及提高頁面訪問速度,需要將Web應用中的頁面和數據分塊加載和按需呈現。
[0003]現有的實現頁面分塊加載和按需呈現的技術方案,一般通過分頁和預先加載機制實現,該方案對于數據能夠分頁處理的情況非常適用,例如表格數據展現,但是對于頁面的分塊加載適用性不強,以及對于多頁簽下數據的按需呈現適用性也不強。
[0004]具體地,現有技術方案中,分塊加載數據一般是根據需要加載不同頁的數據,更多地應用于類似表格的數據展現,有很明確的分頁加載數據需求,客戶端根據需要加載第N頁的數據,考慮到性能問題,也會預先加載第N-1頁、第N+1頁的數據,以提高頁面的展現速度,加載流程如圖1所示。
[0005]但是,上述技術方案存在以下問題:(I)只有數據能分塊分頁加載;(2)頁面不能按需綁定;(3)頁面的展現局限于表格展現。
[0006]因此,如何實現網頁加載的分塊處理且能夠按需呈現及綁定數據,同時提升網頁瀏覽效率,從而提升用戶體驗成為亟待解決的技術問題。
【發明內容】
[0007]本發明正是基于上述技術問題,提出了一種新的技術方案,可以有效地實現網頁加載的分塊處理且能夠按需呈現及綁定數據,同時提升網頁瀏覽效率,從而提升用戶體驗。
[0008]有鑒于此,本發明的第一方面,提出了一種網頁數據加載方法,包括:將所述當前網頁頁面分成多個頁面塊;判斷當前頁面塊是否在展現范圍內,其中,所述當前頁面塊為所述多個頁面塊中的任一頁面塊;當判斷結果為是時,向服務器端發送數據請求,以獲取所述當前頁面塊所需的多個數據塊;接收所述服務器端根據所述數據請求反饋的所述多個數據塊進行展現,以完成網頁數據加載。
[0009]在該技術方案中,為當前網頁頁面加載數據時,首先將該當前網頁頁面劃分成多個頁面塊,進而判斷即將加載數據的當前頁面塊是否在展現范圍內,以及在判定為是時,向服務器端請求數據,并在接收到服務器端響應請求反饋的多個數據塊后進行展現,以完成當前頁面塊的數據加載,進一步完成當前網頁頁面的數據加載,其中,該當前頁面塊為當前網頁頁面的多個頁面塊中的任一頁面塊,如此,可以有效地實現網頁加載的分塊處理且能夠按需呈現及綁定數據。
[0010]在上述技術方案中,優選地,所述判斷當前頁面塊是否在展現范圍內,具體包括:獲取所述當前頁面塊所屬的文檔對象模型元素的Top屬性值和Left屬性值;獲取當前瀏覽窗口的Height屬性值和Width屬性值;判斷所述Top屬性值是否大于或等于預設閾值且小于或等于所述預設閾值與所述Height屬性值之和,生成第一判斷結果;判斷所述Left屬性值是否大于或等于所述預設閾值且小于或等于所述預設閾值與所述Width屬性值之和,生成第二判斷結果;根據所述第一判斷結果和所述第二判斷結果確定所述當前頁面塊是否在展現范圍內。
[0011]在該技術方案中,如何判斷當前頁面塊是否在展現范圍內,以確定是否請求對應的頁面內容,具體流程步驟包括:首先,確定當前頁面塊所屬的文檔對象模型(D0M,Document Object Model)元素的Top屬性值(即設置一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移)和Left屬性值(即設置一個定位元素左外邊距邊界與其包含塊左邊界之間的偏移),以及當前瀏覽窗口(可以是全屏窗口也可以是任一比例的縮小窗口)的Height屬性值(高度值)和Width屬性值(寬度值);然后分別判斷Top屬性值是否大于或等于預設閾值(比如O)且小于或等于該預設閾值與Height屬性值之和,以及Left屬性值是否大于或等于該預設閾值且小于或等于該預設閾值與Width屬性值之和,進而根據上述判斷結果確定該當前頁面塊是否在展現范圍內,如此,可以有效地保證對需要展現的頁面塊進行數據加載,提高網頁數據加載的準確性和效率。
[0012]在上述任一技術方案中,優選地,根據所述第一判斷結果和所述第二判斷結果確定所述當前頁面塊是否在展現范圍內,具體包括:當所述第一判斷結果和所述第二判斷結果均為是時,確定所述當前頁面塊在展現范圍內。
[0013]在該技術方案中,當判定Top屬性值大于或等于預設閾值(比如O)且小于或等于該預設閾值與Height屬性值之和以及判定Left屬性值大于或等于該預設閾值且小于或等于該預設閾值與Width屬性值之和時,判定當前頁面塊在展現范圍內,可以向服務器請求對應的頁面內容,以實現頁面能夠按需呈現及綁定數據。
[0014]在上述任一技術方案中,優選地,所述接收所述服務器端根據所述數據請求反饋的所述多個數據塊進行展現,以完成網頁數據加載,具體包括:將所述多個數據塊按照所述服務器端的反饋順序進行存儲;調用與所述多個數據塊中的每個數據塊對應的回調函數,以將所述每個數據塊加載至所述當前頁面塊的對應位置。
[0015]在該技術方案中,當接收到服務器端反饋的對該當前頁面塊的多個數據塊時,按照反饋的先后順序依次進行存儲,接收完畢后,通過調用與每個數據塊對應的回調函數將每個數據塊準確地加載到該當前頁面的對應位置,完成該當前頁面塊的數據加載進行展現,如此,可以有效保證數據加載的完整性,避免遺漏以及因加載位置有誤而導致頁面加載失敗,進而確保了網頁瀏覽效率。
[0016]在上述任一技術方案中,優選地,所述當判斷結果為是時,向服務器端發送數據請求,以獲取所述當前頁面塊所需的多個數據塊,具體包括:當所述判斷結果為是時,將用于加載所述當前頁面塊的全部數據的合并數據請求發送至所述服務器端,以供所述服務器端將所述合并數據請求拆分為多個子數據請求并獲取與所述多個子數據請求對應的所述多個數據塊。
[0017]在該技術方案中,當確定當前頁面塊在展現范圍內時,通過向服務器端發送合并數據請求的方式獲取該當前頁面塊的全部數據,即供服務器端將該合并數據請求進行拆分并分別獲取拆分得到的多個數據請求對應的多個數據塊,進而由服務器端將獲取到的所有多個數據塊順序反饋以供該當前網頁頁面塊進行加載,如此,通過合并數據請求的方式從服務器端獲取相應的數據,可以有效地提升網頁瀏覽效率,從而提升用戶體驗。
[0018]根據本發明的第二方面,提出了一種網頁數據加載系統,包括:拆分模塊,用于將所述當前網頁頁面分成多個頁面塊;判斷模塊,用于判斷當前頁面塊是否在展現范圍內,其中,所述當前頁面塊為所述多個頁面塊中的任一頁面塊;數據請求模塊,用于當判斷結果為是時,向服務器端發送數據請求,以獲取所述當前頁面塊所需的多個數據塊;加載模塊,用于接收所述服務器端根據所述數據請求反饋的所述多個數據塊進行展現,以完成網頁數據加載。
[0019]在該技術方案中,為當前網頁頁面加載數據時,首先將該當前網頁頁面劃分成多個頁面塊,進而判斷即將加載數據的當前頁面塊是否在展現范圍內,以及在判定為是時,向服務器端請求數據,并在接收到服務器端響應請求反饋的多個數據塊后進行展現,以完成當前頁面塊的數據加載,進一步完成當前網頁頁面的數據加載,其中,該當前頁面塊為當前網頁頁面的多個頁面塊中的任一頁面塊,如此,可以有效地實現網頁加載的分塊處理且能夠按需呈現及綁定數據。
[0020]在上述技術方案中,優選地,所述判斷模塊具體包括:第一獲取子模塊,用于獲取所述當前頁面塊所屬的文檔對象模型元素的Top屬性值和Left屬性值;第二獲取子模塊,用于獲取當前瀏