150款+炫酷的CSS3 loading加载动画，总有一款适合你
·
是不是非常有趣？
最后，附上150款+CSS3 loading加载动画的下载地址：
下载地址: https://pan.baidu.com/s/1upupoPpI0KDrK1lk_m4MmA
提取码: dqw4
——————————————————————————————————————————
课外知识
前端核心面试题深度解析
一、HTTPS握手过程详解
1.1 HTTPS安全基础
HTTPS vs HTTP
javascript
// HTTP明文传输的弱点
const httpDangers = {
eavesdropping: "窃听 - 通信内容被第三方截获",
tampering: "篡改 - 数据在传输中被修改",
impersonation: "冒充 - 攻击者伪装成目标服务器"
};
// HTTPS解决方案
const httpsSolutions = {
confidentiality: "加密 - 数据加密传输",
integrity: "完整性 - 数据不被篡改",
authentication: "身份认证 - 确认通信方身份"
};
1.2 TLS/SSL握手流程详解
TLS 1.2完整握手过程（4次往返）
javascript
class TLSHandshake {
constructor() {
this.phases = {
// 阶段1：建立安全能力
phase1: {
clientHello: {
description: "客户端发起握手",
contents: [
"TLS版本（如TLS 1.2）",
"客户端随机数（Client Random）",
"密码套件列表（Cipher Suites）",
"压缩方法",
"扩展字段（如SNI、ALPN）"
]
},
serverHello: {
description: "服务器响应握手",
contents: [
"选择的TLS版本",
"服务器随机数（Server Random）",
"选择的密码套件",
"选择的压缩方法",
"扩展字段响应"
]
}
},
// 阶段2：服务器身份认证
phase2: {
serverCertificate: {
description: "服务器发送证书",
purpose: "证明服务器身份，提供公钥"
},
serverKeyExchange: {
description: "密钥交换参数（可选）",
requiredWhen: "使用DH、ECDH等密钥交换算法"
},
certificateRequest: {
description: "请求客户端证书（可选）",
purpose: "双向认证"
},
serverHelloDone: {
description: "服务器握手信息结束"
}
},
// 阶段3：客户端响应
phase3: {
clientCertificate: {
description: "客户端证书（如有请求）"
},
clientKeyExchange: {
description: "客户端密钥交换",
methods: [
"RSA：使用服务器公钥加密预主密钥",
"DH：发送客户端的DH参数"
]
},
certificateVerify: {
description: "客户端证书验证（如有证书）",
purpose: "证明客户端拥有对应私钥"
}
},
// 阶段4：完成握手
phase4: {
changeCipherSpec: {
description: "切换密码规范",
purpose: "告知对方开始使用协商的密钥加密"
},
finished: {
description: "完成消息",
purpose: "验证握手过程完整性",
calculation: "基于主密钥、握手消息哈希值"
}
}
};
}
// 详细流程图
getHandshakeSequence() {
return `
客户端 服务器
|-------- ClientHello ------->|
| |
|<------- ServerHello --------|
|<------ Certificate ---------| // 服务器证书
|<-- ServerKeyExchange ------>| // 可选
|<-- CertificateRequest ----->| // 可选（双向认证）
|<---- ServerHelloDone ------|
| |
|----- ClientCertificate ---->| // 可选
|---- ClientKeyExchange ----->|
|----- CertificateVerify ---->| // 可选
| |
|--- ChangeCipherSpec ------>|
|-------- Finished ---------->|
| |
|<--- ChangeCipherSpec ------|
|<------- Finished ----------|
| |
|===== 加密数据传输 =========|
`;
}
}
1.3 密钥计算过程
javascript
class KeyDerivation {
// 密钥生成流程
static generateKeys(clientRandom, serverRandom, preMasterSecret) {
// 1. 生成主密钥
const masterSecret = this.PRF(
preMasterSecret,
"master secret",
clientRandom + serverRandom,
48
);
// 2. 生成密钥块
const keyBlock = this.PRF(
masterSecret,
"key expansion",
serverRandom + clientRandom,
40 // 根据密码套件调整
);
// 3. 拆分密钥块
return {
clientWriteMACKey: keyBlock.slice(0, 20),
serverWriteMACKey: keyBlock.slice(20, 40),
clientWriteKey: keyBlock.slice(40, 56),
serverWriteKey: keyBlock.slice(56, 72),
clientWriteIV: keyBlock.slice(72, 76),
serverWriteIV: keyBlock.slice(76, 80)
};
}
// 伪随机函数（实际实现更复杂）
static PRF(secret, label, seed, length) {
// 实际使用HMAC-SHA256等算法
return this.HMAC(secret, label + seed).slice(0, length);
}
static HMAC(secret, data) {
// HMAC实现（简化）
return crypto.createHmac('sha256', secret)
.update(data)
.digest('hex');
}
}
1.4 TLS 1.3优化
javascript
class TLS13Handshake {
constructor() {
// TLS 1.3的重大改进
this.improvements = {
reducedRTT: "从2RTT减少到1RTT",
strongerCiphers: "移除不安全的加密套件",
zeroRTT: "支持0-RTT数据（有限制）",
improvedSecurity: "更安全的密钥交换"
};
// 简化握手流程
this.handshakeFlow = `
客户端 服务器
| |
|-------- ClientHello ----------->|
| key_share, supported_versions |
|<-------- ServerHello -----------|
| key_share, selected_version |
|<-------- EncryptedExtensions ---|
|<----------- Certificate ---------|
|<----- CertificateVerify --------|
|<----------- Finished ------------|
| |
|-------- Finished -------------->|
| |
|===== 1-RTT 加密数据传输 =======|
`;
}
// 0-RTT实现机制
getZeroRTTMechanism() {
return {
principle: "使用之前会话的预共享密钥",
steps: [
"1. 客户端存储之前会话的预主密钥",
"2. 在ClientHello中附带early_data扩展",
"3. 使用之前协商的密钥加密0-RTT数据",
"4. 服务器验证并接受或拒绝0-RTT数据"
],
limitations: [
"不能用于非幂等操作",
"存在重放攻击风险",
"需要额外安全措施"
]
};
}
}
1.5 证书验证过程
javascript
class CertificateValidation {
static validateCertificate(certificate, hostname) {
const validationSteps = [
{
step: "证书链验证",
process: "验证证书是否由可信CA签发",
implementation: this.verifyChain(certificate)
},
{
step: "有效期验证",
process: "检查证书是否在有效期内",
implementation: this.checkValidity(certificate)
},
{
step: "主机名验证",
process: "检查证书中的域名是否匹配",
implementation: this.verifyHostname(certificate, hostname)
},
{
step: "吊销状态检查",
process: "通过OCSP或CRL检查证书是否被吊销",
implementation: this.checkRevocation(certificate)
},
{
step: "密钥用途验证",
process: "检查证书是否可用于TLS服务器认证",
implementation: this.verifyKeyUsage(certificate)
}
];
return validationSteps;
}
// OCSP装订（OCSP Stapling）
static ocspStapling() {
return {
problem: "客户端单独查询OCSP会导致额外延迟",
solution: "服务器在TLS握手时附带OCSP响应",
benefits: [
"减少客户端验证延迟",
"保护客户端隐私",
"减轻OCSP服务器压力"
],
implementation: `
服务器在握手时附带：
CertificateStatus (OCSP响应)
`
};
}
}
1.6 性能优化策略
javascript
class HTTPSOptimization {
constructor() {
this.optimizations = {
sessionResumption: {
method: "会话恢复",
techniques: [
{
name: "Session ID",
description: "服务器存储会话信息",
advantage: "减少握手时间",
disadvantage: "服务器需要存储状态"
},
{
name: "Session Ticket",
description: "客户端存储加密的会话信息",
advantage: "服务器无状态",
disadvantage: "需要管理ticket密钥"
}
]
},
falseStart: {
description: "客户端在收到ChangeCipherSpec之前就开始发送加密数据",
condition: "使用前向安全密码套件",
benefit: "减少一个RTT",
risk: "服务器身份未完全验证"
},
connectionReuse: {
description: "HTTP/1.1 Keep-Alive和HTTP/2多路复用",
benefit: "减少TCP和TLS握手开销"
},
certificateOptimization: {
techniques: [
"使用ECDSA证书（比RSA更小更快）",
"证书链优化（只发送必要证书）",
"使用OCSP装订"
]
}
};
}
// HTTP/2与HTTPS的协同优化
getHTTP2Benefits() {
return {
headerCompression: "HPACK头部压缩",
multiplexing: "多路复用，避免队头阻塞",
serverPush: "服务器主动推送资源",
streamPrioritization: "流优先级控制"
};
}
}
1.7 实际配置示例
javascript
// Node.js HTTPS服务器配置
const https = require('https');
const fs = require('fs');
class SecureServer {
constructor() {
this.config = {
// 证书配置
cert: fs.readFileSync('./certs/server.crt'),
key: fs.readFileSync('./certs/server.key'),
ca: fs.readFileSync('./certs/ca.crt'), // 可选：客户端证书CA
// TLS版本控制
minVersion: 'TLSv1.2',
maxVersion: 'TLSv1.3',
// 密码套件配置（按优先级排序）
ciphers: [
'TLS_AES_256_GCM_SHA384', // TLS 1.3
'TLS_CHACHA20_POLY1305_SHA256', // TLS 1.3
'ECDHE-RSA-AES256-GCM-SHA384', // 前向安全
'ECDHE-RSA-AES128-GCM-SHA256',
'DHE-RSA-AES256-GCM-SHA384' // 兼容性
].join(':'),
// 安全选项
honorCipherOrder: true, // 使用服务器端的密码套件顺序
requestCert: false, // 是否要求客户端证书
rejectUnauthorized: true, // 拒绝未授权连接
// 会话配置
sessionTimeout: 300, // 会话超时时间（秒）
ticketKeys: this.generateTicketKeys()
};
}
createServer() {
const server = https.createServer(this.config, (req, res) => {
res.writeHead(200);
res.end('Secure Connection Established');
});
// 监听TLS事件
server.on('tlsClientError', (err, socket) => {
console.error('TLS Client Error:', err.message);
socket.destroy();
});
// 会话恢复统计
server.on('resumeSession', (sessionId, callback) => {
console.log('Session Resumed:', sessionId);
callback(null, this.getSession(sessionId));
});
return server;
}
// 生成会话ticket密钥
generateTicketKeys() {
// 实际实现中需要安全地生成和管理密钥
return Buffer.from(crypto.randomBytes(48));
}
// 安全HTTP头配置
getSecurityHeaders() {
return {
'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
'Content-Security-Policy': "default-src 'self'",
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'Referrer-Policy': 'strict-origin-when-cross-origin'
};
}
}
1.8 监控与调试
javascript
class TLSMonitor {
constructor() {
this.metrics = {
handshakeTime: [],
sessionResumptionRate: 0,
cipherSuiteUsage: {},
certificateExpiry: null
};
}
// 使用OpenSSL调试
getDebugCommands() {
return {
testConnection: 'openssl s_client -connect example.com:443 -tls1_2',
viewCertificate: 'openssl s_client -showcerts -connect example.com:443',
checkCiphers: 'nmap --script ssl-enum-ciphers -p 443 example.com',
testTLS13: 'openssl s_client -connect example.com:443 -tls1_3'
};
}
// Chrome开发者工具中的TLS信息
getChromeDevToolsInfo() {
return {
securityTab: "查看证书详情和连接安全性",
networkTab: "查看每个请求的TLS信息",
securityOverview: "HTTPS使用情况统计",
certificateViewer: "检查证书链和有效期"
};
}
}
二、浏览器渲染原理深度解析
2.1 关键渲染路径（Critical Rendering Path）
完整渲染流程
javascript
class CriticalRenderingPath {
constructor() {
this.stages = {
// 阶段1：构建对象模型
stage1: {
DOM: {
process: "HTML解析 → DOM树构建",
blockingFactors: ["同步JavaScript", "CSSOM构建"],
optimization: "异步加载、延迟非关键脚本"
},
CSSOM: {
process: "CSS解析 → CSSOM树构建",
blocking: "渲染阻塞资源",
optimization: "内联关键CSS、媒体查询"
}
},
// 阶段2：渲染树构建
stage2: {
renderTree: {
process: "DOM + CSSOM → 渲染树",
excludes: ["display: none", "head元素"],
includes: ["visibility: hidden"]
}
},
// 阶段3：布局
stage3: {
layout: {
process: "计算元素几何信息",
inputs: ["视口尺寸", "设备像素比"],
outputs: ["位置", "大小"],
triggers: ["窗口调整", "字体加载", "内容变化"]
}
},
// 阶段4：绘制
stage4: {
paint: {
process: "填充像素",
layers: "根据z-index、透明度等创建图层",
paintingOrder: "背景 → 边框 → 文本 → 轮廓"
}
},
// 阶段5：合成
stage5: {
compositing: {
process: "图层合并",
thread: "合成器线程（非主线程）",
hardwareAccelerated: "使用GPU加速"
}
}
};
}
}
2.2 详细渲染过程
2.2.1 DOM构建过程
javascript
class DOMParser {
constructor() {
this.process = {
tokenization: {
description: "将HTML字符转换为令牌",
algorithm: "状态机解析",
spec: "HTML5 Parsing Specification"
},
treeConstruction: {
description: "根据令牌构建DOM树",
rules: "HTML5 Tree Construction",
specialCases: [
"表格元素的隐式补全",
"脚本执行时的解析暂停",
"自闭合标签处理"
]
},
scriptParsing: {
blockingBehavior: {
sync: "阻塞DOM构建和渲染",
async: "不阻塞解析，下载后立即执行",
defer: "不阻塞解析，DOMContentLoaded前执行"
},
modernPattern: "使用type='module'实现延迟加载"
}
};
}
// 预加载扫描器
getPreloadScanner() {
return {
function: "在解析器工作时提前发现资源",
benefits: "并行下载，减少资源加载延迟",
implementation: "次要解析器，扫描token流"
};
}
}
2.2.2 CSSOM构建
javascript
class CSSProcessor {
constructor() {
// CSS渲染阻塞原理
this.renderBlocking = {
reason: "CSSOM必须完整构建才能确定样式",
solution: {
criticalCSS: "内联首屏所需CSS",
mediaQueries: "使用非阻塞媒体查询",
loadCSS: "使用loadCSS或preload"
}
};
// CSS选择器匹配性能
this.selectorPerformance = {
expensiveSelectors: [
"通配符 *",
"后代选择器 div p",
"属性选择器 [href='#']",
"伪类 :nth-child(n)"
],
optimizationTips: [
"使用类选择器替代标签选择器",
"避免深层次嵌套",
"使用BEM命名规范"
]
};
}
// CSS解析过程
parseCSS(cssText) {
const steps = [
{
step: "词法分析",
output: "CSS令牌流",
example: ".class { color: red; } → ['.', 'class', '{', 'color', ':', 'red', ';', '}']"
},
{
step: "语法分析",
output: "样式规则",
process: "构建CSSOM树"
},
{
step: "层叠计算",
output: "最终样式值",
factors: ["重要性", "特异性", "源代码顺序"]
}
];
return steps;
}
}
2.3 布局与重排
javascript
class LayoutEngine {
constructor() {
// 盒模型计算
this.boxModel = {
contentBox: "width/height",
paddingBox: "content + padding",
borderBox: "content + padding + border",
marginBox: "border + margin"
};
// 布局算法
this.layoutAlgorithms = {
normalFlow: "块级和内联布局",
flexbox: "弹性盒子布局",
grid: "网格布局",
float: "浮动布局",
positioning: "定位（absolute, fixed, sticky）"
};
}
// 重排（Reflow）触发条件
getReflowTriggers() {
return {
geometryChanges: [
"修改元素尺寸（width/height）",
"修改元素边距（margin/padding）",
"修改边框（border）",
"修改位置（position, top, left）"
],
contentChanges: [
"文本内容改变",
"图片尺寸变化",
"字体加载完成",
"表单输入"
],
styleChanges: [
"修改display属性",
"修改overflow属性",
"修改visibility属性"
],
domOperations: [
"添加/删除DOM元素",
"激活伪类（:hover）",
"计算offsetWidth/offsetHeight"
]
};
}
// 强制同步布局（Forced Synchronous Layout）
demonstrateForcedLayout() {
// 糟糕的代码 - 触发多次重排
function badExample() {
const element = document.getElementById('test');
// 第一次读取 - 触发布局
const width1 = element.offsetWidth;
// 修改样式 - 触发重排
element.style.width = (width1 + 100) + 'px';
// 第二次读取 - 再次触发布局
const width2 = element.offsetWidth;
// 再次修改
element.style.height = (width2 / 2) + 'px';
}
// 优化的代码 - 批量处理
function goodExample() {
const element = document.getElementById('test');
// 批量读取
const width = element.offsetWidth;
const height = element.offsetHeight;
// 批量修改
requestAnimationFrame(() => {
element.style.width = (width + 100) + 'px';
element.style.height = (height + 50) + 'px';
});
}
return { badExample, goodExample };
}
}
2.4 绘制与重绘
javascript
class PaintEngine {
constructor() {
// 绘制过程
this.paintingProcess = {
paintTasks: [
"背景绘制",
"边框绘制",
"文本绘制",
"阴影和渐变",
"图像绘制"
],
paintOrder: "按照CSS层叠顺序",
paintLayers: "根据堆叠上下文创建图层"
};
// 重绘（Repaint）优化
this.repaintOptimization = {
triggers: [
"颜色变化（color, background-color）",
"阴影变化（box-shadow, text-shadow）",
"背景图片变化",
"透明度变化（不触发重排）"
],
hardwareAcceleration: "使用transform和opacity触发GPU加速"
};
}
// 图层创建条件
getLayerCreationConditions() {
return {
explicit: [
"3D变换：transform: translate3d()",
"视频元素",
"WebGL Canvas",
"CSS滤镜"
],
implicit: [
"堆叠上下文（z-index）",
"半透明元素",
"overflow: hidden + transform",
"position: fixed"
]
};
}
// Chrome DevTools中的绘制分析
getPaintDebuggingTools() {
return {
paintFlashing: "高亮显示重绘区域",
layerBorders: "显示图层边界",
fpsMeter: "实时帧率监控",
performancePanel: "详细绘制时间线"
};
}
}
2.5 合成与GPU加速
javascript
class Compositor {
constructor() {
// 合成器线程工作流程
this.compositorWorkflow = {
inputHandling: "处理用户输入事件",
scrolling: "处理滚动（非主线程滚动）",
animation: "运行动画（transform/opacity）",
frameGeneration: "生成最终帧"
};
// 合成层的好处
this.compositingBenefits = {
independentPainting: "图层独立绘制",
gpuAcceleration: "GPU硬件加速",
efficientUpdates: "只更新变化图层",
smoothAnimations: "60fps流畅动画"
};
}
// 优化合成性能
getCompositingOptimizations() {
return {
willChange: {
usage: "提示浏览器即将发生的变化",
example: "will-change: transform",
caution: "不要过度使用，有内存开销"
},
transformZ: {
purpose: "触发GPU加速的hack",
example: "transform: translateZ(0)",
modernAlternative: "will-change"
},
backfaceVisibility: {
purpose: "触发硬件加速",
example: "backface-visibility: hidden"
}
};
}
// 帧生命周期
getFrameLifecycle() {
return `
┌─────────────────────────────────────────────┐
│ JavaScript / Event Handlers │
│ (requestAnimationFrame, input events) │
└─────────────────────┬───────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ Style Calculation │
│ (recalculate styles, update CSSOM) │
└─────────────────────┬───────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ Layout │
│ (reflow, calculate geometry) │
└─────────────────────┬───────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ Paint │
│ (paint into layers, record display lists) │
└─────────────────────┬───────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ Composite │
│ (rasterize, GPU upload, final frame) │
└─────────────────────┴───────────────────────┘
`;
}
}
2.6 性能优化实战
javascript
class RenderingOptimizations {
constructor() {
this.optimizations = {
// 加载优化
loading: {
lazyLoading: "延迟加载非关键资源",
resourceHinting: "使用preload、prefetch",
codeSplitting: "代码分割，按需加载"
},
// 渲染优化
rendering: {
contentVisibility: "使用content-visibility跳过离屏渲染",
contain: "使用CSS contain属性限制重排范围",
contentFitting: "使用aspect-ratio避免布局抖动"
},
// 动画优化
animation: {
principles: [
"使用transform和opacity",
"在requestAnimationFrame中更新",
"避免在动画中查询布局属性"
],
libraries: ["GSAP", "anime.js", "Framer Motion"]
},
// 内存优化
memory: {
layerManagement: "避免过多合成层",
imageOptimization: "合适尺寸，WebP格式",
domManagement: "虚拟列表，避免过多DOM节点"
}
};
}
// 性能监控API
getPerformanceAPIs() {
return {
PerformanceObserver: "监控性能条目",
PaintTiming: "获取FCP、LCP时间",
LayoutShift: "测量布局偏移",
LongTask: "监控长任务",
Memory: "监控内存使用"
};
}
// 实际优化示例
practicalExamples() {
return {
// 示例1：虚拟滚动
virtualScrolling: `
// 传统列表 vs 虚拟列表
传统列表: 1000个DOM节点
虚拟列表: 10-20个DOM节点（视口可见部分）
内存减少: 98%
滚动性能: 60fps
`,
// 示例2：图片优化
imageOptimization: `
1. 使用正确的尺寸
<img src="image.jpg" width="300" height="200">
2. 使用现代格式
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg">
</picture>
3. 懒加载
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">
`,
// 示例3：CSS优化
cssOptimization: `
避免:
.nav li a {} /* 过度具体的选择器 */
使用:
.nav-link {} /* 类选择器 */
优化动画:
.box {
/* 优化前 */
left: 100px;
transition: left 0.3s;
/* 优化后 */
transform: translateX(100px);
transition: transform 0.3s;
}
`
};
}
}
2.7 浏览器差异与兼容性
javascript
class BrowserRenderingDifferences {
constructor() {
this.differences = {
// 渲染引擎差异
renderingEngines: {
blink: "Chrome, Edge, Opera - Google",
webkit: "Safari - Apple",
gecko: "Firefox - Mozilla"
},
// 布局差异
layoutDifferences: {
flexbox: "不同版本实现有差异",
grid: "IE有前缀且支持有限",
positionSticky: "某些浏览器需要前缀"
},
// 合成差异
compositingDifferences: {
layerCreation: "不同浏览器阈值不同",
gpuAcceleration: "不同GPU和驱动表现不同",
willChange: "支持程度和行为差异"
}
};
}
// 跨浏览器测试策略
getCrossBrowserTesting() {
return {
featureDetection: "使用@supports检测CSS特性支持",
progressiveEnhancement: "基础功能+增强体验",
polyfills: "为旧浏览器提供现代功能",
browserHacks: "谨慎使用，优先使用标准方案"
};
}
}
三、前端安全深度解析
3.1 安全威胁分类
javascript
class SecurityThreats {
constructor() {
this.categories = {
injection: {
xss: "跨站脚本攻击",
sqlInjection: "SQL注入（虽然主要在后端）",
commandInjection: "命令注入"
},
brokenAuth: {
sessionHijacking: "会话劫持",
credentialStuffing: "凭证填充",
weakPasswords: "弱密码"
},
sensitiveData: {
dataExposure: "敏感数据泄露",
insufficientEncryption: "加密不足",
sideChannel: "旁路攻击"
},
accessControl: {
brokenAccessControl: "访问控制失效",
idor: "不安全的直接对象引用",
csrf: "跨站请求伪造"
},
securityMisconfig: {
defaultConfigs: "默认配置",
exposedFiles: "暴露文件",
verboseErrors: "详细错误信息"
}
};
}
}
3.2 XSS攻击与防御
javascript
class XSSProtection {
constructor() {
// XSS类型
this.types = {
reflected: {
description: "恶意脚本来自当前HTTP请求",
example: "?search=<script>alert(1)</script>",
prevention: "输入验证，输出编码"
},
stored: {
description: "恶意脚本存储到服务器",
example: "评论区注入脚本",
prevention: "严格的输入过滤"
},
domBased: {
description: "通过修改DOM触发",
example: "innerHTML注入",
prevention: "安全的DOM操作"
}
};
}
// 防御策略
getDefenseStrategies() {
return {
// 1. 输入验证
inputValidation: {
whitelist: "只允许特定字符",
blacklist: "阻止危险字符（不够安全）",
sanitization: "清理危险内容"
},
// 2. 输出编码
outputEncoding: {
htmlEncoding: "将<转义为<",
jsEncoding: "将'转义为\\'",
urlEncoding: "encodeURIComponent"
},
// 3. 内容安全策略
csp: {
directives: {
defaultSrc: "'self'",
scriptSrc: "'self' 'nonce-random123'",
styleSrc: "'self' 'unsafe-inline'",
imgSrc: "'self' data:",
connectSrc: "'self' api.example.com"
},
reportOnly: "监控而不阻止",
nonce: "一次性随机数"
},
// 4. 安全API
safeAPIs: {
textContent: "代替innerHTML",
addEventListener: "代替onclick属性",
encodeURIComponent: "URL编码"
}
};
}
// 实际防御代码
practicalDefenses() {
return {
// 安全DOM操作
safeDOM: `
// 不安全
element.innerHTML = userInput;
// 安全
element.textContent = userInput;
`,
// 模板字面量安全
templateSafety: `
// 不安全 - 模板注入
const html = \`<div>\${userInput}</div>\`;
// 安全 - 编码
const safeHtml = \`<div>\${this.encodeHTML(userInput)}</div>\`;
`,
// CSP配置
cspImplementation: `
// HTTP头
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-${nonce}';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
// HTML中使用nonce
<script nonce="${nonce}">
// 内联脚本
</script>
`
};
}
}
3.3 CSRF攻击与防御
javascript
class CSRFProtection {
constructor() {
this.attackMechanism = {
steps: [
"1. 用户登录目标网站",
"2. 用户访问恶意网站",
"3. 恶意网站自动提交表单到目标网站",
"4. 浏览器携带Cookie，请求被执行"
],
prerequisites: [
"目标网站使用Cookie进行身份认证",
"目标网站没有CSRF防护",
"用户可以访问恶意网站"
]
};
}
// 防御措施
getProtectionMethods() {
return {
// 1. CSRF Token
csrfToken: {
implementation: "每个表单包含随机Token",
verification: "服务器验证Token匹配",
storage: "Session或JWT中存储",
example: `
// 服务器生成Token
const token = crypto.randomBytes(32).toString('hex');
// 表单中包含Token
<input type="hidden" name="_csrf" value="${token}">
// 服务器验证
if (req.body._csrf !== session.csrfToken) {
throw new Error('CSRF token invalid');
}
`
},
// 2. SameSite Cookie
sameSiteCookie: {
values: {
strict: "完全禁止跨站携带",
lax: "允许顶级导航携带",
none: "允许跨站携带（需要Secure）"
},
implementation: `
Set-Cookie: sessionId=abc123; SameSite=Lax; Secure
`
},
// 3. 双重Cookie验证
doubleSubmitCookie: {
principle: "请求参数和Cookie中都包含Token",
implementation: "前端JavaScript读取Cookie设置到请求头"
},
// 4. 其他措施
otherMeasures: {
refererCheck: "检查Referer头部",
originCheck: "检查Origin头部",
captcha: "重要操作需要验证码",
reauthentication: "敏感操作重新认证"
}
};
}
// 现代框架中的CSRF防护
getFrameworkProtections() {
return {
express: "csurf中间件",
django: "内置CSRF中间件",
laravel: "VerifyCsrfToken中间件",
angular: "HttpClient内置XSRF防护"
};
}
}
3.4 点击劫持防御
javascript
class ClickjackingProtection {
constructor() {
this.attackMethod = {
technique: "使用透明iframe覆盖目标页面",
goal: "诱导用户点击恶意内容",
example: "虚假点赞、关注、转账按钮"
};
}
getDefenses() {
return {
// X-Frame-Options
xFrameOptions: {
values: {
DENY: "禁止任何框架嵌入",
SAMEORIGIN: "只允许同源框架",
ALLOWFROM: "允许特定来源（已废弃）"
},
implementation: `
// Nginx配置
add_header X-Frame-Options "SAMEORIGIN";
// Express中间件
app.use(helmet.frameguard({ action: 'sameorigin' }));
`
},
// CSP frame-ancestors
cspFrameAncestors: {
directive: "frame-ancestors 'self'",
advantage: "比X-Frame-Options更灵活",
example: "Content-Security-Policy: frame-ancestors 'self' https://trusted.com;"
},
// 帧破坏脚本
frameBusting: {
technique: "JavaScript检查是否被嵌套",
code: `
if (top !== self) {
top.location = self.location;
}
`,
limitation: "可以被攻击者绕过"
},
// 视觉提示
visualIndicators: {
techniques: [
"网站徽章",
"颜色编码",
"悬浮效果"
]
}
};
}
}
3.5 安全头部配置
javascript
class SecurityHeaders {
constructor() {
this.headers = {
// 强制HTTPS
hsts: {
header: "Strict-Transport-Security",
value: "max-age=31536000; includeSubDomains; preload",
purpose: "强制使用HTTPS连接"
},
// 内容安全策略
csp: {
header: "Content-Security-Policy",
purpose: "控制资源加载",
reportUri: "违规报告地址"
},
// 防止MIME嗅探
contentTypeOptions: {
header: "X-Content-Type-Options",
value: "nosniff",
purpose: "阻止浏览器猜测内容类型"
},
// 防止点击劫持
frameOptions: {
header: "X-Frame-Options",
values: ["DENY", "SAMEORIGIN"]
},
// 防止XSS
xssProtection: {
header: "X-XSS-Protection",
value: "1; mode=block",
note: "已废弃，推荐使用CSP"
},
// 引用策略
referrerPolicy: {
header: "Referrer-Policy",
values: [
"no-referrer",
"no-referrer-when-downgrade",
"origin",
"strict-origin"
]
},
// 权限策略
permissionsPolicy: {
header: "Permissions-Policy",
purpose: "控制浏览器功能访问",
example: "geolocation=(), camera=(), microphone=()"
}
};
}
// 完整配置示例
getCompleteConfig() {
return {
nginx: `
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;";
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "SAMEORIGIN";
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Permissions-Policy "geolocation=(), camera=()";
`,
express: `
const helmet = require('helmet');
app.use(helmet({
hsts: {
maxAge: 31536000,
includeSubDomains: true,
preload: true
},
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "'unsafe-inline'"],
styleSrc: ["'self'", "'unsafe-inline'"],
imgSrc: ["'self'", "data:", "https:"]
}
},
referrerPolicy: { policy: "strict-origin-when-cross-origin" }
}));
`
};
}
}
3.6 现代前端安全实践
javascript
class ModernSecurityPractices {
constructor() {
this.practices = {
// 依赖安全
dependencySecurity: {
npmAudit: "定期检查依赖漏洞",
snyk: "持续安全监控",
lockFiles: "使用package-lock.json",
versionPinning: "固定依赖版本"
},
// API安全
apiSecurity: {
rateLimiting: "防止暴力攻击",
inputValidation: "验证所有输入",
outputEncoding: "编码所有输出",
authTokens: "使用JWT或OAuth"
},
// 前端代码安全
codeSecurity: {
minification: "混淆代码",
sourceMaps: "生产环境不暴露source maps",
envVariables: "不在前端暴露敏感配置",
codeReview: "安全代码审查"
},
// 监控与响应
monitoring: {
errorTracking: "Sentry, LogRocket",
securityHeaders: "定期检查安全头部",
penetrationTesting: "渗透测试",
bugBounty: "漏洞赏金计划"
}
};
}
// 安全开发生命周期
getSecuritySDL() {
return {
training: "安全开发培训",
requirements: "安全需求分析",
design: "安全架构设计",
implementation: "安全编码实践",
verification: "安全测试",
release: "安全发布",
response: "安全应急响应"
};
}
}
四、状态管理深度解析
4.1 状态管理演进历程
javascript
class StateManagementEvolution {
constructor() {
this.timeline = {
// 阶段1：无状态管理
phase1: {
era: "jQuery时代",
approach: "DOM直接操作",
problems: ["状态分散", "难以维护", "代码混乱"]
},
// 阶段2：简单状态管理
phase2: {
era: "早期MV*框架",
approaches: ["Backbone Models", "Angular Services"],
improvements: ["状态集中", "数据绑定"]
},
// 阶段3：单向数据流
phase3: {
era: "React + Flux时代",
pattern: "Action → Dispatcher → Store → View",
implementations: ["Redux", "Vuex", "NgRx"]
},
// 阶段4：现代化方案
phase4: {
era: "Hook时代",
approaches: ["Context + useReducer", "Recoil", "Zustand", "Jotai"],
characteristics: ["轻量", "组合", "TypeScript友好"]
}
};
}
}
4.2 状态管理方案对比
javascript
class StateManagementComparison {
constructor() {
this.comparison = {
// Redux
redux: {
architecture: "严格单向数据流",
concepts: ["Store", "Action", "Reducer", "Middleware"],
strengths: ["可预测性", "强大中间件", "时间旅行调试"],
weaknesses: ["样板代码多", "学习曲线陡峭"],
bestFor: "大型复杂应用，需要强约束"
},
// MobX
mobx: {
architecture: "响应式编程",
concepts: ["Observable", "Action", "Computed", "Reaction"],
strengths: ["简洁API", "自动依赖追踪", "学习曲线平缓"],
weaknesses: ["魔法过多", "调试困难"],
bestFor: "快速开发，减少样板代码"
},
// Context API
context: {
architecture: "React内置方案",
concepts: ["Provider", "Consumer", "useContext"],
strengths: ["内置无需安装", "简单场景适用"],
weaknesses: ["性能问题", "不适合复杂状态"],
bestFor: "主题、用户信息等全局状态"
},
// Recoil
recoil: {
architecture: "原子化状态管理",
concepts: ["Atom", "Selector", "Snapshot"],
strengths: ["细粒度更新", "异步支持", "React集成好"],
weaknesses: ["相对较新", "生态系统较小"],
bestFor: "大型React应用，需要细粒度控制"
},
// Zustand
zustand: {
architecture: "简化Flux模式",
concepts: ["Store", "setState", "subscribe"],
strengths: ["极简API", "TypeScript友好", "无样板代码"],
weaknesses: ["社区相对较小"],
bestFor: "中小型应用，追求简洁"
}
};
}
// 选择指南
getSelectionGuide() {
return {
projectSize: {
small: "Context API / Zustand",
medium: "Zustand / Recoil",
large: "Redux / Recoil / MobX"
},
teamExperience: {
reactNovice: "Context API → Zustand",
experienced: "Redux / Recoil / MobX",
functionalProgramming: "Redux",
oopBackground: "MobX"
},
requirements: {
needTimeTravel: "Redux",
needAsyncOperations: "Redux + RTK Query / Recoil",
needSimpleAPI: "Zustand",
needFineGrainedUpdates: "Recoil / MobX"
}
};
}
}
4.3 Redux深度实现
javascript
class ReduxImplementation {
constructor() {
// Redux核心原理
this.corePrinciples = {
singleSourceOfTruth: "单一状态树",
stateIsReadOnly: "状态只读",
changesViaPureFunctions: "通过纯函数修改"
};
}
// 手写Redux核心
createReduxCore() {
// 1. createStore实现
function createStore(reducer, preloadedState, enhancer) {
if (typeof enhancer !== 'undefined') {
return enhancer(createStore)(reducer, preloadedState);
}
let currentState = preloadedState;
let currentListeners = [];
let isDispatching = false;
function getState() {
if (isDispatching) {
throw new Error('正在dispatch时不能调用getState');
}
return currentState;
}
function subscribe(listener) {
if (isDispatching) {
throw new Error('正在dispatch时不能调用subscribe');
}
let isSubscribed = true;
currentListeners.push(listener);
return function unsubscribe() {
if (!isSubscribed) return;
if (isDispatching) {
throw new Error('正在dispatch时不能调用unsubscribe');
}
isSubscribed = false;
const index = currentListeners.indexOf(listener);
currentListeners.splice(index, 1);
};
}
function dispatch(action) {
if (typeof action.type === 'undefined') {
throw new Error('Action必须包含type属性');
}
if (isDispatching) {
throw new Error('Reducers不能dispatch action');
}
try {
isDispatching = true;
currentState = reducer(currentState, action);
} finally {
isDispatching = false;
}
const listeners = currentListeners.slice();
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i];
listener();
}
return action;
}
// 初始化状态
dispatch({ type: '@@redux/INIT' });
return {
dispatch,
subscribe,
getState,
replaceReducer
};
}
// 2. combineReducers实现
function combineReducers(reducers) {
const reducerKeys = Object.keys(reducers);
return function combination(state = {}, action) {
let hasChanged = false;
const nextState = {};
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i];
const reducer = reducers[key];
const previousStateForKey = state[key];
const nextStateForKey = reducer(previousStateForKey, action);
nextState[key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
hasChanged = hasChanged || reducerKeys.length !== Object.keys(state).length;
return hasChanged ? nextState : state;
};
}
// 3. applyMiddleware实现
function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState) => {
const store = createStore(reducer, preloadedState);
let dispatch = () => {
throw new Error('正在构建middleware时不能dispatch');
};
const middlewareAPI = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args)
};
const chain = middlewares.map(middleware => middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);
return {
...store,
dispatch
};
};
}
function compose(...funcs) {
if (funcs.length === 0) {
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce((a, b) => (...args) => a(b(...args)));
}
return {
createStore,
combineReducers,
applyMiddleware,
compose
};
}
// Redux中间件实现
createMiddleware() {
// 1. 日志中间件
const loggerMiddleware = (store) => (next) => (action) => {
console.group(action.type);
console.log('prev state:', store.getState());
console.log('action:', action);
const result = next(action);
console.log('next state:', store.getState());
console.groupEnd();
return result;
};
// 2. 异步中间件（类似redux-thunk）
const thunkMiddleware = (store) => (next) => (action) => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return next(action);
};
// 3. Promise中间件
const promiseMiddleware = (store) => (next) => (action) => {
if (!action.payload || !action.payload.then) {
return next(action);
}
action.payload.then(
(response) => next({ ...action, payload: response }),
(error) => next({ ...action, payload: error, error: true })
);
};
return {
loggerMiddleware,
thunkMiddleware,
promiseMiddleware
};
}
}
4.4 Redux Toolkit最佳实践
javascript
class ReduxToolkitPractices {
constructor() {
// RTK核心特性
this.features = {
configureStore: "封装createStore，默认包含Redux DevTools",
createSlice: "自动生成action creators和reducer",
createAsyncThunk: "简化异步操作",
createEntityAdapter: "标准化实体管理",
RTKQuery: "数据获取和缓存解决方案"
};
}
// 完整示例
createCompleteExample() {
return {
// 1. 创建slice
userSlice: `
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// 异步thunk
export const fetchUserById = createAsyncThunk(
'users/fetchById',
async (userId, { rejectWithValue }) => {
try {
const response = await fetch(\`/api/users/\${userId}\`);
return await response.json();
} catch (error) {
return rejectWithValue(error.message);
}
}
);
// 创建slice
const userSlice = createSlice({
name: 'users',
initialState: {
entities: {},
loading: 'idle',
error: null
},
reducers: {
addUser: (state, action) => {
state.entities[action.payload.id] = action.payload;
},
updateUser: (state, action) => {
const { id, ...changes } = action.payload;
if (state.entities[id]) {
Object.assign(state.entities[id], changes);
}
}
},
extraReducers: (builder) => {
builder
.addCase(fetchUserById.pending, (state) => {
state.loading = 'pending';
})
.addCase(fetchUserById.fulfilled, (state, action) => {
state.loading = 'succeeded';
state.entities[action.payload.id] = action.payload;
})
.addCase(fetchUserById.rejected, (state, action) => {
state.loading = 'failed';
state.error = action.payload;
});
}
});
export const { addUser, updateUser } = userSlice.actions;
export default userSlice.reducer;
`,
// 2. 配置store
configureStore: `
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';
import { api } from './api';
export const store = configureStore({
reducer: {
users: userReducer,
[api.reducerPath]: api.reducer
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
devTools: process.env.NODE_ENV !== 'production'
});
`,
// 3. RTK Query示例
rtkQuery: `
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
tagTypes: ['User', 'Post'],
endpoints: (builder) => ({
getUsers: builder.query({
query: () => 'users',
providesTags: ['User']
}),
getUserById: builder.query({
query: (id) => \`users/\${id}\`,
providesTags: (result, error, id) =>
[{ type: 'User', id }]
}),
createUser: builder.mutation({
query: (user) => ({
url: 'users',
method: 'POST',
body: user
}),
invalidatesTags: ['User']
})
})
});
export const {
useGetUsersQuery,
useGetUserByIdQuery,
useCreateUserMutation
} = api;
`
};
}
// 性能优化
getPerformanceOptimizations() {
return {
memoization: "使用Reselect创建记忆化选择器",
normalizedState: "状态规范化，避免嵌套",
entityAdapter: "使用createEntityAdapter管理实体",
batchUpdates: "使用unstable_batchedUpdates批量更新"
};
}
}
4.5 现代状态管理模式
javascript
class ModernStatePatterns {
constructor() {
// 状态管理架构模式
this.patterns = {
// 1. 领域驱动设计
ddd: {
concepts: ["实体", "值对象", "聚合根", "领域事件"],
implementation: "使用Redux + 规范化状态"
},
// 2. 命令查询职责分离
cqrs: {
principle: "读写分离",
readModel: "优化查询性能",
writeModel: "处理业务逻辑",
sync: "通过事件同步"
},
// 3. 事件溯源
eventSourcing: {
principle: "存储事件而非状态",
benefits: ["完整审计", "时间旅行", "重建状态"],
challenges: ["查询复杂", "存储量大"]
},
// 4. 原子化状态
atomicState: {
principle: "状态细分为原子单元",
implementations: ["Recoil Atoms", "Jotai Atoms"],
benefits: ["细粒度更新", "代码组织灵活"]
}
};
}
// 状态管理模式选择
getPatternSelection() {
return {
ecommerce: {
recommendation: "DDD + 事件溯源",
reason: "需要完整订单历史，强一致性"
},
socialMedia: {
recommendation: "CQRS + 原子化状态",
reason: "读多写少，需要快速响应"
},
dashboard: {
recommendation: "原子化状态",
reason: "多个独立小部件，需要细粒度控制"
},
realtimeApp: {
recommendation: "事件驱动架构",
reason: "需要实时更新，处理流数据"
}
};
}
}
4.6 状态管理测试策略
javascript
class StateManagementTesting {
constructor() {
this.testingStrategies = {
// Redux测试
reduxTesting: {
actionCreators: "测试纯函数返回正确的action",
reducers: "测试给定状态和action返回新状态",
selectors: "测试从状态中提取数据",
middleware: "测试中间件行为"
},
// 异步测试
asyncTesting: {
thunks: "测试异步action creators",
sagas: "测试generator函数",
epics: "测试RxJS流"
},
// 集成测试
integrationTesting: {
componentIntegration: "测试组件与store的交互",
e2eTesting: "完整用户流程测试"
}
};
}
// 测试示例
getTestExamples() {
return {
// Reducer测试
reducerTest: `
import reducer, { initialState } from './reducer';
import { addTodo, toggleTodo } from './actions';
describe('todos reducer', () => {
it('应该返回初始状态', () => {
expect(reducer(undefined, {})).toEqual(initialState);
});
it('应该处理ADD_TODO', () => {
const action = addTodo('Test todo');
const newState = reducer(initialState, action);
expect(newState.todos).toHaveLength(1);
expect(newState.todos[0].text).toBe('Test todo');
expect(newState.todos[0].completed).toBe(false);
});
});
`,
// Selector测试
selectorTest: `
import { getVisibleTodos } from './selectors';
describe('todos selectors', () => {
it('应该过滤已完成的任务', () => {
const state = {
todos: {
items: [
{ id: 1, text: 'Todo 1', completed: false },
{ id: 2, text: 'Todo 2', completed: true }
],
filter: 'active'
}
};
const result = getVisibleTodos(state);
expect(result).toHaveLength(1);
expect(result[0].id).toBe(1);
});
});
`,
// 异步action测试
asyncActionTest: `
import { fetchUser } from './actions';
configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
describe('async actions', () => {
it('创建成功获取用户的action', () => {
const expectedActions = [
{ type: 'FETCH_USER_REQUEST' },
{ type: 'FETCH_USER_SUCCESS', payload: { id: 1 } }
];
const store = mockStore({});
return store.dispatch(fetchUser(1))
.then(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});
});
`
};
}
}
4.7 状态迁移与版本管理
javascript
class StateMigration {
constructor() {
this.migrationStrategies = {
// 版本化状态
versioning: {
approach: "在状态中包含版本号",
migration: "根据版本号执行迁移脚本",
example: `
const initialState = {
version: 1,
data: { /* ... */ }
};
`
},
// 渐进式迁移
incrementalMigration: {
approach: "新旧状态格式共存",
strategy: "逐步迁移，双向同步"
},
// 向后兼容
backwardCompatibility: {
techniques: [
"默认值填充",
"类型转换",
"字段别名"
]
},
// 工具支持
tools: {
reduxPersist: "支持状态迁移的持久化库",
immutableJS: "不可变数据结构简化迁移"
}
};
}
// 迁移示例
getMigrationExample() {
return {
version1: {
structure: `
// v1 - 扁平结构
{
todos: [
{ id: 1, text: 'Todo 1', completed: false },
{ id: 2, text: 'Todo 2', completed: true }
]
}
`
},
version2: {
structure: `
// v2 - 规范化结构
{
todos: {
ids: [1, 2],
entities: {
1: { id: 1, text: 'Todo 1', completed: false },
2: { id: 2, text: 'Todo 2', completed: true }
}
}
}
`,
migration: `
function migrateV1toV2(stateV1) {
const entities = {};
const ids = [];
stateV1.todos.forEach(todo => {
entities[todo.id] = todo;
ids.push(todo.id);
});
return {
todos: { ids, entities }
};
}
`
}
};
}
}
总结
这些前端核心面试题涵盖了现代Web开发的关键领域：
-
HTTPS握手：理解加密通信原理，优化TLS性能
-
浏览器渲染：掌握关键渲染路径，优化页面性能
-
前端安全：实施纵深防御，保护用户和数据安全
-
状态管理：选择合适的架构，构建可维护应用
欢迎加入北京社区
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)