摘要:前言是瀏覽器的內(nèi)置腳本語言。避免,在結(jié)構(gòu)生成之前調(diào)用節(jié)點,而產(chǎn)生錯誤
前言
JavaScript是瀏覽器的內(nèi)置腳本語言。當(dāng)網(wǎng)頁中嵌入了JavaScript腳本,瀏覽器加載網(wǎng)頁時,就會執(zhí)行腳本,從而操作瀏覽器,實現(xiàn)各種動態(tài)效果
JavaScript代碼嵌入網(wǎng)頁的方法 1、元素直接嵌入代碼 2、元素加載外部腳本 標簽相關(guān)屬性 type屬性標簽?zāi)J就是JavaScript代碼,嵌入javascript腳本時,type屬性可以省略
如果type屬性的值,瀏覽器不認識,就不會執(zhí)行其中的代碼,所以可以在標簽中嵌入任意的文本內(nèi)容,只要加上一個瀏覽器不認識的type屬性就行,瀏覽器不會執(zhí)行也不會顯示它的內(nèi)容,但是這個節(jié)點依然存在于DOM之中,可以使用節(jié)點的text屬性讀取它的內(nèi)容
defer屬性defer屬性的運行流程:
瀏覽器開始解析HTML網(wǎng)頁
解析過程中,發(fā)現(xiàn)帶有defer屬性的元素
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁,同時并行下載元素加載的外部腳本
瀏覽器完成解析HTML網(wǎng)頁,此時再回過頭執(zhí)行已經(jīng)下載完成的腳本
需要注意:
異步加載資源
按照順序執(zhí)行腳本
使用defer加載的外部腳本不應(yīng)該使用document.write方法
async屬性async屬性的運行流程:
瀏覽器開始解析HTML網(wǎng)頁
解析過程中,發(fā)現(xiàn)帶有async屬性的標簽
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁,同時并行下載標簽中的外部腳本
腳本下載完成,瀏覽器暫停解析HTML網(wǎng)頁,開始執(zhí)行下載的腳本
腳本執(zhí)行完畢,瀏覽器恢復(fù)解析HTML網(wǎng)頁
需要注意:
異步加載資源
并不會按照順序執(zhí)行JS,誰先下載完,誰就先執(zhí)行
使用async加載的外部腳本不應(yīng)該使用document.write方法
async和defer屬性歸納都能解決“阻塞效應(yīng)”
都是異步加載資源,但執(zhí)行順序不一樣
如果腳本之間沒有依賴關(guān)系,就使用async屬性,如果腳本之間有依賴關(guān)系,就使用defer屬性
Load事件瀏覽器已經(jīng)加載了所有依賴的資源,包括圖片樣式表等
可以在load事件觸發(fā)時獲得圖片的大小
綁定到window,window.addEventListener("load",ready);
DOMContentLoaded事件瀏覽器已經(jīng)完全加載了HTML,DOM樹已經(jīng)構(gòu)建完畢
JS可以訪問所有DOM節(jié)點,但是圖片和樣式表等外部資源可能沒有下載完畢
綁定到document:document.addEventListener("DOMContentLoaded",ready);
涉及到async的知識點異步async腳本一定會在頁面load事件之前執(zhí)行
異步async腳本可能會在DOMContentLoaded事件觸發(fā)之前或者之后執(zhí)行
動態(tài)生成腳本["a.js", "b.js"].forEach(src => { const script = document.createElement("script"); script.src = src; script.async = false; document.head.appendChild(script); });
不會阻塞頁面渲染
async設(shè)置為false可以保證b.js在a.js后面執(zhí)行
在這段代碼后面加載的腳本文件,會等在b.ja執(zhí)行完成后再執(zhí)行
相關(guān)知識點總結(jié)包含在標簽內(nèi)部的JavaScript代碼,將被從上到下一次解析
無論以哪種方式嵌入代碼,只要不存在defer和async屬性,瀏覽器都會按照標簽在頁面中出現(xiàn)的先后順序?qū)λ鼈冞M行解析
加載外部腳本的優(yōu)點:可維護性、可緩存、適應(yīng)未來
放在底部的原因1、避免“阻塞效應(yīng)”。2、避免,在DOM結(jié)構(gòu)生成之前調(diào)用DOM節(jié)點,而產(chǎn)生錯誤
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/95231.html
摘要:前言是瀏覽器的內(nèi)置腳本語言。避免,在結(jié)構(gòu)生成之前調(diào)用節(jié)點,而產(chǎn)生錯誤 前言 JavaScript是瀏覽器的內(nèi)置腳本語言。當(dāng)網(wǎng)頁中嵌入了JavaScript腳本,瀏覽器加載網(wǎng)頁時,就會執(zhí)行腳本,從而操作瀏覽器,實現(xiàn)各種動態(tài)效果 JavaScript代碼嵌入網(wǎng)頁的方法 1、元素直接嵌入代碼 function sayHello() { alert(hello!); ...
摘要:對其的解釋為概述監(jiān)視一個對象的某個屬性是否發(fā)生變化在該屬性變化時立即觸發(fā)指定的回調(diào)函數(shù)語法參數(shù)想要監(jiān)視值是否發(fā)生變化的指定對象的某個屬性的屬性名稱當(dāng)指定的屬性發(fā)生變化時執(zhí)行的回調(diào)函數(shù)在內(nèi)查看其聲明如下可以看到這兩個方法是只針對內(nèi)核的瀏覽器使 MDN 對其的解釋為: 概述: 監(jiān)視一個對象的某個屬性是否發(fā)生變化,在該屬性變化時立即觸發(fā)指定的回調(diào)函數(shù). 語法: object....
摘要:如果存在一個同名的全局變量,這個全局變量也不會被重寫,除非同名的局部變量被聲明時使用關(guān)鍵字。 博客原文地址:Claiyre的個人博客 https://claiyre.github.io/博客園地址:http://www.cnblogs.com/nuannuan7362/如需轉(zhuǎn)載,請在文章開頭注明原文地址------------------------------------------...
摘要:注意事項聲明函數(shù)時候處理業(yè)務(wù)邏輯區(qū)分和單例的區(qū)別,配合單例實現(xiàn)初始化構(gòu)造函數(shù)大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設(shè)計模式] 常見設(shè)計模式 一直對設(shè)計模式不太懂,花了一下午加一晚上的時間,好好的看了看各種設(shè)計模式,并總結(jié)了一下。 設(shè)計模式簡介 設(shè)計模式概念解讀 設(shè)計模式的發(fā)展與在JavaScript中的應(yīng)用 ...
閱讀 1453·2021-09-28 09:44
閱讀 2519·2021-09-28 09:36
閱讀 1189·2021-09-08 09:35
閱讀 1992·2019-08-29 13:50
閱讀 820·2019-08-29 13:29
閱讀 1142·2019-08-29 13:15
閱讀 1735·2019-08-29 13:00
閱讀 3003·2019-08-26 16:16