html常见的生命周期钩子

        window.addEventListener('resize', function() {
            console.log('获取或设置当前窗口的resize事件的事件处理函数')
        })

        window.addEventListener('pageshow', function (e) {
            console.log('当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)')
            if (e.persisted) 
                console.log('网页来自缓存.')
        })

        document.onreadystatechange = function() {
            if (document.readyState == "loading")
                console.log('浏览器正在加载和处理此文档')
            if (document.readyState == "interactive")
                console.log('文档已被解析，但浏览器还在加载其中的链接资源(图像和媒体文件等)')
            if (document.readyState == "complete")
                console.log('文档已被解析，所有的资源也加载完毕')
        }

        document.addEventListener('DOMContentLoaded', function() {
            console.log('当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。')
        })

        window.addEventListener('load', function() {
            console.log('当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。')
        })