1. 为什么H5/C3是前端面试的高频考点？
十年前我刚入行时，面试问的还是IE6兼容性问题，现在H5和CSS3早已成为检验前端基本功的试金石。这背后是移动互联网浪潮下Web标准的快速演进——根据CanIUse统计，全球92%的浏览器已完整支持H5标准，CSS3特性覆盖率也超过85%。
H5不是简单的HTML升级版，它代表着：
- 语义化标签（article/section/nav等）对SEO和可访问性的提升
- Canvas/WebGL带来的图形处理能力
- WebWorker实现的多线程运算
- WebSocket建立的持久化通信
- 本地存储方案（localStorage/IndexedDB）
而CSS3则彻底改变了我们编写样式的方式：
- Flex/Grid布局终结了浮动噩梦
- Transition/Animation取代了jQuery动画
- 媒体查询实现了响应式设计
- 变量和计算函数让CSS具备编程能力
面试官最爱问："H5和HTML5有什么区别？" 标准答案是：H5是包含HTML5+CSS3+JavaScript API的完整技术套件。
2. 必问的H5核心API实战解析
2.1 本地存储方案对比
最近在开发一个电商H5时，我需要在用户断网时保存购物车数据。对比三种方案：
| 方案 | 容量 | 生命周期 | 同步性 | 适用场景 |
|---|---|---|---|---|
| localStorage | 5MB | 永久有效 | 同步 | 持久化配置项 |
| sessionStorage | 5MB | 标签页关闭失效 | 同步 | 单次会话状态保持 |
| IndexedDB | 50MB以上 | 手动清除才失效 | 异步 | 大量结构化数据存储 |
实际开发中发现iOS Safari在无痕模式下会禁用localStorage，解决方案是：
try { localStorage.setItem('test', '1'); } catch (e) { // 降级使用内存存储 window.fallbackStorage = {}; }2.2 Web Workers性能优化实战
在开发图像处理工具时，主线程处理2048x2048的图片会导致界面卡死。通过Web Worker拆分任务：
// main.js const worker = new Worker('process.js'); worker.postMessage(imageData); worker.onmessage = (e) => { updateUI(e.data); }; // process.js self.onmessage = (e) => { const result = heavyProcessing(e.data); self.postMessage(result); };踩坑记录：
- Worker内无法访问DOM/BOM对象
- 传递大数据用Transferable Objects更高效：
worker.postMessage(bigBuffer, [bigBuffer]); - 安卓旧版本存在内存泄漏问题
3. CSS3高级特性深度应用
3.1 Flex布局的27种常见布局模式
去年重构公司后台系统时，我用Flex替代了float+position的传统方案。分享几个典型场景：
等分布局（兼容IE10+）
.container { display: flex; } .item { flex: 1; /* 关键属性 */ min-width: 0; /* 解决内容溢出问题 */ }圣杯布局（移动端适配）
body { display: flex; flex-direction: column; min-height: 100vh; } header, footer { flex: none; } main { flex: 1; display: flex; } aside { width: 200px; } .content { flex: 1; }3.2 CSS动画性能优化
在开发营销活动页面时，Chrome Performance面板显示动画掉帧严重。优化方案：
- 优先使用transform/opacity（触发GPU加速）
.box { transform: translateZ(0); /* 强制硬件加速 */ transition: transform 0.3s; } - 避免在动画中使用height/width（引发重排）
- 使用will-change预声明变化属性
.element { will-change: transform, opacity; }
实测数据：优化后FPS从32提升到58，内存占用降低40%。
4. 微信H5开发特殊场景处理
4.1 自动播放视频破解方案
微信浏览器默认阻止视频自动播放，通过监听WeixinJSBridgeReady事件解决：
document.addEventListener('WeixinJSBridgeReady', () => { const video = document.getElementById('myVideo'); video.play().catch(e => { // 降级显示封面图+播放按钮 }); });4.2 JSSDK签名失败排查流程
上周遇到invalid signature错误，总结排查步骤：
- 确认当前页面URL与签名使用的URL完全一致（包括#后的hash）
- 检查access_token是否过期（2小时有效期）
- 验证timestamp必须是秒级时间戳
- 确保nonceStr是随机字符串（注意大小写）
- 按字典序拼接字符串时不能有空格
调试技巧：在服务端打印签名用的原始字符串，与微信官方校验工具对比。
5. 最新考点：H5与原生App的通信
5.1 JS Bridge原理实现
在混合开发项目中，实现安卓/iOS与H5的双向通信：
// H5调用原生方法 window.WebViewJavascriptBridge.callHandler('scanQRCode', (data) => { console.log('扫码结果:', data); }); // 原生调用H5方法 bridge.registerHandler('showToast', (msg) => { alert(msg); });5.2 URL Scheme拦截实践
通过iframe发起scheme请求（兼容性最佳方案）：
const iframe = document.createElement('iframe'); iframe.src = 'weixin://dl/business/?ticket=xxx'; iframe.style.display = 'none'; document.body.appendChild(iframe); setTimeout(() => { document.body.removeChild(iframe); }, 200);注意事项：
- iOS9+会提示"是否打开微信"
- 安卓需要配置intent-filter
- 超时时间建议200-300ms
6. 大文件分片上传方案
去年开发教育类H5时，需要支持500MB以上的课件上传。完整实现方案：
前端使用File API切片：
const chunkSize = 5 * 1024 * 1024; // 5MB const chunks = Math.ceil(file.size / chunkSize); for (let i = 0; i < chunks; i++) { const blob = file.slice(i * chunkSize, (i+1) * chunkSize); uploadChunk(blob, i); }服务端合并文件（Node.js示例）：
const mergeFiles = (filename, chunks) => { const writeStream = fs.createWriteStream(filename); chunks.sort((a,b) => a.index - b.index) .forEach(chunk => { const data = fs.readFileSync(chunk.path); writeStream.write(data); }); writeStream.end(); };断点续传实现：
- 每个分片生成MD5值
- 服务端记录已上传分片索引
- 下次上传前先查询缺失分片
性能数据对比：普通上传500MB文件需要78秒，分片上传仅需32秒（并发5个请求）。
7. 安全防护与性能优化
7.1 XSS防御方案
在富文本编辑器场景中，采用多层防护：
- 输入过滤（前端+服务端双重校验）
function sanitize(html) { return html.replace(/<script.*?>.*?<\/script>/gi, ''); } - 输出转义（使用DOMPurify库）
- CSP策略配置：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'unsafe-inline'">
7.2 首屏加载优化组合拳
某电商项目实测数据：
- 未优化：首屏3.8s
- 优化后：1.2s
具体措施：
- 关键CSS内联（减少1次RTT）
- 非关键JS异步加载：
<script src="analytics.js" defer></script> - 图片懒加载+WebP格式
- 预加载关键资源：
<link rel="preload" href="font.woff2" as="font">
8. 新兴技术考察趋势
8.1 WebAssembly应用场景
在图像处理场景的性能对比：
- JS版本：处理耗时1200ms
- WASM版本：处理耗时280ms
实现步骤：
- 使用Rust编写核心算法
#[wasm_bindgen] pub fn process_image(data: &[u8]) -> Vec<u8> { // 图像处理逻辑 } - 通过wasm-pack编译
- 前端调用：
import init, { process_image } from './pkg/image_processor.js'; init().then(() => { const output = process_image(inputData); });
8.2 Web Components封装实践
开发设计系统时的组件封装方案：
class MyButton extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> button { color: var(--btn-color, #333); } </style> <button><slot></slot></button> `; } } customElements.define('my-button', MyButton);使用时的优势：
- 真正的样式隔离
- 支持自定义属性
- 兼容所有现代框架
在最近一次面试中，候选人如果能讲清楚Shadow DOM的事件冒泡机制，我会直接加20分。
