介绍

对于前端开发来说，浏览器的渲染到卸载时机来做某些事件处理是很必要的，对于前端来说load就比较常用了，在以前jq时代用来在dom加载结束以后来请求ajax数据渲染页面的数据，所以有必要了解浏览器的渲染到卸载中会触发哪些window事件

渲染顺序：readyState loading ⇒ readyState interactive ⇒ DOMContentLoaded ⇒ readyState complete ⇒ load ⇒ pageshow

卸载顺序: beforeUnload ⇒ pagehide ⇒ unload

页面可视区：visibilitychange

页面渲染

readyStateChange

Document.readyState属性描述了document的加载状态，当属性变化时触发readystatechange事件

一个文档的readyState可以是以下之一:

loading: document仍然在加载

interactive：文档已被解析，loading状态结束，但是图像、样式表和框架之类的子资源仍在加载

complete：文档和所有子资源已完成加载，表示load状态的事件即将被触发

switch (document.readyState) {
  case "loading":
    // 表示文档还在加载中，即处于“正在加载”状态。
    break;
  case "interactive":
    // 文档已经结束了“正在加载”状态，DOM 元素可以被访问。
    // 但是像图像，样式表和框架等资源依然还在加载。
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 页面所有内容都已被完全加载。
    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
    console.log(`The first CSS rule is: ${CSS_rule }`);
    break;
}

DOMContentLoaded

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载

document.addEventListener('DOMContentLoaded',function(){
    console.log('HTML文档加载解析完成');
});

Load

当整个页面及所有依赖资源如样式表和图片都已完成加载时触发Load事件

与DOMContentLoaded不同，后者需要页面DOM加载完成就触发，无需等待依赖资源的加载

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

pageShow

当一条会话历史记录被执行的时候会触发页面展示(pageshow)事件，包括后退/前进按钮操作，同时会在load事件触发后初始化页面时触发

window.addEventListener('load', function() {
    console.log('before');
});

window.addEventListener('pageshow', function(event) {
    console.log('after , pageshow :',event);
});

页面卸载

beforeUnload

当浏览器窗口关闭或者刷新时触发beforeUnload事件，当前页面不会直接关闭，而是会弹出一个浏览器弹窗提示用户是否刷新或者关闭

事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

PageHide

当浏览器在显示与会话历史记录不同的页面过程中隐藏当前页面时，pagehide页面隐藏事件会被发送到window，当用户点击浏览器回退按钮时，当前页面在显示上一页之前会受到一个pagehide隐瞒隐藏事件

window.addEventListener("pagehide", event => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}, false);

unLoad

当文档或者子资源正在被卸载时触发unload事件

文档处于以下状态：

所有资源仍存在 (图片，iframe 等.)
对于终端用户所有资源均不可见
界面交互无效 (window.open, alert, confirm 等.)
错误不会停止卸载文档的过程

window.addEventListener('unload', function(event) {
        console.log('I am the 3rd one.');
});

页面可视切换

visibilitychange

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange(能见度更改) 事件

在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload 或 pagehide 事件。下面列出了一种不触发上述事件的情况：

用户加载了网页并与其交互。
完成浏览后，用户切换到了其它应用程序，而不是关闭选项卡。
随后，用户通过手机的应用管理器关闭了浏览器应用。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    // visible 文档可见时触发
    console.log("page is visible")
  } else {
    // hidden 文档不可见时触发
    console.log("page is hidden")
  }
});

浏览器页面的渲染和卸载

介绍