主页 | WSPACE

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

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

Mr.ws2025/9/3大约 3 分钟

Mr.ws2025/8/11大约 13 分钟

驾驶舱适配类

提供rem适配方案
提供scale整体缩放方案

import _ from "lodash-es";

export class ViewportHelper {
  constructor({
    designWidth = 1920,
    designHeight = 1080,
    baseFont = 16,
    minFont = 10,
    maxFont = 50,
    useRem = false,
    useScaleFit = false,
    containerSelector = "#app",
    delay = 100,
  } = {}) {
    this.designWidth = designWidth;
    this.designHeight = designHeight;
    this.baseFont = baseFont;
    this.minFont = minFont;
    this.maxFont = maxFont;
    this.useRem = useRem;
    this.useScaleFit = useScaleFit;
    this.containerSelector = containerSelector;
    this.delay = delay;
    if (useRem && useScaleFit) {
      this.useScaleFit = false;
      console.warn(
        `The useRem and useScaleFit options are mutually exclusive. useScaleFit will be disabled.`
      );
    }

    this.onResize = _.debounce(() => {
      if (this.useRem) this.setRem();
      if (this.useScaleFit) this.scaleFit();
    }, delay);
    window.addEventListener("resize", this.onResize);

    if (this.useRem) {
      this.setRem();
    }
    if (this.useScaleFit) {
      this.scaleFit();
    }
  }

  setRem() {
    const w = window.innerWidth;
    const h = window.innerHeight;
    // 同时考虑宽度和高度，取最小值作为比例基准
    const ratio = Math.min(w / this.designWidth, h / this.designHeight);
    const fontSize = Math.max(
      this.minFont,
      Math.min(this.maxFont, this.baseFont * ratio)
    );
    document.documentElement.style.fontSize = fontSize + "px";
  }

  destroy() {
    window.removeEventListener("resize", this.onResize);
  }

  scaleFit() {
    const container = document.querySelector(this.containerSelector);
    if (!container) return;
    const w = window.innerWidth;
    const h = window.innerHeight;
    const scale = Math.min(w / this.designWidth, h / this.designHeight);
    container.style.width = `${this.designWidth}px`;
    container.style.height = `${this.designHeight}px`;
    container.style.transformOrigin = "center center";
    container.style.position = "absolute";
    container.style.left = "50%";
    container.style.top = "50%";
    container.style.transform = `translate(-50%, -50%) scale(${scale})`;
    container.style.border = `1px solid red`;
  }
}

Mr.ws2025/6/20小于 1 分钟

Proxy解析

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

Mr.ws2025/6/15大约 4 分钟

简介

欢迎来到exploreoo的随笔, 有任何疑问请联系3351550900@qq.com, 或者联系作者: 138后头随便

Mr.ws2025/5/9小于 1 分钟

环境变量配置

适用场景：前端（Vite、Vue CLI/Webpack、CRA、Next.js、Nuxt）、Node.js 服务端、容器化（Docker/K8s）、CI/CD。涵盖 构建时 vs 运行时、命名约定、优先级与加载顺序、安全与密钥管理、跨平台、类型校验 等。

TL;DR 要点（快速总结）

构建时（Build-time）与运行时（Runtime）必须分清：多数前端框架会在构建时把环境变量写进打包产物，部署后改 .env 不会生效。若需要部署后能改，用运行时注入（env.js / config.json / Nginx envsubst）。
前端暴露即不安全：凡放到浏览器的变量都不是秘密（API 域名、feature 开关可以，密钥或 token 绝不可）。
命名前缀：不同框架用不同前缀暴露给前端（VITE_、VUE_APP_、REACT_APP_、NEXT_PUBLIC_、Nuxt 的 runtimeConfig.public）。
优先级与加载顺序：一般 .env.local > .env.[mode] > .env > 系统环境；但不同工具略有差别。
类型校验：使用 envalid、zod 在启动时校验，能大幅降低拼写错误或缺失导致的线上故障。
CI/Secrets/容器：把密钥放在 CI/Secrets 或 Secret Manager（Vault、AWS Secrets Manager），不要提交到仓库或打包进前端产物。

Mr.ws2025/5/1大约 7 分钟

Vue+PWA

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

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

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

Mr.ws2025/4/10大约 5 分钟

OPTIONS预检请求

什么是 OPTIONS 预检请求？

必须是跨域的场景下，当你通过浏览器发送一个请求时，为了保证跨域安全控制，浏览器不会立即发送该请求，而是自动先发起一个 OPTIONS 请求，询问目标服务器是否允许你真正的请求行为，这就是所谓的预检请求（preflight request）。

另外，预检请求不会携带cookies，即使设置了withCredentials: true或者credentials: 'include'。

哪些请求会触发预检？

跨域场景的前提下，只要满足以下任一条件，就会触发预检请求：

请求方法不是 GET、POST 或 HEAD（如：PUT、DELETE）
使用了自定义请求头（如：Authorization、X-Token、Content-Type: application/json），也就是除以下这些之外的：
- Accept
- Accept-Language
- Content-Language
- Content-Type（仅限 text/plain、multipart/form-data、application/x-www-form-urlencoded）

Mr.ws2025/3/15大约 3 分钟

CDN 加速

引言

在现代前端开发中，合理使用 CDN 可以显著提升应用加载速度，但同时也带来了可用性挑战。本文将深入探讨如何实现稳健的 CDN 加载策略，包括开发与生产环境的不同处理方式，以及必不可少的 fallback 机制。

Mr.ws2025/3/3大约 4 分钟

http取消请求

问题场景

在实现ESOP文档显示功能时，需要根据文档分类和工序查询大文件（视频/文档）并解析。由于解析接口耗时，当用户快速切换分类或工序时，会遇到以下核心问题：

请求异常
批量取消旧请求后立即发起新请求，Network面板无新请求产生
进度条异常
NProgress进度条在取消操作后不显示

Mr.ws2025/2/26大约 2 分钟