1/4
- 下载图片
- 复制图片
。
频道主
HTML页面的生命周期
HTML页面的生命周期有以下三个重要事件：
•DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
•load —— 浏览器已经加载了所有的资源（图像，样式表等）。
•beforeunload —— 当用户即将离开当前页面（刷新或关闭）时触发。正要去服务器读取新的页面时调用，此时还没开始读取；
unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
每个事件都有特定的用途:
•DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
•load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在 HTML/CSS 中指定）
•beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
•unload —— 删除本地数据localstorage等
DOMContentLoaded
•DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：
document.addEventListener("DOMContentLoaded
DOMContentLoaded 和脚本
当浏览器在解析 HTML 页面时遇到了 <script>...</script> 标签，将无法继续构建DOM树（UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起），必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。
外部脚本（带 src 的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。带 async 的外部脚本，可能会在DOMContentLoaded事件之前或之后执行。带 defer 的脚本肯定会在在DOMContentLoaded事件之前执行。
DOMContentLoaded 与样式表
外部样式表并不会阻塞 DOM 的解析，所以 DOMContentLoaded 并不会被它们影响。
load
window 对象上的 load 事件在所有文件包括样式表，图片和其他资源下载完毕后触发。
window.addEventListener('load', function(e) {...});
= function(e) { ... };
#前端
HTML页面的生命周期有以下三个重要事件：
•DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
•load —— 浏览器已经加载了所有的资源（图像，样式表等）。
•beforeunload —— 当用户即将离开当前页面（刷新或关闭）时触发。正要去服务器读取新的页面时调用，此时还没开始读取；
unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
每个事件都有特定的用途:
•DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
•load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在 HTML/CSS 中指定）
•beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
•unload —— 删除本地数据localstorage等
DOMContentLoaded
•DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：
document.addEventListener("DOMContentLoaded
DOMContentLoaded 和脚本
当浏览器在解析 HTML 页面时遇到了 <script>...</script> 标签，将无法继续构建DOM树（UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起），必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。
外部脚本（带 src 的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。带 async 的外部脚本，可能会在DOMContentLoaded事件之前或之后执行。带 defer 的脚本肯定会在在DOMContentLoaded事件之前执行。
DOMContentLoaded 与样式表
外部样式表并不会阻塞 DOM 的解析，所以 DOMContentLoaded 并不会被它们影响。
load
window 对象上的 load 事件在所有文件包括样式表，图片和其他资源下载完毕后触发。
window.addEventListener('load', function(e) {...});
= function(e) { ... };
#前端
2024-10-28
浏览109
暂无评论
登录后评论
点赞
评论
分享