網(wǎng)頁(yè)更新方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本申請(qǐng)涉及網(wǎng)頁(yè)處理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)更新方法及裝置。
【背景技術(shù)】
[0002]一般的，瀏覽器在展示網(wǎng)頁(yè)的過(guò)程中，如果目標(biāo)網(wǎng)頁(yè)的排版發(fā)生變化，如智能終端請(qǐng)求打開(kāi)一個(gè)新的頁(yè)面、當(dāng)前頁(yè)面中存在動(dòng)態(tài)元素(如gif格式的動(dòng)圖、CSS動(dòng)畫(huà)等)，就會(huì)生成相應(yīng)的網(wǎng)頁(yè)更新內(nèi)容，瀏覽器需要將這些網(wǎng)頁(yè)更新內(nèi)容渲染到目標(biāo)網(wǎng)頁(yè)中，以替代原來(lái)的內(nèi)容，實(shí)現(xiàn)網(wǎng)頁(yè)的更新。
[0003]常用瀏覽器采用的網(wǎng)頁(yè)更新方法為，通過(guò)瀏覽器的內(nèi)核遍歷目標(biāo)網(wǎng)頁(yè)對(duì)應(yīng)的渲染樹(shù)的各個(gè)節(jié)點(diǎn)，以確定各個(gè)節(jié)點(diǎn)是否需要產(chǎn)生網(wǎng)頁(yè)更新內(nèi)容，并遍歷得到的所有網(wǎng)頁(yè)更新內(nèi)容存儲(chǔ)至預(yù)設(shè)存儲(chǔ)區(qū)；進(jìn)而通過(guò)瀏覽器的外殼依次讀取上述預(yù)設(shè)存儲(chǔ)區(qū)中的網(wǎng)頁(yè)更新內(nèi)容，并根據(jù)讀取到的網(wǎng)頁(yè)更新內(nèi)容對(duì)目標(biāo)網(wǎng)頁(yè)進(jìn)行渲染。
[0004]基于以上網(wǎng)頁(yè)更新方法，當(dāng)目標(biāo)網(wǎng)頁(yè)中的網(wǎng)頁(yè)更新內(nèi)容較多時(shí)，如目標(biāo)網(wǎng)頁(yè)中存在多個(gè)gif格式的動(dòng)圖，瀏覽器完成整個(gè)目標(biāo)網(wǎng)頁(yè)的渲染所需的時(shí)間較長(zhǎng)，使得目標(biāo)網(wǎng)頁(yè)更新速度較低，導(dǎo)致網(wǎng)頁(yè)中的動(dòng)態(tài)元素的時(shí)動(dòng)時(shí)停、流暢性較差，無(wú)法快速展現(xiàn)用戶所瀏覽的網(wǎng)頁(yè)內(nèi)容。

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

[0005]為克服相關(guān)技術(shù)中存在的問(wèn)題，本申請(qǐng)?zhí)峁┮环N網(wǎng)頁(yè)更新方法及裝置。
[0006]本申請(qǐng)第一方面提供一種網(wǎng)頁(yè)更新方法；該方法包括:
[0007]根據(jù)所述瀏覽器的可見(jiàn)區(qū)域設(shè)置動(dòng)態(tài)區(qū)域；
[0008]確定目標(biāo)網(wǎng)頁(yè)中與所述動(dòng)態(tài)區(qū)域?qū)?yīng)的區(qū)域?yàn)榇秩緟^(qū)域；
[0009]將所述待渲染區(qū)域?qū)?yīng)的網(wǎng)頁(yè)更新內(nèi)容存入第一預(yù)設(shè)存儲(chǔ)區(qū)，并將目標(biāo)網(wǎng)頁(yè)中除所述待渲染區(qū)域外的其他區(qū)域?qū)?yīng)的網(wǎng)頁(yè)更新內(nèi)容存入第二預(yù)設(shè)存儲(chǔ)區(qū)；
[0010]根據(jù)所述第一預(yù)設(shè)存儲(chǔ)區(qū)中存儲(chǔ)的網(wǎng)頁(yè)更新內(nèi)容對(duì)所述目標(biāo)網(wǎng)頁(yè)進(jìn)行渲染。
[0011]結(jié)合第一方面，在第一方面的第一種可行的實(shí)施方式中，所述根據(jù)所述瀏覽器的可見(jiàn)區(qū)域確定動(dòng)態(tài)區(qū)域，包括:
[0012]確定所述可見(jiàn)區(qū)域和目標(biāo)網(wǎng)頁(yè)之間的相對(duì)移動(dòng)方向；
[0013]根據(jù)所述相對(duì)移動(dòng)方向和預(yù)設(shè)擴(kuò)展高度確定與所述可見(jiàn)區(qū)域相接的擴(kuò)展區(qū)域；
[0014]確定所述可見(jiàn)區(qū)域和擴(kuò)展區(qū)域組成的區(qū)域?yàn)樗鰟?dòng)態(tài)區(qū)域。
[0015]結(jié)合第一方面，在第一方面的第二種可行的實(shí)施方式中，所述確定目標(biāo)網(wǎng)頁(yè)中與所述動(dòng)態(tài)區(qū)域?qū)?yīng)的區(qū)域?yàn)榇秩緟^(qū)域，包括:
[0016]將所述目標(biāo)網(wǎng)頁(yè)劃分為多個(gè)靜態(tài)區(qū)塊；
[0017]確定與所述動(dòng)態(tài)區(qū)域相交的靜態(tài)區(qū)塊為所述待渲染區(qū)域。
[0018]結(jié)合第一方面，或者第一方面的第一種可行的實(shí)施方式，或者第一方面的第二種可行的實(shí)施方式，在第一方面的第三種可行的實(shí)施方式中，所述將所述待渲染區(qū)域?qū)?yīng)的網(wǎng)頁(yè)更新內(nèi)容存入第一預(yù)設(shè)存儲(chǔ)區(qū)，并將其他網(wǎng)頁(yè)更新內(nèi)容存入第二預(yù)設(shè)存儲(chǔ)區(qū)，包括:
[0019]將所述目標(biāo)網(wǎng)頁(yè)中存在網(wǎng)頁(yè)更新內(nèi)容的區(qū)域劃分為多個(gè)待渲染塊；
[0020]將與所述待渲染區(qū)域相交的第一待渲染塊的網(wǎng)頁(yè)更新內(nèi)容存入所述第一預(yù)設(shè)存儲(chǔ)區(qū)，并將其他待渲染塊的網(wǎng)頁(yè)更新內(nèi)容存入所述第二預(yù)設(shè)存儲(chǔ)區(qū)。
[0021]結(jié)合第一方面的第三種可行的實(shí)施方式，在第一方面的第四種可行的實(shí)施方式中，所述網(wǎng)頁(yè)更新方法還包括:
[0022]當(dāng)動(dòng)態(tài)區(qū)域和目標(biāo)網(wǎng)頁(yè)之間的相對(duì)位置改變時(shí)，重新確定所述待渲染區(qū)域；
[0023]判斷所述第二預(yù)設(shè)存儲(chǔ)區(qū)存儲(chǔ)網(wǎng)頁(yè)更新內(nèi)容對(duì)應(yīng)的待渲染塊中，是否存在與重新確定的待渲染區(qū)域相交的第二待渲染塊；
[0024]如果存在所述第二待渲染塊，則將所述第二待渲染塊對(duì)應(yīng)的網(wǎng)頁(yè)更新內(nèi)容由所述第二預(yù)設(shè)存儲(chǔ)區(qū)轉(zhuǎn)存至所述第一預(yù)設(shè)存儲(chǔ)區(qū)。
[0025]本申請(qǐng)第二方面提供一種網(wǎng)頁(yè)更新裝置；該裝置包括:
[0026]動(dòng)態(tài)區(qū)域設(shè)置單元，用于根據(jù)所述瀏覽器的可見(jiàn)區(qū)域設(shè)置動(dòng)態(tài)區(qū)域；
[0027]渲染區(qū)域確定單元，用于確定目標(biāo)網(wǎng)頁(yè)中與所述動(dòng)態(tài)區(qū)域?qū)?yīng)的區(qū)域?yàn)榇秩緟^(qū)域；
[0028]更新內(nèi)容處理單元，用于將所述待渲染區(qū)域?qū)?yīng)的網(wǎng)頁(yè)更新內(nèi)容存入第一預(yù)設(shè)存儲(chǔ)區(qū)，并將目標(biāo)網(wǎng)頁(yè)中除所述待渲染區(qū)域外的其他區(qū)域?qū)?yīng)的網(wǎng)頁(yè)更新內(nèi)容存入第二預(yù)設(shè)存儲(chǔ)區(qū)；
[0029]目標(biāo)網(wǎng)頁(yè)渲染單元，用于根據(jù)所述第一預(yù)設(shè)存儲(chǔ)區(qū)中存儲(chǔ)的網(wǎng)頁(yè)更新內(nèi)容對(duì)所述目標(biāo)網(wǎng)頁(yè)進(jìn)行渲染。
[0030]結(jié)合第二方面，在第二方面的第一種可行的實(shí)施方式中，所述動(dòng)態(tài)區(qū)域設(shè)置單元包括:
[0031]移動(dòng)方向確定模塊，用于確定所述可見(jiàn)區(qū)域和目標(biāo)網(wǎng)頁(yè)之間的相對(duì)移動(dòng)方向；
[0032]擴(kuò)展區(qū)域確定模塊，用于根據(jù)所述相對(duì)移動(dòng)方向和預(yù)設(shè)擴(kuò)展高度確定與所述可見(jiàn)區(qū)域相接的擴(kuò)展區(qū)域；
[0033]動(dòng)態(tài)區(qū)域確定模塊，用于確定所述可見(jiàn)區(qū)域和擴(kuò)展區(qū)域組成的區(qū)域?yàn)樗鰟?dòng)態(tài)區(qū)域。
[0034]結(jié)合第二方面，在第二方面的第二種可行的實(shí)施方式中，所述渲染區(qū)域確定單元包括:
[0035]目標(biāo)網(wǎng)頁(yè)分塊模塊，用于將所述目標(biāo)網(wǎng)頁(yè)劃分為多個(gè)靜態(tài)區(qū)塊；
[0036]渲染區(qū)域確定模塊，用于確定與所述動(dòng)態(tài)區(qū)域相交的靜態(tài)區(qū)塊為所述待渲染區(qū)域。
[0037]結(jié)合第二方面，或者第二方面的第一種可行的實(shí)施方式，或者第二方面的第二種可行的實(shí)施方式，在第二方面的第三種可行的實(shí)施方式中，所述更新內(nèi)容處理單元包括:
[0038]更新區(qū)域分塊模塊，用于將所述目標(biāo)網(wǎng)頁(yè)中存在網(wǎng)頁(yè)更新內(nèi)容的區(qū)域劃分為多個(gè)待渲染塊；
[0039]分區(qū)存儲(chǔ)控制模塊，用于將與所述待渲染區(qū)域相交的第一待渲染塊的網(wǎng)頁(yè)更新內(nèi)容存入所述第一預(yù)設(shè)存儲(chǔ)區(qū)，并將其他待渲染塊的網(wǎng)頁(yè)更新內(nèi)容存入所述第二預(yù)設(shè)存儲(chǔ)區(qū)。
[0040]結(jié)合第二方面的第三種可行的實(shí)施方式，在第二方面的第四種可行的實(shí)施方式中，所述網(wǎng)頁(yè)更新裝置還包括:
[0041]渲染區(qū)域重置單元，用于在動(dòng)態(tài)區(qū)域和目標(biāo)網(wǎng)頁(yè)之間的相對(duì)位置改變時(shí)，重新確定所述待渲染區(qū)域；
[0042]更新內(nèi)容轉(zhuǎn)存單元，用于判斷所述第二預(yù)設(shè)存儲(chǔ)區(qū)存儲(chǔ)網(wǎng)頁(yè)更新內(nèi)容對(duì)應(yīng)的待渲染塊中，是否存在與重新確定的待渲染區(qū)域相交的第二待渲染塊，如果存在所述第二待渲染塊，則將所述第二待渲染塊對(duì)應(yīng)的網(wǎng)頁(yè)更新內(nèi)容由所述第二預(yù)設(shè)存儲(chǔ)區(qū)轉(zhuǎn)存至所述第一預(yù)設(shè)存儲(chǔ)區(qū)。
[0043]由以上技術(shù)方案可知，本申請(qǐng)實(shí)施例首先根據(jù)瀏覽器的可見(jiàn)區(qū)域設(shè)置一個(gè)動(dòng)態(tài)區(qū)域，再將目標(biāo)網(wǎng)頁(yè)中與該動(dòng)態(tài)區(qū)域?qū)?yīng)的區(qū)域作為待渲染區(qū)域，然后將該待渲染區(qū)域產(chǎn)生的網(wǎng)頁(yè)更新內(nèi)容存入第一預(yù)設(shè)存儲(chǔ)區(qū)，進(jìn)而一次讀取該第一預(yù)設(shè)存儲(chǔ)區(qū)中的網(wǎng)頁(yè)更新內(nèi)容，完成對(duì)待渲染區(qū)域的渲染，保證了當(dāng)前的可見(jiàn)區(qū)域顯示的內(nèi)容為更新后的內(nèi)容；同時(shí)，待渲染區(qū)域之外的其他區(qū)域產(chǎn)生的網(wǎng)頁(yè)更新內(nèi)容存入第二預(yù)設(shè)存儲(chǔ)區(qū)，暫時(shí)不對(duì)相應(yīng)區(qū)域進(jìn)行渲染，可以減少渲染操作的工作量，提高待渲染區(qū)域的渲染效率，進(jìn)而提高可見(jiàn)區(qū)域內(nèi)動(dòng)圖、動(dòng)畫(huà)等動(dòng)態(tài)元素的更新速度，消除更新速度慢導(dǎo)致的動(dòng)態(tài)元素時(shí)動(dòng)時(shí)停的卡頓現(xiàn)象。
[0044]應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性和解釋性的，并不能限制本申請(qǐng)。
【附圖說(shuō)明】
[0045]此處的附圖被并入說(shuō)明書(shū)中并構(gòu)成本說(shuō)明書(shū)的一部分，示出了符合本發(fā)明的實(shí)施例，并與說(shuō)明書(shū)一起用于解釋本發(fā)明的原理。
[0046]圖1是根據(jù)一示例性實(shí)施例示出的一種網(wǎng)頁(yè)更新方法的流程圖。
[0047]圖2是根據(jù)一示例性實(shí)施例示出的目標(biāo)網(wǎng)頁(yè)和瀏覽器實(shí)際顯示情況對(duì)比圖。
[0048]圖3是根據(jù)一示例性實(shí)施例示出的另一種網(wǎng)頁(yè)更新方法的流程圖。
[0049]圖4是根據(jù)一示例性實(shí)施例示出的基于目標(biāo)網(wǎng)頁(yè)的直角坐標(biāo)系示意圖。
[0050]圖5是根據(jù)一示例性實(shí)施例示出的又一種網(wǎng)頁(yè)更新方法的流程圖。
[0051]圖6是根據(jù)一示例性實(shí)施例示出的又一種網(wǎng)頁(yè)更新方法的流程圖。
[0052]圖7是現(xiàn)有技術(shù)和本申請(qǐng)一示例性實(shí)施例針對(duì)同一目標(biāo)網(wǎng)頁(yè)的網(wǎng)頁(yè)更新過(guò)程的耗時(shí)對(duì)比圖。
[0053]圖8是根據(jù)一示例性實(shí)施例示出的一種網(wǎng)頁(yè)更新裝置的結(jié)構(gòu)框圖。
[0054]圖9是根據(jù)一示例性實(shí)施例示出的另一種網(wǎng)頁(yè)更新裝置的結(jié)構(gòu)框圖。
[0055]圖10是根據(jù)一示例性實(shí)施例示出的又一種網(wǎng)頁(yè)更新裝置的結(jié)構(gòu)框圖。