JS異步加載的幾種方式

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁(yè)面的處理。主要有三種方式。

目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、桐梓網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

方法一：也叫Script DOM Element

但是這種加載方式執(zhí)行完之前會(huì)阻止onload事件的觸發(fā)，而現(xiàn)在很多頁(yè)面的代碼都在onload時(shí)還執(zhí)行額外的渲染工作，所以還是會(huì)阻塞部分頁(yè)面的初始化處理。

方法二：onload時(shí)的異步加載

這種方法只是把插入script的方法放在一個(gè)函數(shù)里面，然后放在window的onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問(wèn)題。

注:DOMContentLoaded與load的區(qū)別。前者是在document已經(jīng)解析完成，頁(yè)面中的dom元素可用，但是頁(yè)面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區(qū)別在于頁(yè)面所有資源全部加載完畢。

方法三：其他方法

由于JavaScript的動(dòng)態(tài)性，還有很多異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

XHR Injection(XHR 注入)：通過(guò)XMLHttpRequest來(lái)獲取JavaScript，然后創(chuàng)建一個(gè)script元素插入到DOM結(jié)構(gòu)中。ajax請(qǐng)求成功后設(shè)置script.text為請(qǐng)求成功后返回的responseText。

Script In Irame：在父窗口插入一個(gè)iframe元素，然后再iframe中執(zhí)行加載JS的操作。

GMail Mobile：業(yè)內(nèi)JS內(nèi)容被注釋，所以不會(huì)執(zhí)行，在需要的時(shí)候，獲取script中的text內(nèi)容去掉注釋，調(diào)用eval()執(zhí)行。

HTML5新屬性：async和defer屬性

defer屬性：IE4.0就出現(xiàn)。defer屬聲明腳本中將不會(huì)有document.write和dom修改。瀏覽器會(huì)并行下載其他有defer屬性的script。而不會(huì)阻塞頁(yè)面后續(xù)處理。注：所有的defer腳本必須保證按順序執(zhí)行的。

async屬性：Html5新屬性。腳本將在下載后盡快執(zhí)行，作用同defer，但是不能保證腳本按順序執(zhí)行。他們將在onload事件之前完成。

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時(shí)使用async和defer，這樣IE 4之后的所有IE都支持異步加載。

沒(méi)有async屬性，script將立即獲?。ㄏ螺d）并執(zhí)行，期間阻塞了瀏覽器的后續(xù)處理。如果有async屬性，那么script將被異步下載并執(zhí)行，同時(shí)瀏覽器繼續(xù)后續(xù)的處理。

總結(jié)：

對(duì)于支持HTML5的瀏覽器，實(shí)現(xiàn)JS的異步加載只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對(duì)于不支持Html5的瀏覽器(IE可以用defer實(shí)現(xiàn))，可以采用以上幾種方法實(shí)現(xiàn)。原理基本上都是向DOM中寫入script或者通過(guò)eval函數(shù)執(zhí)行JS代碼，你可以把它放在匿名函數(shù)中執(zhí)行，也可以在onload中執(zhí)行，也可以通過(guò)XHR注入實(shí)現(xiàn)，也可以創(chuàng)建一個(gè)iframe元素，然后在iframe中執(zhí)行插入JS代碼。

三：延遲加載

有些JS代碼在某些情況在需要使用，并不是頁(yè)面初始化的時(shí)候就要用到。延遲加載就是為了解決這個(gè)問(wèn)題。將JS切分成許多模塊，頁(yè)面初始化時(shí)只加載需要立即執(zhí)行的JS，然后其它JS的加載延遲到第一次需要用到的時(shí)候再加載。類似圖片的延遲加載。

JS的加載分為兩個(gè)部分：下載和執(zhí)行。異步加載只是解決了下載的問(wèn)題，但是代碼在下載完成后就會(huì)立即執(zhí)行，在執(zhí)行過(guò)程中瀏覽器處于阻塞狀態(tài)，響應(yīng)不了任何需求。

解決思路：為了解決JS延遲加載的問(wèn)題，可以利用異步加載緩存起來(lái)，但不立即執(zhí)行，需要的時(shí)候在執(zhí)行。如何進(jìn)行緩存呢？將JS內(nèi)容作為Image或者Object對(duì)象加載緩存起來(lái)，所以不會(huì)立即執(zhí)行，然后在第一次需要的時(shí)候在執(zhí)行。

1：模擬較長(zhǎng)的下載時(shí)間：

利用thread讓其sleep一段時(shí)間在執(zhí)行下載操作。

2：模擬較長(zhǎng)的JS代碼執(zhí)行時(shí)間

這段代碼將使JS執(zhí)行5秒才完成！

JS延遲加載機(jī)制(LazyLoad)：簡(jiǎn)單來(lái)說(shuō)，就是在瀏覽器滾動(dòng)到某個(gè)位置在觸發(fā)相關(guān)的函數(shù)，實(shí)現(xiàn)頁(yè)面元素的加載或者某些動(dòng)作的執(zhí)行。如何實(shí)現(xiàn)瀏覽器滾動(dòng)位置的檢測(cè)呢？可以通過(guò)一個(gè)定時(shí)器來(lái)實(shí)現(xiàn)，通過(guò)比較某一時(shí)刻頁(yè)面目標(biāo)節(jié)點(diǎn)位置和瀏覽器滾動(dòng)條高度來(lái)判斷是否需要執(zhí)行函數(shù)。

html5 video標(biāo)簽如何在可以在視頻完全加載進(jìn)瀏覽器后執(zhí)行JS函數(shù)？

在js中使用document.getElementById("video")獲取視頻元素，加監(jiān)聽(tīng)addEventListener("ended",

function

()

{

//要執(zhí)行的函數(shù)內(nèi)容

});

最近幾周都在弄這個(gè)

HTML5 js 基礎(chǔ)知識(shí)

res=8hchkv=0chkbd=0chkpc=dp-logid=5743668589539406213dp-callid=0size=c710_u400quality=100vuk=-ft=video)

document表示整個(gè)HTML頁(yè)面，getElementById可能與HTML元素和id有關(guān)。

一旦getElementById通過(guò)id獲取一個(gè)元素，就可以用它來(lái)做些處理。

使用planet.innerHTML屬性可以改變?cè)氐膬?nèi)容。

其中window.onload是在頁(yè)面加載完成之后再調(diào)用init函數(shù)

使用document.createElement("li")來(lái)創(chuàng)建一個(gè)新元素。他會(huì)返回一個(gè)新元素的引用。

play-list_store.js:

playlist.js:

html

知行辦公，專業(yè)移動(dòng)辦公平臺(tái)

【總監(jiān)】十二春秋之， 3483099@qq.com ；

【Master】zelo， 616701261@qq.com ；

【運(yùn)營(yíng)】運(yùn)維艄公， 897221533@qq.com ；****

【產(chǎn)品設(shè)計(jì)】流浪貓， 364994559@qq.com ；

【體驗(yàn)設(shè)計(jì)】兜兜， 2435632247@qq.com ；

【iOS】淘碼小工， 492395860@qq.com ； iMcG33K， imcg33k@gmail.com ；

【Android】人猿居士， 1059604515@qq.com ；思路的頓悟， 1217022114@qq.com ；

【java】首席工程師MR_W， feixue300@qq.com ；

【測(cè)試】土鏡問(wèn)道， 847071279@qq.com ；

【數(shù)據(jù)】fox009521， 42151960@qq.com ；

【安全】保密，你懂的。

html怎么隨機(jī)加載js文件

第一，把多個(gè)文件名放到數(shù)組里面。

第二，利用Math.random生成隨機(jī)數(shù)。

第三，把隨機(jī)數(shù)當(dāng)作數(shù)組的索引值獲取文件名。

第四，獲取到的文件名賦值給script標(biāo)簽的src屬性。

關(guān)于腳本的學(xué)習(xí)，可以去看看HTML5學(xué)堂吧。

html5 js 問(wèn)題

最后的那個(gè) body 請(qǐng)改為 /body

并把前面的 scriptxxx/script 這大塊放到 /body 前面。

因?yàn)槟阍趫?zhí)行 js 的時(shí)候 dom 都沒(méi)有加載呢，所以要放到后面，或者把整個(gè) js 放到 window.onload = function(){xxx}; 里面