一種應(yīng)用于瀏覽器的首屏性能優(yōu)化方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及通訊領(lǐng)域，尤其涉及一種首屏性能優(yōu)化方法。
【背景技術(shù)】
[0002]頁面性能優(yōu)化是通過各種方式讓頁面更快的呈現(xiàn)在用戶面前，現(xiàn)有技術(shù)中通過合并JavaScript或css資源減少請(qǐng)求數(shù)來提高頁面性能，但是對(duì)于首屏頁面來說這種方法仍然會(huì)下載首屏用不到的資源，直接導(dǎo)致首屏加載速度慢、浪費(fèi)網(wǎng)絡(luò)資源的問題和一次性加載太多內(nèi)容直接造成頁面滾動(dòng)卡頓現(xiàn)象。

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

[0003]本發(fā)明的目的在于提供一種首屏性能優(yōu)化方法，從而解決現(xiàn)有技術(shù)中存在的前述冋題。
[0004]為了實(shí)現(xiàn)上述目的，本發(fā)明所述應(yīng)用于瀏覽器的首屏性能優(yōu)化方法，采用的技術(shù)方案如下:
[0005]SI，開啟瀏覽器，瀏覽器劃分首屏內(nèi)容區(qū)和非首屏內(nèi)容區(qū)，同時(shí)，加載首屏內(nèi)容區(qū)的內(nèi)容；
[0006]所述非首屏內(nèi)容區(qū)的個(gè)數(shù)為η個(gè)，所述η多I ；
[0007]S2，瀏覽器判斷頁面滾動(dòng)條當(dāng)前位置的參考點(diǎn)與預(yù)先設(shè)定的非首屏內(nèi)容區(qū)的顯示位置點(diǎn)是否建立一對(duì)一映射，如果建立，進(jìn)入S3 ;如果沒有建立，則繼續(xù)判斷；
[0008]S3，瀏覽器獲取非首屏內(nèi)容區(qū)的唯一序列號(hào)和與所述唯一序列號(hào)綁定的加載方法，在所述參考點(diǎn)處執(zhí)行加載方法加載非首屏內(nèi)容區(qū)的內(nèi)容。
[0009]優(yōu)選地，步驟SI中，首屏內(nèi)容區(qū)的垂直方向顯示的最大像素點(diǎn)為768。
[0010]優(yōu)選地，在步驟SI和S2之間還存在以下步驟:
[0011]Al，瀏覽器設(shè)定每個(gè)非首屏內(nèi)容區(qū)的顯示位置點(diǎn)，并將所述顯示位置點(diǎn)與頁面滾動(dòng)條滑動(dòng)的參考點(diǎn)建立一對(duì)一映射；
[0012]Α2，建立每個(gè)非首屏內(nèi)容區(qū)的顯示位置點(diǎn)和與其對(duì)應(yīng)的非首屏內(nèi)容區(qū)的唯一序列號(hào)的綁定連接；
[0013]A3，最后建立每個(gè)非首屏內(nèi)容區(qū)的唯一序列號(hào)與非首屏內(nèi)容加載方法的綁定連接。
[0014]更優(yōu)選地，在步驟Al，瀏覽器選擇隨機(jī)建立非首屏內(nèi)容區(qū)的顯示位置點(diǎn)與頁面滾動(dòng)條滑動(dòng)的參考點(diǎn)一對(duì)一映射或按照用戶需求建立非首屏內(nèi)容區(qū)的顯示位置點(diǎn)與頁面滾動(dòng)條滑動(dòng)的參考點(diǎn)一對(duì)一映射。
[0015]更優(yōu)選地，所述用戶需求是指按照用戶的要求在非首屏內(nèi)容區(qū)顯示預(yù)先設(shè)定的內(nèi)容，所述內(nèi)容包括:加載圖片、加載JavaScript模塊、加載大塊的html、加載iframe。
[0016]優(yōu)選地，在步驟S3中，只執(zhí)行加載一次與所述參考點(diǎn)對(duì)應(yīng)的非首屏內(nèi)容區(qū)的內(nèi)容。
[0017]優(yōu)選地，步驟S2，具體按照下述方法實(shí)現(xiàn):
[0018]BI，頁面滾動(dòng)條滾動(dòng)；
[0019]B2，瀏覽器獲取頁面滾動(dòng)條滾動(dòng)到的當(dāng)前位置的參考點(diǎn)；
[0020]B2，瀏覽器判斷在內(nèi)存中存儲(chǔ)的預(yù)先設(shè)定的非首屏內(nèi)容區(qū)的顯示位置點(diǎn)與所述參考點(diǎn)是否建立一對(duì)一映射，如果建立進(jìn)入S3，如果沒有建立，則返回B2。
[0021]優(yōu)選地，步驟S3，具體按照下述方法實(shí)現(xiàn):
[0022]Cl，查找并獲取與所述顯示位置點(diǎn)綁定連接的非首屏內(nèi)容區(qū)的唯一序列號(hào)；
[0023]C2，查找并調(diào)取與唯一序列號(hào)綁定連接的非首屏內(nèi)容區(qū)顯示內(nèi)容的加載方法；
[0024]C3，執(zhí)行加載方法，在所述參考點(diǎn)顯示非首屏內(nèi)容區(qū)的內(nèi)容。
[0025]本發(fā)明的有益效果是:
[0026]本發(fā)明所述方法在開啟瀏覽器時(shí)，僅僅加載首屏內(nèi)容區(qū)內(nèi)容，隨著屏幕滾動(dòng)逐步加載頁面滾動(dòng)條滾動(dòng)到的非首屏內(nèi)容區(qū)的內(nèi)容，解決了現(xiàn)有首屏加載方法中直接將非首屏內(nèi)容與首屏內(nèi)容一次性加載造成的頁面加載緩慢或頁面卡頓的問題。因?yàn)槭灼另撁婕虞d的JavaScript、css和圖片這些非首屏內(nèi)容的文件數(shù)量減少，首屏頁面中不需要的頁面結(jié)構(gòu)減少，所以加載首屏頁面的時(shí)間減少近一半。同時(shí)，在所述方法中可以設(shè)定與頁面滾動(dòng)條當(dāng)前位置的參考點(diǎn)對(duì)應(yīng)的非首屏內(nèi)容區(qū)的內(nèi)容，因此本發(fā)明還可實(shí)現(xiàn)按照用戶的需求設(shè)定非首屏內(nèi)容區(qū)加載的內(nèi)容，極大地改善了用戶體驗(yàn)。
【附圖說明】
[0027]圖1是實(shí)施例中所述應(yīng)用于瀏覽器的首屏性能優(yōu)化方法的流程示意圖；
[0028]圖2是實(shí)施例中在步驟SI和S2之間存在步驟的流程不意圖；
[0029]圖3是實(shí)施例中步驟S2的流程示意圖；
[0030]圖4是實(shí)施例中步驟S3的流程示意圖。
【具體實(shí)施方式】
[0031]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的【具體實(shí)施方式】?jī)H僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0032]實(shí)施例
[0033]參照?qǐng)D1至圖4，本實(shí)施例中所述應(yīng)用于瀏覽器的首屏性能優(yōu)化方法，該方法包括:
[0034]SI，開啟瀏覽器，瀏覽器劃分首屏內(nèi)容區(qū)和非首屏內(nèi)容區(qū)，同時(shí)，加載首屏內(nèi)容區(qū)的內(nèi)容；
[0035]所述非首屏內(nèi)容區(qū)的個(gè)數(shù)為η個(gè)，所述η多I ;
[0036]步驟SI中，距離頁面頂部為768像素的區(qū)域是首屏內(nèi)容區(qū)，本實(shí)施例中，首屏內(nèi)容區(qū)的區(qū)域像素為1024X768 ;如本領(lǐng)域技術(shù)人員知，瀏覽器頁面加載后，滾動(dòng)條不做任何滾動(dòng)，瀏覽器窗口最頂部的頁面區(qū)域就是頁面頂部，因?yàn)?024X768是來自用戶屏幕分辨率的統(tǒng)計(jì)，使用小于等于1024X768的用戶占使用瀏覽器總用戶的55%-80%，所以在這個(gè)位置做首屏優(yōu)化是最合適的。
[0037]S2，瀏覽器判斷頁面滾動(dòng)條當(dāng)前位置的參考點(diǎn)與預(yù)先設(shè)定的非首屏內(nèi)容區(qū)的顯示位置點(diǎn)是否建立一對(duì)一映射，如果建立，進(jìn)入S3 ;如果沒有建立，則繼續(xù)判斷；
[0038]S3，瀏覽器獲取非首屏內(nèi)容區(qū)的唯一序列號(hào)和與所述唯一序列號(hào)綁定的加載方法，在所述參考點(diǎn)處執(zhí)行加載方法加載非首屏內(nèi)容區(qū)的內(nèi)容。
[0039]在本實(shí)施例中，在步驟SI和S2之間還存在以下步驟:
[0040]Al，瀏覽器設(shè)定每個(gè)非首屏內(nèi)容區(qū)的顯示位置點(diǎn)，并將所述顯示位置點(diǎn)與頁面滾動(dòng)條滑動(dòng)的參考點(diǎn)建立一對(duì)一映射；
[0041]A2，建立每個(gè)非首屏內(nèi)容區(qū)的顯示位置點(diǎn)和與其對(duì)應(yīng)的非首屏內(nèi)容區(qū)的唯一序列號(hào)的綁定連接；
[0042]A3，最后建立每個(gè)非首屏內(nèi)容區(qū)的唯一序列號(hào)與非首屏內(nèi)容加載方法的綁定連接。