前端面试基础必备JS学习笔记

页面生命周期：DOMContentLoaded, load, b

2018-08-26  本文已影响6人  puxiaotaoc

HTML页面的生命周期有以下三个重要事件：
1）DOMContentLoaded：浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像<img>和样式表等外部资源可能并没有下载完毕，此时DOM加载完毕，所以js可以访问所有DOM节点，初始化界面；
2）load：浏览器已经加载了所有的资源（图像、样式表等），此时附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）；
3）beforeunload/unload：当用户离开页面的时候触发，此时用户正在离开页面，可以询问用户是否保存了更改以及是否确定要离开页面；

一、DOMContentLoaded
DOMContentLoaded由document对象触发；
我们使用addEventListener来监听它：

<script>
// 在这个例子中DOMContentLoaded在document加载完成后就被触发，无需等待其他资源的载入，所以alert输出的图像大小为0
  function ready() {
    alert('DOM is ready');
    // image is not yet loaded (unless was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }
  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

二、DOMContentLoaded和脚本
当浏览器在解析HTML页面时遇到了<script>...</script>标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本，所以DOMContentLoaded有可能在所有脚本执行完毕后触发；
外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以DOMContentLoaded也会等待外部脚本；
不过有两个例外是带async和defer的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验；

async和defer属性仅仅对外部脚本起作用，并且他们在src不存在时会被自动忽略；

它们都告诉浏览器继续处理页面上的内容，而在后台加载脚本，然后在脚本加载完毕后再执行，所以脚本不会阻塞DOM树的构建和页面的渲染；

（译注：其实这里是不对的，带有async和defer的脚本的下载是和HTML的下载与解析是异步的，但是js的执行一定是和UI线程是互斥的，像下面这张图所示，async在下载完毕后的执行会阻塞HTML的解析）


defer/async的区别 
<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't not execute until the stylesheet is loaded
  // 脚本直到样式表加载完毕后才会执行。
  alert(getComputedStyle(document.body).marginTop);
</script>

发生这种事情的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性，所以他们自然要等到样式加载完毕才可以执行；这就导致DOMContentLoaded需要等待脚本的执行，脚本又需要等待样式的加载；

三、浏览器的自动补全

四、window.onload对象

window.onload = function() {
    alert('page loaded');
    alert(`Image size: ${img.offsetWidth}*${img.offsetHeight}`); // Image size:177*160
}

五、window.onunload事件

六、window.onbeforeunload事件

window.onbeforeunload = function(){
    return "There are unsaved changes.leave now?";
  }

有些浏览器像chrome和火狐会忽略返回的字符串取而代之显示浏览器自身的文本，这是为了安全考虑，来保证用户不受到错误信息的误导；
七、readyState事件

// 检查document.readyState的状态，如果没有就绪可以选择挂载事件，如果已经就绪了就可以直接立即执行；
function work() { /*...*/ }
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', work);
  } else {
    work();
  }

// 每当文档的加载状态改变的时候就有一个readystatechange事件被触发，所以我们可以打印所有的状态
// current state
  console.log(document.readyState);

// print state changes
  document.addEventListener('readystatechange', () => console.log(document.readyState));

八、readystatechange的在各个事件中的执行顺序

<script>
  function log(text) { /* output the time and message */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

[1] initial readyState:loading
[2] readyState:interactive
[2] DOMContentLoaded
[3] iframe onload
[4] readyState:complete
[4] img onload
[4] window onload

九、总结
       1）同步的JavaScript脚本最先执行，它先于DOMContentLoaded事件执行；
       2） DOMContentLoaded事件在DOM树构建完毕后被触发，可以在这个阶段使用js去访问元素，此时async和defer脚本可能还没有执行，图片及其他资源文件可以有还在下载中；
       3）window.onload事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久；
       4）window.beforeunload在用户即将离开页面时触发，它会返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开；
       5）window.unload事件，当用户最终离开时会触发该事件，在unload的事件处理程序中，我们只能做简单的事情，不涉及延迟或询问用户，由于这个限制，它很少使用；
       5）document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态；
            ①uninitialized：页面还未开始载入；
            ②loading：页面正在加载中；
            ③interactive：页面解析完毕，时间上和DOMContentLoaded同时发生，不过顺序在它之前；
            ④complete：页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前；

上一篇 下一篇

猜你喜欢

热点阅读