⚠️ H5 缺点
性能问题
| 问题 | 说明 | 影响 |
|---|---|---|
| 渲染性能 | 复杂动画卡顿 | 用户体验差 |
| 内存占用 | 内存泄漏风险 | 页面崩溃 |
| 加载速度 | 资源体积大 | 跳出率高 |
| 电池消耗 | JavaScript 密集执行 | 设备发热耗电 |
功能限制
| 限制 | 说明 | 替代方案 |
|---|---|---|
| 系统访问 | 无法访问底层硬件 | 原生 App |
| 推送通知 | iOS 支持有限 | 短信/邮件 |
| 后台运行 | 页面关闭即停止 | Service Worker |
| 文件系统 | 访问受限 | IndexedDB |
| 蓝牙/NFC | 支持不完善 | 原生 App |
兼容性问题
- ⚠️ iOS Safari 限制：自动播放、全屏等受限
- ⚠️ 微信内置浏览器：部分 API 不可用
- ⚠️ 安卓碎片化：不同厂商实现差异
- ⚠️ 旧设备支持：老设备性能不足
- ⚠️ 新 API 兼容：需要 polyfill
安全问题
| 风险 | 说明 | 防护 |
|---|---|---|
| XSS 攻击 | 脚本注入 | 输入过滤、CSP |
| CSRF 攻击 | 跨站请求伪造 | Token 验证 |
| 数据泄露 | LocalStorage 明文 | 加密存储 |
| 中间人攻击 | HTTP 劫持 | HTTPS |
H5 vs 原生 App
| 维度 | H5 | 原生 App |
|---|---|---|
| 开发成本 | 低 | 高 |
| 更新频率 | 随时更新 | 需审核 |
| 性能 | 中 | 优 |
| 用户体验 | 中 | 优 |
| 分发渠道 | URL 分享 | 应用商店 |
💡 核心理念
H5 让 Web 应用能够像原生 App 一样拥有丰富的交互、动画和多媒体功能。
H5 起源与发展历程
2004
WHATWG 成立
Web 超文本应用技术小组成立，开始制定新标准
2007
iPhone 发布
乔布斯宣布 iPhone 使用 HTML5 而非 Flash，推动 H5 发展
2008
HTML5 草案发布
第一个公开草案发布，浏览器开始支持
2010
iPad 发布
不支持 Flash，全面拥抱 HTML5
2014
W3C 正式推荐
HTML5 成为 W3C 正式推荐标准
2015-2018
中国移动 H5 爆发
微信生态推动，H5 营销页面流行
2019-2026
成熟与融合
PWA、小程序、WebAssembly 等新技术融合
H5 与传统 HTML 的区别
| 特性 | 传统 HTML4 | HTML5 |
|---|---|---|
| 语义化标签 | 使用 div、span 等通用标签 | header、footer、nav、article、section 等 |
| 多媒体支持 | 需要 Flash 插件 | 原生 video、audio 标签 |
| 图形绘制 | 功能有限 | Canvas API 和 SVG 强大支持 |
| 本地存储 | 仅支持 cookie | localStorage、sessionStorage、IndexedDB |
| 离线应用 | 不支持 | Service Worker、PWA |
| 设备 API | 几乎不支持 | 地理定位、陀螺仪、摄像头等 |
H5 主要应用场景
| 场景 | 说明 | 典型案例 |
|---|---|---|
| 营销推广 | 品牌活动、产品宣传 | 双 11 活动页、新品发布 |
| 互动游戏 | 测试类、闯关类小游戏 | 性格测试、抽奖 H5 |
| 数据报告 | 年度报告、账单展示 | 网易云音乐年度报告 |
| 企业官网 | 移动端官方网站 | 品牌移动站点 |
| 信息收集 | 报名、调研、预约 | 活动报名、问卷调查 |
H5 核心特性
- ✅ 语义化标签：header、footer、nav、article、section 等
- ✅ 多媒体：audio、video 原生支持
- ✅ Canvas/SVG：2D/矢量图形绘制
- ✅ 本地存储：localStorage、sessionStorage
- ✅ 设备 API：地理定位、陀螺仪、摄像头
- ✅ CSS3：动画、过渡、Flexbox、Grid
- ✅ 响应式设计：媒体查询、移动优先