参考资料

1. html链接标签详细说明以及案例
2. 有哪些方法可以防止开发者工具被打开？
3. html文本标签详细说明以及案例
4. HTML 链接语法
5. HTML/UBB互转有哪些
6. HTML 有序列表
7. Html过滤工具有哪些
8. Html/JS互转有哪些

动态加载+Token验证+频率限制

动态加载

核心实现

1. 按需加载（React示例）

const LazyComponent = React.lazy(() => import('./Component'));
<Suspense fallback={<Loader/>}>
  <LazyComponent/>
</Suspense>

2. API分页参数（RESTful示例）

GET /api/items?page=2&size=20

响应头包含：

X-Total-Count: 100
Link: </api/items?page=3>; rel="next"

3. 虚拟滚动关键参数

const itemHeight = 50;
const bufferSize = 5; // 缓冲条目数
const visibleCount = Math.ceil(containerHeight / itemHeight) + bufferSize;

Token验证

JWT 实现

1. 生成Token（Node.js示例）

const token = jwt.sign(
  { userId: 123, role: 'admin' },
  process.env.SECRET_KEY,
  { expiresIn: '1h', algorithm: 'HS256' }
);

2. 验证中间件

app.use((req, res, next) => {
  const token = req.header('Authorization')?.split(' ')[1];
  try {
    req.user = jwt.verify(token, process.env.SECRET_KEY);
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Invalid token' });
  }
});

3. Token刷新机制

POST /auth/refresh
Body: { "refresh_token": "xxxxxx" }

频率限制

Redis实现示例

1. 滑动窗口限流

# Redis命令（每分钟10次限制）
current = redis.incr(ip)
if current == 1:
    redis.expire(ip, 60)
elif current > 10:
    raise RateLimitExceeded()

2. 令牌桶配置

# 配置示例
rate_limit:
  capacity: 100  # 桶容量
  fill_rate: 10  # 每秒补充令牌数
  ip_limit: 20   # 单IP限制

3. Nginx限流配置

limit_req_zone $binary_remote_addr zone=api:10m rate=1r/s;

location /api/ {
  limit_req zone=api burst=5 nodelay;
}

响应头示例

HTTP/1.1 429 Too Many Requests
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 0
X-RateLimit-Reset: 1634567890
Retry-After: 60