美文网首页前端知识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的生命周期

    从大前端的角度来讲每个页面都有生命周期,iOS有view生命周期,web页面同样也有生命周期;so, 问题来啦,w...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 【编程学习】前端开发精华课程免费集锦

    一、Web前端工程师成长第一阶段(基础篇) 二、Web前端工程师成长第二阶段(布局篇) 三、前端经典案例集萃之“图...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • 技术文章地址

    Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础 前端工程师必备的PS技能—切图篇 前端入门方法 A...

  • 好程序员web前端培训分享HTML基础篇

    好程序员web前端培训分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊...

  • web前端入坑第四篇:你还在用 jQuery?

    先来补齐【web前端入坑系列】前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web...

  • 零基础web前端学习路线,前端入门到精通

    零基础怎么学web前端?下面就跟着小编一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学...

网友评论

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

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