蜜桃av色欲a片精品一区,麻豆aⅴ精品无码一区二区,亚洲人成网站在线播放影院在线,亚洲 素人 字幕 在线 最新

Edge加載過程中自動(dòng)3次刷新？

頁面加載時(shí)，大致可以分為以下幾個(gè)步驟：

1. 　　開始解析HTML文檔結(jié)構(gòu)
2. 　　加載外部樣式表及JavaScript腳本
3. 　　解析執(zhí)行JavaScript腳本
4. 　　DOM樹渲染完成
5. 　　加載未完成的外部資源（如 圖片）
6.        頁面加載成功

　　那么在這整個(gè)過程中觸發(fā)了哪些常用的事件呢？

document readystatechange事件

　　readyState 屬性描述了文檔的加載狀態(tài)，在整個(gè)加載過程中 document.readyState會(huì)不斷變化，每次變化都會(huì)觸發(fā)readystatechange事件。

　　readyState 有以下狀態(tài)：

　　　　loading / 加載document 仍在加載。

　　　　interactive / 互動(dòng)文檔已經(jīng)完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載。

　　　　complete / 完成T文檔和所有子資源已完成加載。狀態(tài)表示 load 事件即將被觸發(fā)。

　　比如說在步驟2的時(shí)候?qū)?yīng) interactive   步驟5之后對(duì)應(yīng)complete ，都會(huì)觸發(fā)readystatechange事件。

　　PS:文檔，圖片等加載時(shí)的readyState 和 XMLHttpRequest.readyState 是不一樣的。要注意區(qū)分

document DOMContentLoaded事件

　　DOM樹渲染完成時(shí)觸發(fā)DOMContentLoaded事件，此時(shí)可能外部資源還在加載。 jquery中的ready事件就是同樣的效果

window load事件

　　所有的資源全部加載完成會(huì)觸發(fā)window 的 load事件。

實(shí)例

  <h1>測(cè)試頁面加載時(shí)，事件觸發(fā)次序</h1> <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt=""> <h1>測(cè)試頁面加載時(shí)，事件觸發(fā)次序</h1> <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt=""> <h1>測(cè)試頁面加載時(shí)，事件觸發(fā)次序</h1> <script type="text/javascript"> console.log(\’resolve body JavaScript\’);
   
    window.addEventListener(\’load\’,function(){
      console.log(\’window load\’);
    })

    document.addEventListener(\’readystatechange\’,function(){
      console.log(\’document \’ + document.readyState);
    })

    document.addEventListener(\’DOMContentLoaded\’,function(){
      console.log(\’document DOMContentLoaded\’);
    }) //document 沒有l(wèi)oad事件?? document.addEventListener(\’load\’,function(){
      console.log(\’document load\’);
    }) </script>

在chrome中的日志輸出如下：

　　resolve body JavaScript --> document interactive -->  document DOMContentLoaded --> document complete -->  window load 

　　完全符合預(yù)期有木有。所以在只需要文檔結(jié)構(gòu)加載完成就可以執(zhí)行的腳本，可以監(jiān)聽DOMContentLoaded ；需要所有內(nèi)容都加載完成才能執(zhí)行的腳本，要監(jiān)聽window.onload  或者 document.readyState === \’complete\’?！?

  業(yè)務(wù)實(shí)施流程