html5标准提供了哪些新的api

HTML5 新 API 详解

Canvas API

• 功能：提供二维绘图能力，支持动态图形渲染。
• 方法/属性：getContext()、fillRect()、drawImage()、beginPath()。
• 示例：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 80);

Geolocation API

• 功能：获取设备的地理位置（经纬度）。
• 方法：navigator.geolocation.getCurrentPosition()。
• 示例：

  navigator.geolocation.getCurrentPosition((position) => {
    console.log(`Latitude: ${position.coords.latitude}`);
  });

Web Storage API

• 功能：提供 localStorage（持久化）和 sessionStorage（会话级）存储。
• 特点：键值对存储，容量约5MB。
• 示例：

  localStorage.setItem('name', 'John');
  console.log(localStorage.getItem('name')); // John

IndexedDB API

• 功能：浏览器内置的异步数据库，支持事务和索引。
• 用途：存储大量结构化数据（如离线应用数据）。
• 示例：

  const db = indexedDB.open('myDB');
  db.onsuccess = (event) => {
    const transaction = event.target.transaction(['store'], 'readwrite');
    transaction.objectStore('store').add({ name: 'Alice' });
  };

File API

• 功能：允许操作本地文件（读取、写入）。
• 方法：FileReader.readAsText()、readAsDataURL()。
• 示例：

  const input = document.querySelector('input[type="file"]');
  input.onchange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = () => console.log(reader.result);
    reader.readAsText(file);
  };

WebSockets API

• 功能：实现浏览器与服务器的全双工通信。
• 优势：低延迟，适合实时应用（如聊天、游戏）。
• 示例：

  const ws = new WebSocket('ws://example.com');
  ws.onmessage = (event) => console.log(event.data);
  ws.send('Hello Server');

Media Elements API

• 功能：原生支持音视频播放，提供控件（播放、暂停、音量）。
• 属性：currentTime、duration、volume。
• 示例：

  <video id="myVideo" width="320" height="240">
    <source src="movie.mp4" type="video/mp4">
  </video>
  <script>
    const video = document.getElementById('myVideo');
    video.play();
  </script>

Web Workers API

• 功能：在后台线程执行脚本，避免阻塞主线程。
• 用途：处理密集计算任务（如数据排序、文件压缩）。
• 示例：

  const worker = new Worker('worker.js');
  worker.postMessage({ num: 1000000 });
  worker.onmessage = (e) => console.log(`Result: ${e.data}`);

Drag and Drop API

• 功能：支持拖放操作，替代传统表单上传。
• 事件：dragstart、dragover、drop。
• 示例：

  const box = document.getElementById('dropBox');
  box.ondragover = (e) => e.preventDefault();
  box.ondrop = (e) => console.log('File dropped:', e.dataTransfer.files[0]);

History API

• 功能：操作浏览器历史记录，实现单页应用导航。
• 方法：pushState()、replaceState()、popstate 事件。
• 示例：

  history.pushState({ page: 'home' }, 'Home', '/');
  history.back();

相关问题与解答

问题1：HTML5 的哪些 API 显著提升了网页应用的用户体验？

解答：

• Canvas & Web Workers：实现流畅动画和复杂计算（如游戏、数据可视化）。
• Geolocation：提供位置服务（如地图导航、附近推荐）。
• Web Storage & IndexedDB：支持离线数据存储（如笔记应用、电商购物车）。
• WebSockets：实时交互（如在线聊天、股票行情）。

问题2：如何在移动设备上利用 HTML5 API 优化性能？

解答：

• Web Workers：将耗时任务（如图片压缩）移至后台线程。
• IndexedDB：存储高频访问数据，减少网络请求。
• Geolocation：结合位置缓存，避免频繁调用 GPS。
• Media Source Extensions：流式传输音视频