是时候重新认识 Web 生命周期

2024-01-10 19:10:04

毫无疑问，Web 开发者必备技能清单中很重要的一部分就是了解 Web 生命周期。作为一名长期潜心于 Web 性能分析的程序员，我曾经对那些无关乎用户交互的采集信息置于 onLoad 或 DOMContentLoaded 中的行为一直存有疑惑。直到我对 Web 页面做了深入的探究，我才恍然大悟，原来 Web 页面实际上也有其生命周期，这一认识的突破彻底解决了以往的困惑。因此，在这篇文章中，我将向你介绍一些生命周期钩子函数，它们不仅利于开发者清楚掌握页面状态的变更信息，还能确保在不干扰用户体验的情况下进行数据采集。

Web 生命周期

Web 生命周期是指从用户在浏览器中输入网址开始，到页面完全加载并呈现出来，再到用户与页面交互，直至页面被关闭或重新加载的整个过程。在这个过程中，页面会经历一系列状态的变化，这些状态可以通过以下几个关键时间点来标记：

Navigation Start (导航开始) ：这是整个生命周期的起点，它标志着浏览器开始加载一个新的页面。
Unload Event (卸载事件) ：当浏览器开始加载新页面时，它会触发 unload 事件，这表明当前页面即将被卸载。
Redirect Start (重定向开始) ：如果页面被重定向到另一个 URL，则会触发 redirect start 事件。
Redirect End (重定向结束) ：当重定向完成时，则会触发 redirect end 事件。
Fetch Start (获取开始) ：当浏览器开始从服务器获取资源（如 HTML、CSS、JavaScript 等）时，则会触发 fetch start 事件。
Domain Lookup Start (域名查找开始) ：当浏览器开始查找资源的 IP 地址时，则会触发 domain lookup start 事件。
Domain Lookup End (域名查找结束) ：当浏览器成功找到资源的 IP 地址时，则会触发 domain lookup end 事件。
Connect Start (连接开始) ：当浏览器开始与服务器建立连接时，则会触发 connect start 事件。
Connect End (连接结束) ：当浏览器成功与服务器建立连接时，则会触发 connect end 事件。
Request Start (请求开始) ：当浏览器向服务器发送请求以获取资源时，则会触发 request start 事件。
Response Start (响应开始) ：当服务器开始向浏览器发送资源时，则会触发 response start 事件。
Response End (响应结束) ：当服务器完成向浏览器发送资源时，则会触发 response end 事件。
DOM Loading (DOM 加载) ：当浏览器开始解析 HTML 文档并构建 DOM 树时，则会触发 DOM loading 事件。
DOMContentLoaded (DOM 内容加载) ：当浏览器完成解析 HTML 文档并构建 DOM 树时，则会触发 DOMContentLoaded 事件。
Load Event (加载事件) ：当浏览器完全加载并呈现出页面时，则会触发 load 事件。

生命周期钩子函数

为了帮助开发者在 Web 页面的生命周期中进行数据采集，浏览器提供了一系列的生命周期钩子函数。这些钩子函数可以让你在特定时间点执行特定的代码，从而实现各种各样的需求。

下表列出了几个常用的生命周期钩子函数：

钩子函数
onload	当页面完全加载并呈现出来时触发
onDOMContentLoaded	当浏览器完成解析 HTML 文档并构建 DOM 树时触发
onunload	当页面即将被卸载时触发
onbeforeunload	当用户尝试离开页面时触发
onresize	当浏览器窗口的大小发生改变时触发
onscroll	当用户滚动页面时触发
onmousemove	当用户移动鼠标时触发
onclick	当用户点击元素时触发

如何利用生命周期钩子函数进行数据采集

现在，你已经了解了 Web 页面的生命周期以及生命周期钩子函数，接下来我将向你展示如何利用这些知识来进行数据采集。

例如，如果你想收集用户在页面上的停留时间，你可以使用以下代码：

// 声明一个变量来存储用户在页面上的停留时间
var timeOnPage = 0;

// 当页面加载完成后，启动一个计时器
window.onload = function() {
  timeOnPage = new Date().getTime();
};

// 当用户离开页面时，停止计时器并记录用户在页面上的停留时间
window.onbeforeunload = function() {
  timeOnPage = new Date().getTime() - timeOnPage;
  // 将用户在页面上的停留时间发送到服务器
  sendDataToServer(timeOnPage);
};