onpageshow 事件（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，理解浏览器与页面之间的交互逻辑至关重要。onpageshow 事件是一个常被低估但功能强大的工具，它帮助开发者捕捉页面加载和显示的关键时刻。无论是维护用户会话状态、优化性能监控，还是实现页面间的无缝衔接，这个事件都能提供精准的控制点。本文将从基础概念逐步深入，通过实例和对比分析，帮助读者掌握 onpageshow 事件的使用场景与最佳实践。

事件基础：定义与触发条件

什么是 onpageshow 事件？

onpageshow 事件是浏览器触发的一个事件，当页面被加载或从缓存中恢复时发生。它与 onload 事件类似，但触发时机更早且更频繁。简单来说，每当用户首次访问页面或通过“返回”按钮回到页面时，onpageshow 都会执行。

触发时机的比喻

想象你走进一家咖啡店：

• onload 事件如同点完单后拿到咖啡的那一刻（页面资源完全加载完成）。
• onpageshow 事件则像每次推开店门时触发的门铃声（页面可见时立即触发）。

关键特性

1. 触发条件：
   • 页面首次加载时触发。
   • 用户通过浏览器历史记录（如点击“后退”按钮）返回该页面时触发。
2. 事件对象：
   可通过 event.persisted 属性判断页面是否从缓存加载。若为 true，表示页面未重新加载，而是直接从内存中恢复。

核心功能：常见使用场景

1. 维护页面状态

当用户离开页面后返回时，开发者常需恢复之前的交互状态（如滚动位置、表单输入）。onpageshow 可配合 sessionStorage 实现这一功能。

示例代码：

window.onpageshow = function(event) {  
  if (event.persisted) {  
    // 页面从缓存恢复，读取存储的状态  
    const savedScroll = sessionStorage.getItem('scrollPosition');  
    if (savedScroll) {  
      window.scrollTo(0, parseInt(savedScroll));  
    }  
  }  
};  

// 在页面隐藏时保存状态（需配合 onpagehide 事件）  
window.onpagehide = function() {  
  sessionStorage.setItem('scrollPosition', window.scrollY);  
};  

2. 性能监控与调试

通过 onpageshow 可统计页面加载或恢复所需时间。例如：

let startTime;  

// 在页面开始加载时记录时间  
document.onreadystatechange = function() {  
  if (document.readyState === "loading") {  
    startTime = performance.now();  
  }  
};  

// 在 onpageshow 中计算耗时  
window.onpageshow = function() {  
  const duration = performance.now() - startTime;  
  console.log(`页面显示耗时：${duration.toFixed(2)}ms`);  
};  

3. 防止重复操作

某些功能（如广告加载）可能因页面缓存重复执行。onpageshow 可结合 event.persisted 避免此类问题。

深入对比：与 onload 事件的区别

时间线对比

关键差异

• 触发频率：
  • onload 仅在页面完全加载时触发一次。
  • onpageshow 在每次页面显示时触发，包括历史记录导航。
• 事件对象：
  onpageshow 的 event.persisted 属性可判断页面是否来自缓存，而 onload 无此功能。

实战案例：构建动态计数器

场景描述

假设需实现一个计数器，记录用户每次访问页面的总次数（包括返回时的访问）。由于浏览器缓存可能阻止页面重新加载，onpageshow 是最佳选择。

代码实现

let visitCount = 0;  

// 初始读取存储的计数  
const storedCount = localStorage.getItem('visitCount');  
if (storedCount) {  
  visitCount = parseInt(storedCount);  
}  

// 绑定 onpageshow 事件  
window.onpageshow = function(event) {  
  // 仅在首次加载时增加计数  
  if (!event.persisted) {  
    visitCount++;  
    document.getElementById('counter').textContent = visitCount;  
    localStorage.setItem('visitCount', visitCount);  
  }  
};  

HTML 结构

<div id="counter">0</div>  

运行逻辑

• 当用户首次访问页面时，event.persisted 为 false，计数器递增并保存到 localStorage。
• 若用户离开后通过“返回”按钮回来，event.persisted 为 true，计数器不会重复增加。

进阶技巧与注意事项

1. 兼容性处理

虽然现代浏览器普遍支持 onpageshow，但可通过 addEventListener 替代直接绑定属性，以增强兼容性：

window.addEventListener('pageshow', function(event) {  
  // 逻辑代码  
});  

2. 避免性能问题

频繁操作 DOM 或执行复杂计算可能导致页面卡顿。建议：

• 将耗时任务延迟执行（如使用 setTimeout）。
• 结合 requestAnimationFrame 优化渲染。

3. 与 onpopstate 的协同

当处理浏览器历史记录时，可结合 onpopstate（监听 history.pushState 或 history.back）实现更精细的控制：

window.addEventListener('pageshow', (event) => {  
  if (event.persisted) {  
    // 处理缓存恢复逻辑  
  }  
});  

window.addEventListener('popstate', () => {  
  // 处理历史记录变化  
});  

结论

onpageshow 事件是开发者掌控页面生命周期的利器。通过理解其触发条件、与同类事件的差异，以及结合实际案例的代码实践，读者可以高效地实现状态管理、性能监控等关键功能。无论是优化用户体验还是提升开发效率，这一事件都值得深入掌握。下次面对页面交互设计时，不妨尝试用 onpageshow 为你的应用注入更智能的响应能力！

扩展阅读

• MDN Web Docs - pageshow Event
• 浏览器缓存机制详解

（字数统计：约 1800 字）