特点

• 声明式的视图层。采用的是JSX语法声明视图层，因此可以在视图层随意使用各种状态的数据
• 灵活的渲染实现。生成的虚拟DOM只是普通的JS对象，可以利用其他依赖库把这个对象渲染成不同的UI，也就是具备了跨平台的能力。例如使用react-dom在浏览器上渲染，使用React Native在手机上渲染
• 高效的DOM操作。虚拟DOM与真实DOM之间利用差异化算法，尽量减少真实DOM的渲染次数和改变节点的数量

render阶段

• 开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法
• 判断本次更新是同步还是异步（是否调用shouldYield方法，代表浏览器帧有没有剩余时间，该方法会终止循环，直到浏览器有空闲时间再继续后续遍历）
• 递归构建Fiber节点并赋值给workInProgress，并将workInProgress与已创建的Fiber节点连接起来构成Fiber树

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

欢迎来到exploreoo的网络日志，有任何疑问请联系3351550900@qq.com。

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

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

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

什么是 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）

引言

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

问题场景

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

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

前言

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

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

useLayoutEffect 和 useEffect 都是 React 提供的 Hook，用于处理副作用，但它们在执行时机上有重要区别。

主要区别