H5高频面试题

一、HTML5 新特性

1. HTML5 新增了哪些语义化标签？有什么作用？

• 常用标签：<header>、<footer>、<nav>、<article>、<section>、<aside>、<main>。
• 作用：
  • 提升代码可读性和可维护性。
  • 利于 SEO（搜索引擎更容易理解页面结构）。

2. HTML5 废弃了哪些标签？为什么？

• 废弃标签：<font>、<center>、<big>、<frame>。
• 原因：样式与结构分离（用 CSS 替代），或不符合现代 Web 标准（如 frame 被 iframe 替代）。

二、多媒体与图形

3. 如何在 HTML5 中嵌入音频和视频？

• 音频：

  <audio controls src="audio.mp3"></audio>
  

• 视频：

  <video controls width="600" src="video.mp4"></video>
  

• 关键属性：controls（显示控件）、autoplay（自动播放）、loop（循环）。

4. Canvas 和 SVG 的区别？

三、存储相关

5. Cookie、LocalStorage、SessionStorage 的区别？

6. IndexedDB 是什么？与 LocalStorage 相比有何优势？

• IndexedDB：浏览器端的非关系型数据库，支持大量数据存储和复杂查询。
• 优势：
  • 存储量更大（通常 50MB 以上）。
  • 支持事务、索引、异步操作。
  • 适合存储结构化数据（如用户订单记录）。

四、通信与 API

7. 什么是 WebSocket？与 HTTP 的区别？

• WebSocket：全双工通信协议，建立持久连接后服务器可主动推送数据。
• 对比 HTTP：
  • HTTP：短连接，客户端发起请求，服务器响应后断开。
  • WebSocket：长连接，适合实时应用（如聊天室、股票行情）。

8. 如何使用 Web Worker？

• 作用：在后台线程执行耗时任务，避免阻塞 UI。
• 示例：

  // 主线程
  const worker = new Worker('worker.js');
  worker.postMessage({ data: 'start' });
  worker.onmessage = (e) => console.log(e.data);
  
  // worker.js
  self.onmessage = (e) => {
    const result = heavyCalculation(e.data);
    self.postMessage(result);
  };
  

五、性能优化

9. 如何优化 H5 页面的加载速度？

• 关键方案：
  1. 资源压缩：CSS/JS 文件 minify，图片用 WebP 格式。
  2. 懒加载：图片/组件按需加载（如 IntersectionObserver API）。
  3. 缓存策略：合理设置 HTTP 缓存头（如 Cache-Control）。
  4. 减少重绘回流：使用 CSS3 动画替代 JS 动画。

10. 什么是 Service Worker？它能做什么？

• 作用：浏览器后台运行的脚本，可实现离线缓存、消息推送等。
• 典型应用：
  • PWA（渐进式 Web 应用）的离线访问。
  • 资源预缓存（加速二次访问）。

六、移动端适配

11. 如何实现 H5 移动端适配？

• 方案：
  1. Viewport 设置：

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     

  2. REM 布局：通过 JS 动态设置根字体大小（如 1rem = 屏幕宽度 / 10）。
  3. Flexible.js：阿里开源的移动端适配方案（基于 REM）。

12. 如何处理移动端 1px 边框问题？

• 原因：高清屏（Retina）下 1px 实际渲染为 2 物理像素。
• 解决方案：
  • CSS 伪类 + transform: scale(0.5)。
  • 使用 border-image 或 SVG 绘制线条。

七、安全与兼容性

13. 常见的 H5 安全问题有哪些？如何防范？

• XSS（跨站脚本攻击）：
  • 防范：对用户输入转义（如 textContent 替代 innerHTML），启用 CSP 策略。
• CSRF（跨站请求伪造）：
  • 防范：使用 Token 验证，设置 SameSite Cookie 属性。

14. 如何检测浏览器是否支持某个 HTML5 特性？

• 方案：

  if ('geolocation' in navigator) {
    // 支持地理定位 API
  } else {
    // 不支持，降级处理
  }
  

八、实战问题

15. 如何实现 H5 页面唤醒原生 App？

• 方案：
  • URL Scheme：如 myapp://home（需提前配置 App 的 Scheme）。
  • Universal Links（iOS）/ App Links（Android）：通过 HTTPS 链接无缝跳转。

16. H5 如何调用手机摄像头或相册？

• API：

  <input type="file" accept="image/*" capture="camera"> <!-- 调用摄像头 -->
  <input type="file" accept="image/*">                <!-- 调用相册 -->
  

面试技巧

• 结合项目经验：如被问到性能优化，可举例：“我在某项目中通过图片懒加载和 WebP 格式，将首屏加载时间减少了 40%。”
• 关注新技术：如提到 Web Components、WebAssembly 等扩展知识。