服务端2月28日 23:09
在 React 项目中如何正确使用 axios？在 React 项目中使用 axios，核心挑战不在于发送请求本身，而在于如何让请求逻辑与 React 的组件生命周期、状态管理、性能优化正确配合。许多开发者会写 axios 调用，却在内存泄漏、竞态条件、重复请求等问题上频频踩坑。
## 一、为什么 React 项目需要封装 axios
直接在每个组件中 `import axios from 'axios'` 然后调用，看似简单，但会带来三个问题： baseURL 和超时配置散落各处、token 刷新逻辑无法统一处理、错误处理方式不一致。
## 创建统一的请求实例
```javascript
// services/reques...
乐闻
服务端2月24日 22:52
iframe 响应式设计怎么做？6 种方案与安全考点全解析iframe 在响应式设计中面临独特挑战：它嵌入的内容通常来自外部源，无法直接控制样式和布局，且元素本身不能自动伸缩。下面从面试高频考点出发，逐层拆解实现方案。
## 核心思路：让 iframe 宽度自适应
最基础的做法是让 iframe 宽度跟随父容器：
```html
<iframe
src="https://example.com/content"
width="100%"
height="500"
style="border: none;">
</iframe>
```
这种方式简单，宽度能自适应，但高度固定，内容可能被截断或留白。真正的响应式需要解决高度...服务端2月24日 22:49
iframe 的同源策略是什么？跨域 iframe 如何通信？同源策略是浏览器最核心的安全机制，它规定协议、域名、端口三者完全相同的两个页面才属于同源。iframe 作为一个独立的浏览上下文，其内容必须遵守同源策略——跨域 iframe 无法直接访问父页面的 DOM、Cookie 和 JavaScript 对象。
## 同源的判定规则
三个条件必须同时满足：协议相同（http/https）、域名相同、端口相同。任何一个不同即为跨域。
```javascript
// 与 https://example.com/page.html 同源
https://example.com/other.html
https://example.com/sub...服务端2月24日 22:42
什么是 iframe？它有哪些常用属性和安全注意事项？iframe（Inline Frame）是 HTML 中的内联框架元素，用于在当前页面中嵌入另一个独立的 HTML 文档。iframe 拥有独立的浏览器上下文、DOM 树和 JavaScript 执行环境，与父页面相互隔离。
## 基本语法
```html
<iframe src="https://example.com" width="600" height="400" title="嵌入内容描述"></iframe>
```
`title` 属性不可省略，它为屏幕阅读器提供无障碍描述，缺少 `title` 会导致可访问性审查报错。
## 常用属性详解
**src** — 指...服务端2月24日 22:55
iframe 的可访问性如何实现？有哪些 iframe 可访问性的最佳实践？iframe 的可访问性是一个重要的考虑因素，因为屏幕阅读器和其他辅助技术需要能够正确理解和导航 iframe 内容。良好的可访问性实践可以确保所有用户，包括残障用户，都能够有效使用 iframe 内容。
## iframe 可访问性基础
### 1. 使用 title 属性
为 iframe 提供描述性的 title 属性，帮助屏幕阅读器用户理解 iframe 的用途。
```html
<!-- 不推荐：缺少 title -->
<iframe src="https://example.com/video"></iframe>
<!-- 推荐：提供描述性 title -->
...服务端3月1日 23:32
WebGL 1.0 和 WebGL 2.0 有什么区别？## 核心答案
WebGL 1.0 基于 OpenGL ES 2.0，WebGL 2.0 基于 OpenGL ES 3.0，这是两者最根本的差异。从面试角度，掌握以下五个关键区别即可覆盖大部分考点：
1. **着色器语言升级**：WebGL 1.0 使用 GLSL ES 1.0（`attribute`/`varying`/`gl_FragColor`），WebGL 2.0 使用 GLSL ES 3.0（`in`/`out`/`自定义输出变量`），必须声明 `#version 300 es`。
2. **关键特性从扩展变原生**：3D 纹理、MRT（多重渲染目标）、实例化渲染、VAO（...服务端3月1日 23:30
WebGL 中的纹理（Texture）如何使用？有哪些纹理参数需要配置？## 纹理是 WebGL 渲染的核心机制
纹理（Texture）是将 2D 图像数据映射到 3D 几何体表面的技术。在 WebGL 中，几乎所有视觉效果——地板砖纹、角色皮肤、天空背景——都依赖纹理实现。理解纹理的使用流程和参数配置，是掌握 WebGL 的关键一步。
## 纹理使用的完整流程
### 1. 创建并绑定纹理对象
```javascript
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
```
`bindTexture` 将纹理对象绑定到当前纹理单元，后续所有纹...服务端3月1日 23:26
WebGL 中的 Shader 是什么？顶点着色器和片段着色器有什么区别？## Shader 是什么
Shader（着色器）是运行在 GPU 上的小型程序，负责控制图形渲染管线的各个阶段。WebGL 使用 GLSL（OpenGL Shading Language）编写着色器代码，一个最小的 WebGL 渲染程序必须包含两个着色器：顶点着色器和片段着色器。
理解 Shader 的关键在于搞清楚渲染管线的数据流向：JavaScript 将顶点数据传入 GPU → 顶点着色器逐顶点处理 → 图元装配与光栅化 → 片段着色器逐像素着色 → 最终输出到屏幕。
## 顶点着色器（Vertex Shader）
顶点着色器是渲染管线的第一个可编程阶段，对每个顶点执行一...服务端3月1日 23:35
WebGL 性能优化有哪些常用技巧？## 减少 Draw Call
Draw Call 是 CPU 向 GPU 提交绘制命令的过程，每次调用都有固定开销，是最常见的性能瓶颈。
**批量绘制（Batching）**：将使用相同着色器的多个网格合并到一个缓冲区，用一次 `drawArrays` 替代多次调用。适合静态场景中的同类物体。
**实例化渲染（Instanced Rendering）**：WebGL 2.0 原生支持，适合渲染大量相同几何体（如森林中的树木、粒子系统）：
```javascript
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, insta...服务端3月1日 23:37
WebGL 帧缓冲区和离屏渲染的原理是什么？## 核心回答
帧缓冲区（Framebuffer Object, FBO）是 WebGL 中用于离屏渲染的机制。它允许将渲染结果输出到纹理或渲染缓冲区，而非直接显示到屏幕上。离屏渲染则是利用 FBO 将场景先渲染到纹理，再对纹理做二次处理或合成的技术。
一个完整的 FBO 由三种附件组成：
- **颜色附件**：存储颜色信息，通常绑定纹理（以便后续采样）
- **深度附件**：存储深度值，通常绑定渲染缓冲区（写入性能更优）
- **模板附件**：存储模板值，用于遮罩测试
## 创建帧缓冲区的完整步骤
创建一个可用的 FBO 分为四步：创建帧缓冲区对象、创建颜色附件（纹理）、创建...