[發(fā)明專利]一種延遲加載JS腳本的方法和裝置

有效

• 申請(qǐng)?zhí)枺?/td>: 201811224627.X
• 申請(qǐng)日: 2018-10-19
• 公開(kāi)（公告）號(hào): CN109343908B
• 公開(kāi)（公告）日: 2020-12-29
• 發(fā)明（設(shè)計(jì)）人: 鄭家興
• 申請(qǐng)（專利權(quán)）人: 網(wǎng)宿科技股份有限公司
• 主分類號(hào): G06F9/445
• 分類號(hào): G06F9/445;G06F16/955
• 代理公司: 北京華智則銘知識(shí)產(chǎn)權(quán)代理有限公司 11573
• 代理人: 劉榮鑫

本發(fā)明公開(kāi)了一種延遲加載JS腳本的方法和裝置，屬于網(wǎng)頁(yè)處理技術(shù)領(lǐng)域。所述方法包括：判斷目標(biāo)瀏覽器是否支持async屬性的按序執(zhí)行功能；如果支持，則基于待延遲加載的各個(gè)JS腳本的URL地址創(chuàng)建每個(gè)所述JS腳本的腳本標(biāo)簽，并對(duì)每個(gè)所述腳本標(biāo)簽設(shè)置async＝false；按照各個(gè)所述JS腳本的腳本執(zhí)行順序，依次將每個(gè)所述腳本標(biāo)簽插入到HTML文檔，以使所述目標(biāo)瀏覽器并行下載各個(gè)所述JS腳本，并按照所述腳本執(zhí)行順序執(zhí)行每個(gè)所述JS腳本。采用本發(fā)明，可以提高JS腳本的延遲加載效率。

技術(shù)領(lǐng)域

本發(fā)明涉及網(wǎng)頁(yè)處理技術(shù)領(lǐng)域，特別涉及一種延遲加載JS腳本的方法和裝置。

背景技術(shù)

網(wǎng)頁(yè)中往往包含有各類資源，如文字、圖片、音頻和視頻等資源。網(wǎng)頁(yè)瀏覽器對(duì)網(wǎng)頁(yè)的打開(kāi)速度與該網(wǎng)頁(yè)中各資源的加載完成情況相關(guān)，如果網(wǎng)頁(yè)瀏覽器對(duì)該網(wǎng)頁(yè)中各資源完成加載的用時(shí)越短，則打開(kāi)該網(wǎng)頁(yè)速度越快。

在上述各類資源中，JS(JavaScript)腳本較為特殊，其對(duì)網(wǎng)頁(yè)的加載完成情況不產(chǎn)生影響，但會(huì)對(duì)網(wǎng)頁(yè)的加載時(shí)間產(chǎn)生影響。JS腳本具有如下的加載邏輯：網(wǎng)頁(yè)瀏覽器在下載完成JS腳本后，會(huì)立即執(zhí)行該JS腳本，同時(shí)會(huì)對(duì)網(wǎng)頁(yè)中的后續(xù)資源停止加載。由于JS腳本的執(zhí)行時(shí)間往往較長(zhǎng)，因此當(dāng)網(wǎng)頁(yè)中的JS腳本較多時(shí)，會(huì)大大增加網(wǎng)頁(yè)的加載時(shí)間，極大地降低網(wǎng)頁(yè)打開(kāi)速度。為了提高網(wǎng)頁(yè)打開(kāi)速度，可以對(duì)網(wǎng)頁(yè)中的各JS腳本進(jìn)行延遲加載，即在網(wǎng)頁(yè)加載完成后再對(duì)網(wǎng)頁(yè)中的各JS腳本進(jìn)行加載。由于各JS腳本之間可能存在執(zhí)行依賴，如果不按照各JS腳本的腳本執(zhí)行順序執(zhí)行，將會(huì)出現(xiàn)未定義錯(cuò)誤或邏輯錯(cuò)誤，因此還需要保證各JS腳本按照其腳本執(zhí)行順序進(jìn)行執(zhí)行，例如普遍采用的串行下載方式。具體的，當(dāng)監(jiān)聽(tīng)到網(wǎng)頁(yè)加載完成的相應(yīng)事件時(shí)，可以按照腳本執(zhí)行順序?qū)λ写舆t加載的JS腳本依次進(jìn)行如下處理：基于JS腳本的URL(Uniform Resource Locator，統(tǒng)一資源定位符)地址創(chuàng)建該JS腳本的腳本標(biāo)簽，將腳本標(biāo)簽插入到網(wǎng)頁(yè)的HTML(HyperText Markup Language，超文本標(biāo)記語(yǔ)言)文檔，以觸發(fā)網(wǎng)頁(yè)瀏覽器對(duì)該JS腳本的下載及執(zhí)行，之后，當(dāng)監(jiān)聽(tīng)到該JS腳本執(zhí)行完畢時(shí)，再對(duì)下一個(gè)JS腳本重復(fù)上述處理，直至所有待延遲加載的JS腳本執(zhí)行完畢。

在實(shí)現(xiàn)本發(fā)明的過(guò)程中，發(fā)明人發(fā)現(xiàn)現(xiàn)有技術(shù)至少存在以下問(wèn)題：

在上述串行下載方式中，網(wǎng)頁(yè)瀏覽器必須按照腳本執(zhí)行順序?qū)W(wǎng)頁(yè)中的各JS腳本一個(gè)一個(gè)地進(jìn)行下載，且后一個(gè)JS腳本需要在前一個(gè)JS腳本執(zhí)行完畢后才可以進(jìn)行下載，耗費(fèi)了大量的時(shí)間用于JS腳本的下載，導(dǎo)致網(wǎng)頁(yè)瀏覽器需要較長(zhǎng)時(shí)間才可以加載完成JS腳本，故而JS腳本的延遲加載效率較低。

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

為了解決現(xiàn)有技術(shù)的問(wèn)題，本發(fā)明實(shí)施例提供了一種延遲加載JS腳本的方法和裝置。所述技術(shù)方案如下：

第一方面，提供了一種延遲加載JS腳本的方法，所述方法包括：

判斷目標(biāo)瀏覽器是否支持async屬性的按序執(zhí)行功能；

如果支持，則基于待延遲加載的各個(gè)JS腳本的URL地址創(chuàng)建每個(gè)所述JS腳本的腳本標(biāo)簽，并對(duì)每個(gè)所述腳本標(biāo)簽設(shè)置async＝false；

按照各個(gè)所述JS腳本的腳本執(zhí)行順序，依次將每個(gè)所述腳本標(biāo)簽插入到HTML文檔，以使所述目標(biāo)瀏覽器并行下載各個(gè)所述JS腳本，并按照所述腳本執(zhí)行順序執(zhí)行每個(gè)所述JS腳本。

進(jìn)一步的，所述判斷目標(biāo)瀏覽器是否支持async屬性的按序執(zhí)行功能，包括：

獲取記錄有不支持async屬性的按序執(zhí)行功能的瀏覽器的預(yù)設(shè)瀏覽器名單；

如果所述預(yù)設(shè)瀏覽器名單中存在所述目標(biāo)瀏覽器，則判斷所述目標(biāo)瀏覽器不支持async屬性的按序執(zhí)行功能，否則判斷所述目標(biāo)瀏覽器支持async屬性的按序執(zhí)行功能。

進(jìn)一步的，所述方法還包括：