Dom相关事件的执行顺序

dom_load_order.user.js

// ==UserScript==
// @name         New Userscript
// @namespace    https://github.com/ipcjs
// @version      0.0.1
// @description  try to take over the world!
// @author       ipcjs
// @match        http://bangumi.bilibili.com/anime/5788/play*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';
    window.addEventListener('load', (...args) => {
        console.log(7, document.readyState, args, document.getElementById('index_nav'));
    });
    window.addEventListener('DOMContentLoaded', (...args) => {
        console.log(5, document.readyState, args, document.getElementById('index_nav'));
    });
    document.addEventListener('readystatechange', (...args) => {
        console.log(1, document.readyState, args, document.getElementById('index_nav'));
    });
    document.addEventListener('DOMContentLoaded', (...args) => {
        console.log(3, document.readyState, args, document.getElementById('index_nav'));
    });

    document.addEventListener('DOMContentLoaded', (...args) => {
        console.log(4, document.readyState, args, document.getElementById('index_nav'));
    });

    window.addEventListener('DOMContentLoaded', (...args) => {
        console.log(6, document.readyState, args, document.getElementById('index_nav'));
    });
    document.addEventListener('readystatechange', (...args) => {
        console.log(2, document.readyState, args, document.getElementById('index_nav'));
    });

    window.addEventListener('load', (...args) => {
        console.log(8, document.readyState, args, document.getElementById('index_nav'));
    });
})();

結論

order	target	event	document.readyState
1	document	readystatechange	interactive
2	document	DOMContentLoaded	interactive
3	window	DOMContentLoaded	interactive
4	document	readystatechange	complete
5	window	load	complete

其中 2 和 3 的關係是因為事件 bubble，根據 whatwg：
DOMContentLoaded 和 這頁

12.2.7 The end

4. Queue a task to run the following substeps:

1. Fire an event named DOMContentLoaded at the Document object, with its bubbles attribute initialized to true.