网站验收模版,网站关键词方案,黄骅市美食,合肥免费招聘网站前言
在使用vue的时代本次项目有个需求#xff0c;就是需要在静态资源未加载时获取当前页面的访问路径#xff0c;所以需要对html页面的生命周期要有所了解。本次讲讲HTML页面的生命周期事件#xff0c;希望对大家有所帮助。如果文中有不对、疑惑的地方#xff0c;欢迎在评…前言
在使用vue的时代本次项目有个需求就是需要在静态资源未加载时获取当前页面的访问路径所以需要对html页面的生命周期要有所了解。本次讲讲HTML页面的生命周期事件希望对大家有所帮助。如果文中有不对、疑惑的地方欢迎在评论区留言指正
一、HTML页面的生命周期
HTML 页面的生命周期包含三个重要事件 DOMContentLoaded —— 浏览器已完全加载 HTML并构建了 DOM 树但样式表之类的外部资源可能尚未加载完成。 load —— 浏览器不仅加载完成了 HTML还加载完成了所有外部资源图片样式等。 beforeunload —— 当用户正在离开页面时。 unload —— 用户几乎已经离开了
二、生命周期的作用 DOMContentLoaded 事件 —— DOM 已经就绪因此处理程序可以查找 DOM 节点并初始化接口。 load 事件 —— 外部资源已加载完成样式已被应用图片大小也已知了。 beforeunload 事件 —— 用户正在离开我们可以检查用户是否保存了更改并询问他是否真的要离开。 unload 事件 —— 用户几乎已经离开了但是我们仍然可以启动一些操作例如发送统计数据。
三、DOMContentLoaded 和脚本
当浏览器处理一个 HTML 文档并在文档中遇到
因此DOMContentLoaded 肯定在下面的这些脚本执行结束之后发生。
此规则有两个例外
具有 async 特性attribute的脚本不会阻塞 DOMContentLoaded稍后 我们会讲到。使用 document.createElement(script) 动态生成并添加到网页的脚本也不会阻塞 DOMContentLoaded。
四、DOMContentLoaded 和样式
外部样式表不会影响 DOM因此 DOMContentLoaded 不会等待它们。
但这里有一个陷阱。如果在样式后面有一个脚本那么该脚本必须等待样式表加载完成。原因是脚本可能想要获取元素的坐标和其他与样式相关的属性。因此它必须等待样式加载完成。
当 DOMContentLoaded 等待脚本时它现在也在等待脚本前面的样式。
五、浏览器内建的自动填充
FirefoxChrome 和 Opera 都会在 DOMContentLoaded 中自动填充表单。
例如如果页面有一个带有登录名和密码的表单并且浏览器记住了这些值那么在 DOMContentLoaded 上浏览器会尝试自动填充它们如果得到了用户允许。
因此如果 DOMContentLoaded 被需要加载很长时间的脚本延迟触发那么自动填充也会等待。你可能在某些网站上看到过如果你使用浏览器自动填充—— 登录名/密码字段不会立即自动填充而是在页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前的延迟。
六、window.onload
当整个页面包括样式、图片和其他资源被加载完成时会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。
七、window.onunload
当访问者离开页面时window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的操作例如关闭相关的弹出窗口。
有一个值得注意的特殊情况是发送分析数据。
假设我们收集有关页面使用情况的数据鼠标点击滚动被查看的页面区域等。
自然地当用户要离开的时候我们希望通过 unload 事件将数据保存到我们的服务器上。
有一个特殊的 navigator.sendBeacon(url, data) 方法可以满足这种需求详见规范 https://w3c.github.io/beacon/。
它在后台发送数据转换到另外一个页面不会有延迟浏览器离开页面但仍然在执行 sendBeacon。
当 sendBeacon 请求完成时浏览器可能已经离开了文档所以就无法获取服务器响应对于分析数据来说通常为空。
还有一个 keep-alive 标志该标志用于在 fetch 方法中为通用的网络请求执行此类“离开页面后”的请求。你可以在 Fetch API 一章中找到更多相关信息。
如果我们要取消跳转到另一页面的操作在这里做不到。但是我们可以使用另一个事件 —— onbeforeunload。
八、window.onbeforeunload
如果访问者触发了离开页面的导航navigation或试图关闭窗口beforeunload 处理程序将要求进行更多确认。
如果我们要取消事件浏览器会询问用户是否确定。
总结
页面生命周期事件 当 DOM 准备就绪时document 上的 DOMContentLoaded 事件就会被触发。在这个阶段我们可以将 JavaScript 应用于元素。 诸如 script.../script 或 script src.../script 之类的脚本会阻塞 DOMContentLoaded浏览器将等待它们执行结束。图片和其他资源仍然可以继续被加载。 当页面和所有资源都加载完成时window 上的 load 事件就会被触发。我们很少使用它因为通常无需等待那么长时间。 当用户想要离开页面时window 上的 beforeunload 事件就会被触发。如果我们取消这个事件浏览器就会询问我们是否真的要离开例如我们有未保存的更改。 当用户最终离开时window 上的 unload 事件就会被触发。在处理程序中我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。
