引言
想象一下，你正在浏览最近的新闻或社交媒体，突然之间，页面变得卡顿起来。图片加载得很慢，视频无法播放，而你最感兴趣的那篇文章却迟迟无法打开。很多时候，这都是因为网络连接速度慢或不稳定导致的。一直以来，应用程序和网站通过分页的方式来呈现内容，即一次加载一页或几页的内容。这有点像阅读纸质书籍，一次只能翻阅一两页。
这种方法虽然在一定程度上有效，但往往难以满足用户的期望，尤其是在网络状况不佳的移动设备上。例如，缓慢的加载速度、页面切换时的中断，以及用户需要不断地点击或轻触屏幕来获取更多内容等问题，都会让用户感到烦恼，最终使他们失去兴趣，甚至离开。
无论是在线购物、浏览社交媒体还是阅读新闻，用户都期望无论设备或网络状况如何，都能获得无缝且引人入胜的体验。基于这样的需求，我们可以通过 AI 技术来实现智能且个性化的分页功能。
与其为所有用户提供千篇一律的静态分页，不如利用 AI 来实现动态内容加载。这种动态分页方法可以根据每个用户的特定需求和网络情况来调整内容的呈现方式。
设想有这样的一个网站或应用程序，它能够感知你的网络连接状况和设备性能，并据此相应地调整显示内容。当网络连接速度快时，你可以看到一个充满丰富多媒体元素的页面。当网络连接速度慢时，这个页面会优先加载必要的文本和图片，然后根据网络带宽情况逐步加载其他内容。
通过智能调整要加载的内容，我们可以为每一个用户创造一种响应更快、更个性化的体验。用户将从这种方法中受益，因为这可以实现更快的加载速度和更流畅的交互。
公司则从降低技术基础设施成本中获益，因为这种方法减少了数据传输量，从而显著减轻了流媒体服务器和网络资源的负担。此外，延迟的减少意味着用户满意度的提升，而满意的用户更有可能保持活跃参与度，并持续回访平台。
在本文中，我们将探讨如何利用 AI 根据用户行为来个性化内容加载。
利用 AI 分析用户行为
设想一个新闻网站上有两位用户：
AI 能够识别这些使用模式，并相应地调整要传输的内容，例如为用户 A 预加载图片，或为用户 B 预加载下一篇文章。为了让 AI 有效地实现个性化的内容传输，它必须首先理解用户独特的参与模式并推断用户的意图。这种理解是通过分析用户在与内容互动过程中产生的特定行为信号来建立的。接下来的部分将深入探讨用于捕捉和解读这两种关键信号的方法：
通过分析这些行为数据，AI 可以建立更准确的用户画像，从而更准确地预测用户需求。
滚动深度和速度跟踪
客户端实现
在这里，在客户端，我们使用 JavaScript 事件监听器（如 scroll 或 wheel）来跟踪用户向下滚动页面的深度和速度。这些数据能够为我们提供关于用户参与度和兴趣水平的线索。
以下是一个使用 scroll 事件监听器的示例：
window.addEventListener('scroll', () => { // Get the current scroll position const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Get the total scrollable height of the document. const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; // Calculate the percentage of the page scrolledconst scrollPercentage = (scrollTop / scrollHeight) * 100; // Log the scroll position and percentage console.log('Scroll Top:', scrollTop); console.log('Scroll Percentage:', scrollPercentage); // You can also track the scroll speed here by comparing the current scroll // position with the previous one and calculating the difference over time. });
复制代码
以下是一个使用 wheel 事件监听器的示例：
window.addEventListener('wheel', (event) => { // Get the deltaY value, which indicates the scroll direction and // amount.const deltaY = event.deltaY; // Log the scroll direction and amount. console.log('Scroll Delta:', deltaY); // You can use this information to calculate scroll speed and acceleration more// accurately. });
复制代码
服务器端实现
当服务器从客户端设备接收到 scroll 或 wheel 事件后，我们就可以应用机器学习模型，如回归或决策树，来分析滚动深度和速度模式，从而预测用户可能消费的内容。例如，如果用户总是快速滚动到页面底部，系统可以据此预测他们需要更多内容，并主动加载下一个内容块。
回归模型示例
假设我们正在跟踪每个用户会话的以下这些数据点：
我们可以使用线性回归或支持向量回归等模型来找出这些变量之间的关系。模型将学会根据滚动深度、滚动速度和花费时间来预测消费内容。
一个高度简化的回归模型找到了以下关系：
Content consumed = 0.5 * (Scroll depth) + 0.2 * (Scroll speed) + 0.3 * (Time spent)
复制代码
现在，假设有一位新用户以平均每秒 100 像素的速度滚动页面的 80%，并在页面上停留了 60 秒，模型将据此预测：
Content consumed = 0.5 * (80) + 0.2 * (100) + 0.3 * (60) = 78
复制代码
这个方程式表明，模型预测用户将消费大约 78 个内容单位，比如阅读 78 篇文章、查看 78 张图片等。
停留时间分析
在这里，我们追踪用户在页面特定部分或元素上所花费的时间。这种追踪有助于我们洞察哪些内容吸引了用户的注意力，以及这种注意力持续了多长时间。
客户端实现
在这里，我们首先使用 JavaScript 来跟踪用户在文章各个部分所停留的时间。我们可以使用 scroll 事件、visibilitychange 事件或其他技术来监控各个部分何时进入或退出用户的视野范围。此外，我们将每篇文章划分为多个逻辑部分（例如，按照标题、段落或其他结构元素划分）。这种划分方式使我们能够更精准地分析用户在不同内容区域的停留时间。
以下是一个使用 scroll 事件监听器的示例：
// Get all the sections of the article const sections = document.querySelectorAll('article section'); // Initialize an array to store dwell time data for each section let dwellTimes = new Array(sections.length).fill(0); // Initialize an array to store the timestamps when each section becomes visible let sectionEntryTimestamps = new Array(sections.length).fill(null); // Function to track when a section enters and exits the // viewport.const handleSectionVisibility = (entries) => { entries.forEach(entry => { const sectionIndex = Array.from(sections).indexOf(entry.target); if (entry.isIntersecting) { // Section has entered the viewport sectionEntryTimestamps[sectionIndex] = Date.now(); } else { // Section has exited the viewport if (sectionEntryTimestamps[sectionIndex] !== null) {dwellTimes[sectionIndex] += Date.now() - sectionEntryTimestamps[sectionIndex]sectionEntryTimestamps[sectionIndex] = null; } } }); }; // Create a new IntersectionObserver to observe section visibilityconst observer = new IntersectionObserver(handleSectionVisibility, { threshold: 0.5, // Adjust the threshold as needed (e.g., 0.75 for 75% visibility) }); // Observe each section sections.forEach(section => { observer.observe(section); }); // Function to log the dwell time data (e.g., when the user leaves the page) const logDwellTimes = () => { console.log('Dwell Times:', dwellTimes); // You can send this data to your server for further analysis and processing }; // Add an event listener to trigger the logging function when the user leaves the page window.addEventListener('beforeunload', logDwellTimes);
复制代码
以下是一个使用 visibilitychange 事件的示例：
JavaScript// Get all the sections of the article const sections = document.querySelectorAll('article section'); // Initialize an array to store dwell time data for each section let dwellTimes = new Array(sections.length).fill(0); // Initialize an array to store the timestamps when each section becomes visiblelet sectionEntryTimestamps = new Array(sections.length).fill(null); // Function to track when a section's visibility changes const handleVisibilityChange = (event) => { const section = event.target; const sectionIndex = Array.from(sections).indexOf(section); if (document.visibilityState === 'visible') { // Section is now visible sectionEntryTimestamps[sectionIndex] = Date.now(); } else { // Section is now hidden (e.g., user switched tab, minimized window) if (sectionEntryTimestamps[sectionIndex] !== null) { dwellTimes[sectionIndex] += Date.now() - sectionEntryTimestamps[sectionIndex]; sectionEntryTimestamps[sectionIndex] = null; } } }; // Add a visibilitychange event listener to each sectionsections.forEach(section => { section.addEventListener('visibilitychange', handleVisibilityChange); }); // Function to log the dwell time data (e.g., when the user leaves the page) const logDwellTimes = () => { console.log('Dwell Times:', dwellTimes); // You can send this data to your server for further analysis and processing }; // Add an event listener to trigger the logging function when the user leaves the page window.addEventListener('beforeunload', logDwellTimes);
复制代码
服务器端实现
当服务器从客户端设备接收到停留时间数据（例如，每个部分的总停留时间、查看的部分数量以及页面的总停留时间，这些数据可能通过 navigator.sendBeacon 或定期心跳机制发送）之后，我们就可以应用机器学习模型。这些模型，如回归或决策树，分析这些停留时间模式，从而预测用户参与度和未来可能消费的内容。
回归模型示例
假设我们正在跟踪每个用户在文章页面上的以下这些数据点，这些数据点是从客户端停留时间分析中得出的：
平均每部分停留时间（AvgDwell）：用户查看进入视野范围的每个部分所花费的平均时间，以秒为单位。
页面总停留时间（TotalDwell）：用户查看页面上任意部分所花费的总时间，以秒为单位（停留时间之和，不包括标签被隐藏时的时间）。
查看的部分数量（SectionsViewed）：用户停留时间超过最低阈值（例如，>1 秒）的不同部分的数量。
我们可以使用回归模型（如线性回归或更复杂的模型如梯度提升回归器来提高准确性）来找出这些停留时间特征与用户可能感兴趣的下一部分内容之间的关系。个性化分页colab提供了如何使用示例数据构建此类回归模型的指南。
假设我们训练的回归模型找到了以下简化的线性关系：
Predicted_Next_Content_Units = 5 + (0.8 * AvgDwell) + (0.1 * TotalDwell) + (2.0 * SectionsViewed)
复制代码
现在，假设一个用户访问了一个页面，服务器接收到以下这些数据：
AvgDwell = 15 秒
TotalDwell = 70 秒
SectionsViewed = 4 个部分
模型将预测潜在的下一部分消费内容：
Predicted_Next_Content_Units = 5 + (0.8 * 15) + (0.1 * 70) + (2.0 * 4) = 32
复制代码
换句话说，模型预测用户将消费大约 32 个内容单位（例如，阅读 32 篇文章，查看 32 张图片等）。
结论
在当今的数字环境中，用户渴望获得无缝衔接且引人入胜的线上体验。优化内容传输不仅在技术上是必要的，更是企业脱颖而出的关键差异化因素。
由于传统分页方式的僵化结构以及潜在的加载速度问题，这些期望往往难以得到满足。因此，通过利用 AI 来智能地分析用户行为——正如我们在本文中讨论的那样，通过滚动速度和深度跟踪或停留时间分析——我们能够为用户创造一个负责任的（即尊重用户的网络带宽并避免不必要的数据传输）和个性化的浏览体验。
【声明：本文由 InfoQ 翻译，未经许可禁止转载。】
查看英文原文：https://www.infoq.com/articles/personalized-content-pagination-prefetching/
评论