美文网首页前端知识web前端
Web前端基础篇-HTML-02-HTML的生命周期

Web前端基础篇-HTML-02-HTML的生命周期

作者: 摸着石头过河_崖边树 | 来源:发表于2020-05-10 22:31 被阅读0次

    从大前端的角度来讲每个页面都有生命周期,iOS有view生命周期,web页面同样也有生命周期;
    so, 问题来啦,web生命周期我们怎么监测呢?
    答:生命周期会固定执行某一些方法(函数),我们只要监听函数就可以啦


    tmpdir__17_9_7_15_04_07.jpg

    生命周期执行函数顺序:

    1、DOMContentLoaded-页面开始加载
    2、load-页面完全加载
    3、beforeunload-页面离开前
    4、unload-页面完成离开
    同时您可以直接监听readystatechange -监听页面加载的状况

    1、DOMContentLoaded-页面开始加载

    浏览器已经完全加载了HTML、DOM树已经构建完毕, 但是像是图片、资源和样式表等外部资源可能并没有下载完毕
    \color{red}{DOM加载完毕,所以js可以访问所有DOM节点,初始化界面}

    DOMContentLoaded注意事项:

    A. HTML页面时遇到了js标签,将无法继续构建DOM树。 UI渲染线程与JS引擎是互斥的,当JS引擎执行时UI线程会被挂起,必须立即执行脚本

    B. HTML页面时遇到了外部脚本js,也会暂停DOM树构建,所以 DOMContentLoaded 也会等待外部脚本;

    C.因此为了不阻塞DOM树的构建和页面的渲染,\color{red}{所以引入async和defer}

    2、load-页面完全加载

    浏览器已经加载了所有的资源(图像,样式表等)
    \color{red}{附加资源已经加载完毕,可以在此事件触发时获得图像的大小}

    3、beforeunload-页面离开前

    如果用户即将离开页面或者关闭窗口时,可以询问用户是否保存了更改以及是否确定要离开页面

    4、unload-页面完成离开

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

    5、额外可以监听readystatechange:监听页面加载的状况

    A.loading 加载中
    B.interactive 互动 - 文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载
    C.complete - 文档和所有子资源已完成加载。状态表示 load 事件即将被触发

    监听方法

     document.addEventListener('DOMContentLoaded', function () {
        console.log('页面开始加载------DOMContentLoaded');
    });
    window.onload = function() {
        console.log('页面完全加载------onload');
        this.getWindowWidthHeight();
    };
    window.onbeforeunload = ()=>{
        console.log('页面离开前------onbeforeunload');
    };
    window.onunload = ()=>{
        console.log('页面完成离开------onunload');
    };
    
    document.addEventListener('readystatechange', function () {
        console.log('页面当前状态-----readyState=',document.readyState);
    });
    

    结果:

    页面开始加载------DOMContentLoaded
    页面当前状态-----readyState= complete
    页面完全加载------onload

    H5系列
    Web前端基础篇-HTML-01-BOM浏览器对象模型
    Web前端基础篇-HTML-02-HTML的生命周期
    Web前端基础篇-HTML-03-事件处理系统
    Web前端基础篇-HTML-04-HTML 渲染流程
    Web前端基础篇-HTML5-05-最全本地存储总结
    Web前端基础篇-HTML5-06-离线缓存AppCache
    Web前端基础篇-HTML5-07-浏览器缓存机制

    相关文章

      网友评论

        本文标题:Web前端基础篇-HTML-02-HTML的生命周期

        本文链接:https://www.haomeiwen.com/subject/leosnhtx.html