Html 的生命周期
零、序言
vue 用多了,自然离不开生命周期。最近突发奇想,加上之前看过的文章中关于 script 标签中的 async 和 defer 的捣糨糊,决定整理一下,攻克这个模糊点。
当然,最多的还是与 script 标签相关的前两个周期,后俩个周期并没有过多的复杂点,因此会着重描述前两个。
参考文章:
1.页面生命周期
2.HTML,javascript,image等加载,DOM解析,js执行生命周期
一、页面周期
1.DOMContentLoaded - 浏览器已经加载了 Html, DOM 树已经构建完毕,但是 img 和外部样式表等资源可能还没有下载完毕。
2.load - 浏览器已经完全加载了所有资源。
3.beforeunload - 用户即将离开页面。
4.unload - 用户离开页面。
每一个事件都有特定的用途,前两个如其名,beforeunload 会给用户弹出个确认框,unload 则不会。
二、DOMContentLoaded
DOMContentLoaded 事件由 document 对象触发,我们可以使用 addEventListener 来触发。
正如前文所说,在这个事件触发的时候,我们如果获取某些 img 的宽度和高度的话,得到的可能是0。
当然这里是有陷阱的。
1. 与脚本(<script />)
首先有一点,浏览器的 UI 渲染线程和 JS 引擎是互斥的,当 JS 引擎执行时 UI 线程会被挂起。因此,当浏览器在解析 HTML 时遇到 <script /> 时,将不会继续构建 DOM 树,转而取解析、执行脚本,所以 DOMContentLoaded 有可能在所有脚本执行完毕之后触发。
外部脚本(通过 src 引入)的加载和解析和自带的一样会暂停 DOM 树的构建,这里 DOMContentLoaded 会等待。
不过有两个特殊的情况,如果外部脚本上带有 async 或者 defer 属性,那么浏览器会继续执行 DOM 解析而不需要等待脚本的完全执行,所以这一直时外部脚本的优化方案之一。(async 和 defer 属性仅对外部脚本起作用, 当 src 不存在的时候会被自动忽略)
关于 async 和 defer 与 DOM 的解析顺序如下图所示:
既然提到了 async 和 defer, 也顺带整理一下他们的异同:
async | defer | |
顺序 | 带有 async 的脚本是优先执行先加载完的脚本,即他们在页面中的顺序并不保证他们的执行顺序。 | 带有 defer 的脚本时按照他们在页面中出现的顺序依次执行。 |
DOMContentLoaded | 带有async 的脚本也许会在页面没有完全下载完之前就加载,这种情况会在脚本很小或本缓存,并且页面很大的情况下发生。 |
带有defer 的脚本会在页面加载和解析完毕后执行,刚好在 DOMContentLoaded 之前执行。 |
所以 async 用在完全没有依赖和被依赖的脚本上。
三、load
load 事件是在 window 对象上的,这与 DOMContentLoaded 不同。该事件在所有文件包括样式表,图片和其他资源下载完毕后触发。既然这样规定,自然该干啥干啥,没什么明显的陷阱。
四、beforeunload
如果用户即将离开页面或关闭窗口时,beforeunload 事件将会被触发以进行额外的确认。举个例子:
window.onbeforeunload = function() { return "There are unsaved changes. Leave now?"; };
当然,如果在 chrome 和 firefox 浏览器中会忽略返回的自定义的字符串,这是出于安全考虑的。
五、unload
unload 事件与 load 事件一样,是在 window 对象上的,触发时间为用户关闭该页面的时候,我们可以做一些不存在延时的任务,比如关闭弹层等等。
六、readyState
document.readyState 这个只读属性可以告诉程序当前文档加载到哪一个步骤,它有三个值:
1. loading - 加载,document 仍在加载中;
2. interactive - 互动,文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。
3. complete - 文档和所有子资源已完成加载。状态表示 load
事件即将被触发。
而这个属性的每次改变同样有一个事件可以监听:
document.addEventListener('readystatechange', () => console.log(document.readyState));
不过这个 change 事件很少会被用到,可能出现的地方在某些第三方类库中判断一些依赖关系等地方。不详述,具体可移步文首的文章或者 MDN。
原文地址:https://www.cnblogs.com/cc-freiheit/p/12125687.html
- su: 无法设置用户ID: 资源暂时不可用
- NumPY学习笔记
- LVS负载均衡下session共享的实现方式-持久化连接
- Centos6.9下RabbitMQ集群部署记录
- “AS3.0高级动画编程”学习:第三章等角投影(下)
- zabbix监控主机cpu达到80%后报警
- ssh登陆服务器locale告警的处理方法
- as3.0中如何阻止事件冒泡?
- Nginx+upstream针对后端服务器容错的运维笔记
- MongoDB日常运维操作命令小结
- flash builder代码格式化以及其它快捷键
- Repeater,DataList,DataGrid
- flash/flex builder在IE中stage.stageWidth始终为0的解决办法
- MongoDB集群运维笔记
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客
- 42图揭秘,「后端技术学些啥」
- R-ggTimeSeries | ggplot2: 热力日历图
- R-wordcloud: 词云图
- 直播APP源码是如何实现音视频同步的
- 动态规划算法练习(5)--medium
- phpstudy漏洞分析原因到修复
- 哈?命令注入外带数据的姿势还可以这么骚?
- 记一次曲折的RCE挖掘
- pytest文档49-命令行参数--tb的使用
- pytest文档50-命令行参数--durations统计用例运行时间
- pytest文档51-内置fixture之cache使用
- pytest文档53-命令行实时输出错误信息(pytest-instafail)
- pytest文档52-命令行参数--setup-show查看fixture的执行过程
- pytest文档54-Hooks函数terminal打印测试结果(pytest_report_teststatus)