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是包含HTML5CSS3JavaScript API的完整技术套件。2. 必问的H5核心API实战解析2.1 本地存储方案对比最近在开发一个电商H5时我需要在用户断网时保存购物车数据。对比三种方案方案容量生命周期同步性适用场景localStorage5MB永久有效同步持久化配置项sessionStorage5MB标签页关闭失效同步单次会话状态保持IndexedDB50MB以上手动清除才失效异步大量结构化数据存储实际开发中发现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替代了floatposition的传统方案。分享几个典型场景等分布局兼容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/?ticketxxx; iframe.style.display none; document.body.appendChild(iframe); setTimeout(() { document.body.removeChild(iframe); }, 200);注意事项iOS9会提示是否打开微信安卓需要配置intent-filter超时时间建议200-300ms6. 大文件分片上传方案去年开发教育类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, (i1) * 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-equivContent-Security-Policy contentdefault-src self; script-src unsafe-inline7.2 首屏加载优化组合拳某电商项目实测数据未优化首屏3.8s优化后1.2s具体措施关键CSS内联减少1次RTT非关键JS异步加载script srcanalytics.js defer/script图片懒加载WebP格式预加载关键资源link relpreload hreffont.woff2 asfont8. 新兴技术考察趋势8.1 WebAssembly应用场景在图像处理场景的性能对比JS版本处理耗时1200msWASM版本处理耗时280ms实现步骤使用Rust编写核心算法#[wasm_bindgen] pub fn process_image(data: [u8]) - Vecu8 { // 图像处理逻辑 }通过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 buttonslot/slot/button ; } } customElements.define(my-button, MyButton);使用时的优势真正的样式隔离支持自定义属性兼容所有现代框架在最近一次面试中候选人如果能讲清楚Shadow DOM的事件冒泡机制我会直接加20分。