Javascript学习之路：事件在页面加载和关闭时的执行顺序

前言

在实际项目中，如果我想在打开浏览器页面加载时执行某些任务，比如获取当前页面的全部或部分数据，优先想到的事件是onload，当关闭页面时，我们也常常会使用onunload事件。但是这两个事件却有一定的局限性，如果第一次加载页面时，onload事件一定会执行，而如果页面从缓存中获取，onload事件则无法执行；比如使用onunload事件，关闭页面时，页面是不会保存在缓存中的；又比如，我想在页面加载解析完，但是外部资源（图片，文件，视频，iframe，脚本，样式表等）还在加载中就去执行某些任务又应该怎么办？下面本文将为大家一一阐述资源状态型事件们，希望走过，路过的同行大神们多多指点。

今天，我要阐述的资源状态型事件有6个，按照执行先后排序分别是

• DOMContentLoaded
• load
• pageshow
• beforeunload
• pagehide
• unload

1. DOMContentLoaded事件

• 网页下载并解析完成以后，所有外部资源（样式表、脚本、iframe 等等）还没有下载时执行。
• 这时，页面的dom树已经生成，所以浏览器会在document对象上触发 DOMContentLoaded 事件。
• 案例

  document.addEventListener('DOMContentLoaded', function (event) {
      console.log('执行任务');
  });
  

2. load事件

• load事件，页面和资源加载成功触发，页面或资源从浏览器缓存获取，则不会执行该事件
• 案例

  window.addEventListener('load', function(event) {
     console.log('所有资源都加载完成');
   });
  

• error在页面或资源加载失败时触发

  window.addEventListener('error', function(event) {
   console.log('资源加载失败');
  });
  

3. pageshow 事件

• pageshow事件在页面第一次加载和从缓存中加载时都可以触发。而load事件，DOMContentLoaded事件只有在页面第一次加载时才会执行。因为缓存中的样子通常是load事件的监听函数运行后的样子，所以浏览器的渲染机制认为没必要重复执行，当然初始化的javascript脚本也不会执行。
• 也可以理解为该事件只在浏览器的history对象发生变化时触发
• persisted事件对象的属性，返回的数据类型是布尔值，返回false是第一次加载，返回true，是从缓存中加载。
• 案列

  getList(){
      alert("初始化加载数据")
  }
    window.addEventListener('pageshow',function(e)
       if(e.persisted){ 
           getList()
       }
   })
  

4.beforeunload事件

• beforeunload事件在窗口，文档，各种资源将要卸载时触发，可以用来防止客户端不小心卸载资源。

• returnValue 对象属性，浏览器就会弹出一个二次确认框，询问客户端是否需要卸载该资源，returnValue如果是非空字符串，那么则为客户端指定的内容，点击取消，资源就不会卸载。

• 但是需要注意的是，大多数浏览器在对话框中只显示默认文本，无论是否设置returnValue，有的浏览器调用event.preventDefault()，也会弹出对话框。

• 案例

   window.addEventListener('beforeunload', function (e) {
         var  message = '确认关闭窗口？';
         e.returnValue = message;
     return message;
    })
  

• 一旦使用了beforeunload事件修改初始状态，浏览器就不会缓存当前网页

5.pagehide事件

• 它与unload事件的区别在于，如果在window对象上定义unload事件的监听函数之后，页面不会保存在缓存中，而使用pagehide，可以控制页面保是否存在缓存中

• persisted事件属性

  • 设置true，就表示页面要保存在缓存中
  • 设置false，网页不保存在网页中

• 案例

  window.addEventListener('pagehide', function(event){  
  });
  

6.unload事件

• unload事件在窗口关闭或者document对象将要卸载时触发
• unload事件触发，文档处于特殊的状态，所有资源依然存在，但是对用户来说，是看不见的，用户交互会全部无效，这个事件也无法取消，即使在监听函数里面抛出错误，也不能停止文档的卸载。
• 一旦使用了unload事件，浏览器就不会缓存当前网页
• 案例

  window.addEventListener('unload',function(event){
  	alert('文档将要卸载')
  })