WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

2024年4月15日 205次阅读 来源: 毛瑞

简言

明白WEB页面的生命周期，文档加载事宜及递次对WEB开辟有非常的重要意义。假如不明白，在元素未加载就提早操纵元素，则得不到想要的效果。而假如页面完整加载完成后，再举行操纵，则又会影响用户体验。

平常来说，大多数的操纵我们都应当放在DOMContentLoaded事宜中实行。采纳以下情势：

document.addEventListener('DOMContentLoaded', function () {
    alert("DOMContentLoaded");
});

当初始的 HTML 文档被完整加载和剖析完成以后，DOMContentLoaded 事宜被触发，而无需守候样式表、图象和子框架的完成加载。

申明

明白WEB页面的生命周期，文档加载事宜及递次对WEB开辟有非常的重要意义。用过JQuery都晓得，我们大多将代码写在$(document).ready()中，当文档加载完成后，就会实行该函数。假如不如许做，在文档未加载完成之前操纵DOM，就得不到想要的效果。

演示顺序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-Html页面的生命周期,DOMContentLoaded,load,beforeunload,unload</title>
</head>
<body>
<div id="main"></div>
<iframe src="http://res.42du.cn/static/html/iframe.html" height="35" onload="append('iframe onload')"></iframe>
<div><img src="http://res.42du.cn/up/201802/cbbtiga6.jpg?cache=none" onload="append('image onload')"></div>
<script>
    var output = "";
    function print() {
        document.getElementById("main").innerHTML += output;
    }
    function append(data) {
        output += data+" <br />";
    }
    document.addEventListener('readystatechange', function () {
        append("readyState : "+document.readyState);
    });
    document.addEventListener('DOMContentLoaded', function () {
        append("DOMContentLoaded");
    });
    window.onload = function () {
        append("window onload");
        print();
    };
    append("script executed");
</script>
</body>
</html>

从演示顺序运转效果，得出平常浏览器的加载递次以下：

  • script executed
  • readyState : interactive
  • DOMContentLoaded
  • image onload
  • iframe onload
  • readyState : complete
  • window onload

从以上能够看出同步的Script老是先于别的事宜实行，而window.onload事宜老是末了实行。而image onload和iframe onload的先后递次并不肯定。

结论

关于WEB页面的生命周期，平常你应当记着以下这些看法，一些看法从运转效果中也能够得出。

  • 同步的JavaScript剧本最早实行，它先于DOMContentLoaded事宜实行。

  • 当DOM预备就绪时，DOMContentLoaded事宜在document上触发。 我们能够在这个阶段应用JavaScript来操纵DOM元素。

    • 一切剧本都实行终了，除了那些外部运用异步（async）或耽误（defer）加载的剧本
    • 图片和其他资本能够仍在载入过程当中。
  • window上的onload事宜，在页面加载完一切资本后触发。 我们很少运用它，因为一般的操纵不必比及末了才实行。
  • window上的beforeunload事宜，该事宜在用户预备脱离页面，在unload事宜之前触发。 假如beforeunload返回一个字符串，浏览器会给出 用户是不是真的想脱离的提醒。
  • window上的unload事宜，当用户终究脱离时会触发该事宜。在unload的事宜处置惩罚顺序中，我们只能做简朴的事变，不触及耽误或讯问用户。 因为这个限定，它很少运用。

  • document.readyState示意文档的当前状况，能够在readystatechange事宜中跟踪文档状况的变动。

    • loading – 文档正在载入。
    • interactive – document已剖析终了时触发，险些与DOMContentLoaded同时发生，但在DOMContentLoaded事宜之前触发。
    • complete – 文档和资本加载完成时触发，险些与window.onload同时发生，但在onload事宜之前触发。

平常来说，大多数的操纵我们都应当放在DOMContentLoaded事宜中实行，而不要放在window.onload中实行。

42度空间-在线演示顺序

    原文作者：毛瑞
    原文地址: https://segmentfault.com/a/1190000013378419
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞