在实际项目中，用户的电脑可能会进入 睡眠、休眠，或者切换网络、锁屏，甚至浏览器将页面冻结。这些情况会对网页的运行产生多方面的影响，比如 WebSocket 断开、渲染上下文丢失、定时器冻结 等。

本文整理了一份 前端容错恢复方案 Checklist，并为每个方案提供了 代码实现示例，帮助你在开发中逐项检查，提升应用的稳定性与可用性。

Proxy并不是透明代理

在 JavaScript 中，Proxy 可以拦截并自定义对象的基本操作，但它并不是目标对象的透明代理。即使不做任何拦截，Proxy 也无法完全模拟原始对象的行为，这主要源于 this 指向的变化问题。

this 指向问题

1. 方法调用时的 this 指向

const target = {
  m() {
    console.log(this === proxy); // true 当通过proxy调用时
  }
};
const handler = {};
const proxy = new Proxy(target, handler);

target.m(); // false - 直接调用，this指向target
proxy.m();  // true  - 通过proxy调用，this指向proxy

什么是 PWA（Progressive Web App 渐进式网络应用）

PWA 是一种结合了 Web 与原生应用优势的前端技术架构，核心能力包括：

• 离线访问：即使断网也能使用应用
• 可安装：可以被添加到手机主屏幕，像 App 一样运行
• 性能优化：资源按需缓存，提高加载速度
• 自动更新：通过 Service Worker 实现静默或提示式资源更新

前言

在前端开发中，我们经常遇到一些计算量大的任务：数据处理、图表预计算、循环遍历、密集数学运算等。如果不小心放在主线程中同步执行，很容易导致：

• 页面卡顿、掉帧；
• 动画不流畅；
• 用户点击无响应；
• “页面无响应”警告。