JavaScript ：web页面生命周期与Dom生命周期

页面生命周期

HTML页面的生命周期有以下三个重要事件：

DOMContentLoaded — 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是和样式表等外部资源可能并没有下载完毕。
用途:

DOMContentLoaded - DOM加载完毕，所以js可以访问所有DOM节点，初始化界面。
load — 浏览器已经加载了所有的资源（图像，样式表等）。
用途:

load - 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）
beforeunload/unload -- 当用户离开页面的时候触发。
用途:

beforeunload/unload -- 用户正在离开页面：可以询问用户是否保存了更改以及是否确定要离开页面。

DOMContentLoaded

DOMContentLoaded 由 document 对象触发。

我们使用 addEventListener 来监听它。

document.addEventListener("DOMContentLoaded", ready);

DOMContentLoaded在document加载完成后就被触发，无需等待其他资源的载入。

这么看来DOMContentLoaded 似乎很简单，DOM树构建完毕之后就运行该事件，不过其实存在一些陷阱。

DOMContentLoaded 和脚本

当浏览器在解析HTML页面时遇到了标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。

外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。

不过有两个例外是带async和defer的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验。

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

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

async与defer他们有两处不同——顺序

带有async的脚本是优先执行先加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序。
带有defer的脚本按照他们在页面中出现的顺序依次执行。

DOMContentLoaded 带有async的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小或本缓存，并且页面很大的情况下发生。带有defer的脚本会在页面加载和解析完毕后执行，刚好在 DOMContentLoaded之前执行。所以async用在那些完全不依赖其他脚本的脚本上。

DOMContentLoaded and styles

外部样式表并不会影响DOM，所以DOMContentLoaded并不会被他们阻塞。不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。发生这种事的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。

DOMContentLoaded需要等待脚本的执行，脚本又需要等待样式的加载。

浏览器的自动补全

Firefox, Chrome和Opera会在DOMContentLoaded执行时自动补全表单。

例如，如果页面有登录的界面，浏览器记住了该页面的用户名和密码，那么在 DOMContentLoaded运行的时候浏览器会试图自动补全表单（如果用户设置允许）。

所以如果DOMContentLoaded被一个需要长时间执行的脚本阻塞，那么自动补全也会等待。你也许见过某些网站（如果你的浏览器开启了自动补全）—— 浏览器并不会立刻补全登录项，而是等到整个页面加载完毕后才填充。这就是因为在等待DOMContentLoaded事件。

使用带async和defer的脚本的一个好处就是，他们不会阻塞DOMContentLoaded和浏览器自动补全。（译注：其实执行还是会阻塞的）

window.onload

window对象上的onload事件在所有文件包括样式表，图片和其他资源下载完毕后触发。

下面的例子正确检测了图片的大小，因为window.onload会等待所有图片的加载。

<script>
  window.onload = function() {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

window.onunload

用户离开页面的时候，window对象上的unload事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上。

所以我们需要使用另一个事件 — onbeforeunload。

window.onbeforeunload

如果用户即将离开页面或者关闭窗口时，beforeunload事件将会被触发以进行额外的确认。

浏览器将显示返回的字符串，举个例子：

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

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

readyState

如果我们在整个页面加载完毕后设置DOMContentLoaded会发生什么呢？

啥也没有，DOMContentLoaded不会被触发。

有一些情况我们无法确定页面上是否已经加载完毕，比如一个带有async的外部脚本的加载和执行是异步的（注：执行并不是异步的-_-）。在不同的网络状况下，脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行，我们无法确定。所以我们需要知道页面加载的状况。

document.readyState属性给了我们加载的信息，有三个可能的值：

loading 加载 - document仍在加载。
interactive 互动 - 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete - 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。所以我们可以检查 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 是追踪页面加载的一个可选的方法，很早之前就已经出现了。不过现在很少被使用了，为了保持完整性还是介绍一下它。 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

方括号中的数字表示他们发生的时间，真实的发生时间会更晚一点，不过相同数字的时间可以认为是在同一时刻被按顺序触发（误差在几毫秒之内）

document.readyState 在 DOMContentLoaded前一刻变为interactive，这两个事件可以认为是同时发生。 document.readyState 在所有资源加载完毕后（包括iframe和img）变成complete，我们可以看到complete、 img.onload和window.onload几乎同时发生，区别就是window.onload在所有其他的load事件之后执行。

总结：

DOMContentLoaded事件在DOM树构建完毕后被触发，我们可以在这个阶段使用js去访问元素。

async和defer的脚本可能还没有执行。
图片及其他资源文件可能还在下载中。
load事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。
beforeunload在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。
unload在用户已经离开时触发，我们在这个阶段仅可以做一些没有延迟的操作，由于种种限制，很少被使用。
document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态：

loading — 页面正在加载中。
interactive -- 页面解析完毕，时间上和 DOMContentLoaded同时发生，不过顺序在它之前。
complete -- 页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前。

Dom生命周期

Dom变动事件的分类有7种，最常用的浏览器支持最多的有前3种:

DOMSubtreeModified：在DOM结构中发生任何变化时触发；
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发；
DOMNodeRemoved：在节点从其父节点中被移除时触发；
DOMNodeInsertedIntoDocument：在一个节点被直接插入文档中或者通过子树间接插入文档后触发。在DOMNodeInserted之后触发；
DOMNodeRemovedFromDocument：在一个节点被直接从文档中删除或通过子树间接从文档中移除之前触发。在DOMNodeRemoved之后触发。
DOMAttrModified：在特性被修改之后触发；
DOMCharacterDataModified：在文本节点的值发生变化的时候触发。

删除节点

首先触发的是DOMNodeRemoved事件，它对应的event对象中的target属性值是被删除的节点，relatedNode属性值是被删除节点的父节点，该事件会冒泡；

其次出发的是DOMNodeRemovedFromDocument事件，它对应的event对象中的target属性值为指定的被删除的子节点。只有绑定到它的子节点上才能被触发。

最后触发的是DOMSubtreeModified事件。这个事件对应event对象中的target属性是被移除节点的父节点。

// 获取第一子节点(找到第一个不为空的节点)
function getFirstChild(obj){   
    var first = obj.firstChild;
    while(first.nodeType != 1){
        first = first.nextSibling;
    }
    return first;
}
EventUtil.addHandler(window,"load",function(event){
    var list = document.getElementById('myList');
    var btn = document.getElementById("mbtn");
    EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
      console.log(event.type);        //1:DOMNodeRemoved
      console.log(event.target);      //2:ul节点,即被删除的节点
      console.log(event.relatedNode); //3:body节点,即被删除节点的父节点
    })；
    EventUtil.addHandler(getFirstChild(list),"DOMNodeRemovedFromDocument",function(event){
            console.log(event.type)         //4:DOMNodeRemovedFromDocument
            console.log(event.target)       //5:li节点，即<li>item1</li>
    });
    EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
            console.log(event.type);        //6:DOMSubtreeModified
            console.log(event.target);      //7:body节点，即被删除节点的父节点
    })
    EventUtil.addHandler(btn,'click',function(event){
            list.parentNode.removeChild(list);  //
    })
})

dom节点添加

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点的时候：

首先触发DOMInserted事件，它对应的event对象中的target属性为添加的节点，relateNode属性对应被添加节点的父节点。（可冒泡）；

其次触发的是DOMNodeInsertedIntoDocument事件，它对应的event对象中的target属性是添加的节点，只有指定给一个子节点的事件处理程序才会被调用

最后出发的是DOMSubtreeModified事件，它对应的event对象长得target属性值是新节点的父节点。

function getFirstChild(obj){   // 获取第一子节点(找到第一个不为空的节点)
    var first = obj.firstChild;
    while(first.nodeType != 1){
        first = first.nextSibling;
    }
    return first;
}

EventUtil.addHandler(window,"load",function(event){
    var list = document.getElementById('myList');
    var btn = document.getElementById("mbtn");
    var item4 = document.createElement('li');
    var item4Text = document.createTextNode('item4');

    EventUtil.addHandler(document,"DOMNodeInserted",function(event){
        console.log(event.type);        //1:DOMNodeInserted
        console.log(event.target);      //2:li节点，即被添加的节点
        console.log(event.relatedNode); //3:ul节点，即被添加节点的父节点
    });
    
    EventUtil.addHandler(item4,"DOMNodeInsertedIntoDocument",function(event){
        console.log(event.type);        //4:DOMNodeInsertedIntoDocument
        console.log(event.target);      //5:li节点，即被添加的节点<li>item4</li>
    });
      
    EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
        console.log(event.type);        //6:DOMSubtreeModified
        console.log(event.target);      //7:ul节点，即被触发节点的父节点
    })
        
    EventUtil.addHandler(btn,'click',function(){
        item4.appendChild(item4Text);     getFirstChild
        list.replaceChild(item4,getFirstChild(list));
    });
})

posted on 2023-03-10 14:38 梁飞宇阅读(324) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇