讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
在頁(yè)面的加載過(guò)程中如果可以做到內(nèi)容的逐步呈現(xiàn)，對(duì)于良好的用戶(hù)體驗(yàn)來(lái)說(shuō)是非常重要的。通常我們也會(huì)在wondow對(duì)象的onload事件處理函數(shù)中做一些事情，但由于腳本阻塞加載和呈現(xiàn)的特性這一方面增加了頁(yè)面載入時(shí)間推遲了onload事件的觸發(fā)，另一方面也延遲了用戶(hù)所期待的反饋。這就需要我們使用一些方法來(lái)讓瀏覽器以非阻塞的方式加載外部腳本。
一 使用XMLHttpRequest對(duì)象異步方式加載外部腳本。
這種方式好處是觸發(fā)較少的瀏覽器忙指示器，能夠被所有現(xiàn)代瀏覽器的所支持。不足的之處在于由于瀏覽器的跨域安全機(jī)制所以只能允許加載同域下外部腳本。另外如果多個(gè)腳本之間存在依賴(lài)關(guān)系的話，需要使用編寫(xiě)相關(guān)的隊(duì)列管理腳本來(lái)控制多個(gè)腳本的執(zhí)行順序。
二 使用Javascript來(lái)動(dòng)態(tài)創(chuàng)建外部腳本的SCRIPT元素
這種方式是我認(rèn)為跨域并行加載外部腳本情況下的最佳方案，實(shí)現(xiàn)方法是使用Javascript來(lái)動(dòng)態(tài)的創(chuàng)建在HTML中引用外部腳本所需要srcript元素并給創(chuàng)建的srcript元素的src屬性設(shè)置相應(yīng)的外部腳本的URL來(lái)實(shí)現(xiàn)和其他資源并行加載。
四 使用iframe加載外部腳本
這種方式我們需要使用一個(gè)新HTML頁(yè)面把外部腳本轉(zhuǎn)換成到該HTML頁(yè)面的行內(nèi)腳本，然后在主頁(yè)面中使用iframe加載這個(gè)包含腳本的HTML頁(yè)面，使用這種方式需要重構(gòu)部分代碼來(lái)訪問(wèn)主頁(yè)面中DOM元素。而且IFRAM是開(kāi)銷(xiāo)相對(duì)較大DOM元素，同樣也有跨域限制。
五 使用Script標(biāo)簽的 derfer 屬性
這種方式是實(shí)現(xiàn)非阻塞并行加載外部腳本的最簡(jiǎn)單的方式，只需要在引用外部腳本的是常規(guī)方式上給SCRIPT標(biāo)簽應(yīng)用defer屬性即可。但是使用這種方式加載外部腳本缺點(diǎn)是它只在部門(mén)瀏覽器中實(shí)現(xiàn)并行加載因此兼容性欠缺。
六 docuument.write script tag
這種方式實(shí)現(xiàn)起來(lái)也比較簡(jiǎn)單，就是直接使用是javascript的document.write方法來(lái)輸出在HTML中引用外部腳本的script標(biāo)記的字符串。不足之處和方法五一樣兼容性欠缺。
總結(jié)
上述幾種方式需要根據(jù)具體需求，如是否需要跨域？是否需要確保腳本按順序執(zhí)行？是否需要觸發(fā)更多或更少的瀏覽器的忙指示器？以及兼容性，支持的代碼量來(lái)確定來(lái)綜合考慮那種方式才是追合適的。
相關(guān)文章
JavaScript計(jì)算值然后把值嵌入到html中的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JavaScript計(jì)算值然后把值嵌入到html中的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
javascript中的作用域(scope)和上下文(context)是這門(mén)語(yǔ)言的獨(dú)到之處，這部分歸功于他們帶來(lái)的靈活性。本文給大家介紹JavaScript中的作用域和上下文，感興趣的朋友一起學(xué)習(xí)2016-03-03
js實(shí)現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例
今天小編就為大家分享一篇js實(shí)現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
現(xiàn)在有一段12行的JavaScript代碼，可以讓firefox、chrome、safari瀏覽器崩潰，而且還能讓iphone重啟、安卓閃退，本文作者對(duì)于該12行代碼進(jìn)行了分析解讀并且提出了相應(yīng)的防御辦法，歡迎大家一同探討。有需要的朋友們可以參考借鑒。2016-10-10
微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過(guò)直接寫(xiě) data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)?lái)一篇js-FCC算法-No repeats please字符串的全排列(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動(dòng)效果及點(diǎn)擊空白隱藏功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動(dòng)效果及點(diǎn)擊空白隱藏功能,涉及微信小程序事件響應(yīng)、頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑動(dòng)與蒙層功能相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
解決uniapp上傳小程序體積過(guò)大的問(wèn)題
在昨天的工作中遇到了一個(gè)微信小程序上傳代碼過(guò)大的情況,在這里總結(jié)一下具體的解決步驟,首先介紹一下,技術(shù)棧是使用uniapp框架+HBuilderX的開(kāi)發(fā)環(huán)境,需要的朋友可以參考下2023-09-09
JavaScript進(jìn)階練習(xí)及簡(jiǎn)單實(shí)例分析
下面小編就為大家?guī)?lái)一篇JavaScript進(jìn)階練習(xí)及簡(jiǎn)單實(shí)例分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03