HTML5新特性全景解读

考察点分析 link

本题考察候选人对HTML5技术革新的系统认知与深度理解能力，主要评估：

1. 技术演进理解：能否清晰把握HTML5在语义化、多媒体、存储等维度的范式升级
2. 图形渲染原理：辨析Canvas与SVG的核心差异及适用场景
3. 技术选型能力：根据不同场景选择最优解决方案的判断力
4. 标准规范认知：对Web存储方案演进路线的掌握程度
5. API体系认知：理解HTML5如何扩展浏览器能力边界

技术解析 link

关键知识点 link

语义标签 > Canvas/SVG差异 > Web存储方案 > 多媒体支持 > API扩展

核心改进 link

1. 语义标签：引入<header> <nav> <section>等结构化元素，提升SEO友好性与屏幕阅读器兼容性，相较HTML4的<div>泛滥显著改善文档可维护性

2. 多媒体支持：原生<video> <audio>标签实现无插件媒体播放，支持编解码器选择与JS控制播放，解决HTML4依赖Flash的安全与性能问题

3. 存储方案：

   • LocalStorage/SessionStorage：键值存储（5MB），适合简单数据缓存
   • IndexedDB：事务型数据库，支持结构化数据存储（250MB+），替代被废弃的Web SQL
   • 对比Cookie：4KB存储上限、随请求发送的缺陷被彻底解决

4. 图形渲染：

   • Canvas：基于像素的即时模式渲染，通过JS动态绘制位图。适用于游戏、数据可视化等高帧率场景
   • SVG：基于XML的矢量图形描述语言，支持DOM操作与CSS样式。适合需要缩放保真或动态交互的图表/图标

5. API扩展：Web Workers（多线程）、Geolocation（地理位置）、WebSocket（全双工通信）、Drag&Drop（拖拽接口）等构建现代Web应用基石

技术差异 link

问题解答 link

HTML5通过语义标签构建标准化文档结构，原生多媒体支持终结Flash依赖，LocalStorage与IndexedDB提供分级存储方案。Canvas作为高性能位图渲染工具，适合动态场景；SVG则以矢量特性保障缩放精度，适合交互式图形。

解决方案 link

  // Canvas动态绘制折线图
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');

function drawChart(points) {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.beginPath();
  points.forEach((point, i) => {
    if(i === 0) ctx.moveTo(point.x, point.y);
    else ctx.lineTo(point.x, point.y);
  });
  ctx.strokeStyle = '#2196F3'; // 动态样式设置
  ctx.stroke();
}

// SVG交互式图标
<svg width="100" height="100">
  <circle 
    cx="50" cy="50" 
    r="40" 
    stroke="green" 
    fill="transparent"
    onclick="handleClick(event)" // 直接事件绑定
  />
</svg>
  

优化建议：Canvas使用离屏渲染缓冲帧，SVG避免过多滤镜效果以控制重绘开销

深度追问 link

1. Canvas如何实现渐变效果？
   答：使用createLinearGradient创建渐变对象并填充样式

2. LocalStorage数据过期策略如何实现？
   答：通过存储时间戳进行定期校验清理

3. Web Workers通信限制？
   答：不能直接操作DOM，需通过postMessage进行线程通信