[JavaScript基礎(chǔ)] JSON 異步加載 JS時(shí)間線

JSON

一種數(shù)據(jù)格式,也是一種對(duì)象。在對(duì)象的語法中,屬性名引號(hào)可加可不加,但在JSON語法中,屬性必須加引號(hào)

{
  "name" : "Tom",
  "age" : 10
}

字符串轉(zhuǎn)化為JSON String-->JSON
JSON.parse()

JSON轉(zhuǎn)化為字符串 JSON-->String
JSON.stringify()

異步加載

JavaScript異步加載
  1. defer 要等到dom文檔全部解析完后執(zhí)行。只有IE可用,也可以把代碼寫到內(nèi)部
<script type="text/javascript" src="index.js" defer="defer"></script>
<script type="text/javascript" defer="defer">
  console.log("JSON")
</script>
  1. async 加載完就執(zhí)行,只能加載外部腳本,不能把JS寫在script標(biāo)簽里。IE9以上
<script type="text/javascript" src="index.js" async="async"></script>
  1. 創(chuàng)建script,插入DOM;
var script = document.createElement("script");
script.type = "text/javascript";
script.src= "demo.js"
document.head.appendChild(script)
.....

JS時(shí)間線

  1. 創(chuàng)建Document對(duì)象,并解析web頁面。解析HTML元素和他們的文本內(nèi)容后添加Element對(duì)象和Text節(jié)點(diǎn)到文檔中。
  2. 遇到link外部CSS,創(chuàng)建線程加載,并繼續(xù)解析文檔。
  3. 遇到script外部JS,并頁沒有設(shè)置async、defer,瀏覽器加載,并阻塞,等待js加載完成后并執(zhí)行該腳本,然后繼續(xù)解析文檔。
  4. 遇到script外部JS,并且設(shè)置有async、defer,瀏覽器創(chuàng)建線程加載,并繼續(xù)解析文檔。對(duì)于async屬性的腳本,腳本加載完成后繼續(xù)執(zhí)行。(異步禁止使用document.write()
  5. 遇到img等,先正常解析DOM結(jié)構(gòu),然后瀏覽器異步加載src,并繼續(xù)解析文檔。
  6. 當(dāng)文檔解析完成,document.readyState = "interactive";
  7. 文檔解析完成后,所有設(shè)置有defer的腳本會(huì)按照順序執(zhí)行。(注意與async的不同,但同樣禁止使用document.write()
  8. document對(duì)象觸發(fā)DOMContentLoaded事件,這也標(biāo)志著程序執(zhí)行從同步腳本執(zhí)行階段,轉(zhuǎn)化為事件驅(qū)動(dòng)階段。
  9. 當(dāng)所有async的腳本加載完成并執(zhí)行后,img等加載完成后,document.readyState = "complete", window對(duì)象觸發(fā)事件。
  10. 從此,以異步相應(yīng)方式處理用戶輸入、網(wǎng)絡(luò)事件等。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文總結(jié)一下瀏覽器在 javascript 的加載方式。關(guān)鍵詞:異步加載(async loading),延遲加載(...
    4ea0af17fd67閱讀 1,115評(píng)論 0 2
  • 首先我們先來看一下Script標(biāo)簽的各項(xiàng)屬性: script標(biāo)簽也支持HTML中的全局屬性: 下面我們來看看一看j...
    tobAlier閱讀 1,269評(píng)論 0 2
  • json JSON是一種傳輸數(shù)據(jù)的格式(以對(duì)象為樣板,本質(zhì)上就是對(duì)象,但用途有區(qū)別,對(duì)象就是本地用的,json是用...
    浮巷舊人閱讀 461評(píng)論 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,806評(píng)論 1 45
  • Tif_Lib閱讀 502評(píng)論 0 1

友情鏈接更多精彩內(nèi)容