浏览器环境规格文档

概述

本文档描述了现代Web浏览器提供的标准环境规格，包括核心API、对象模型和交互能力。

全局对象

window

• 浏览器环境的全局对象
• 属性：
  • window.innerWidth - 视口宽度(px)
  • window.innerHeight - 视口高度(px)
  • window.location - 当前URL信息
  • window.document - 当前文档对象
  • window.navigator - 浏览器/设备信息
  • window.screen - 屏幕信息
  • window.localStorage - 本地存储
  • window.sessionStorage - 会话存储

文档对象模型(DOM)

document

• 表示当前加载的网页文档
• 核心方法：
  • getElementById(id)
  • getElementsByClassName(className)
  • getElementsByTagName(tagName)
  • querySelector(selector)
  • querySelectorAll(selector)
  • createElement(tagName)

节点类型

• Element - DOM元素节点
• Text - 文本节点
• Document - 文档节点
• DocumentFragment - 文档片段

浏览器对象模型(BOM)

location

• 提供当前URL信息和控制导航
• 属性：
  • href - 完整URL
  • protocol - 协议(http:/https:)
  • host - 主机名和端口
  • hostname - 主机名
  • port - 端口
  • pathname - 路径部分
  • search - 查询字符串
  • hash - 片段标识符

navigator

• 提供浏览器和操作系统信息
• 常用属性：
  • userAgent - 用户代理字符串
  • platform - 操作系统平台
  • language - 浏览器语言
  • geolocation - 地理位置API

history

• 控制浏览器历史记录
• 方法：
  • back() - 后退
  • forward() - 前进
  • go(n) - 跳转到指定历史记录
  • pushState(state, title, url) - 添加历史记录
  • replaceState(state, title, url) - 替换当前历史记录

事件系统

事件类型

• 鼠标事件：click, dblclick, mousedown, mouseup, mousemove
• 键盘事件：keydown, keyup, keypress
• 表单事件：submit, change, input, focus, blur
• 窗口事件：load, unload, resize, scroll
• 触摸事件：touchstart, touchmove, touchend

事件处理

// 添加事件监听
element.addEventListener('click', function(e) {
  // 事件处理逻辑
});

// 移除事件监听
element.removeEventListener('click', handler);

存储API

localStorage

• 持久化键值存储
• 方法：
  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()

sessionStorage

• 会话级别的键值存储
• 方法与localStorage相同

IndexedDB

• 客户端数据库系统
• 支持索引、事务和复杂查询

网络API

Fetch API

fetch(url, {
  method: 'GET', // 或 'POST', 'PUT' 等
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data));

XMLHttpRequest (传统)

const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

图形和多媒体

Canvas

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

WebGL

• 基于Canvas的3D图形API

Web Audio API

• 高级音频处理和控制

性能API

Performance

• performance.now() - 高精度时间戳
• performance.memory - 内存使用情况(Chrome)
• performance.getEntries() - 资源加载性能数据

设备API

Geolocation

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

设备方向

• deviceorientation 事件
• devicemotion 事件

Web Workers

专用Worker

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = e => console.log(e.data);

// worker.js
onmessage = e => {
  const result = process(e.data);
  postMessage(result);
};

WebSocket

const socket = new WebSocket('ws://example.com');

socket.onopen = () => socket.send('Hello Server!');
socket.onmessage = e => console.log(e.data);

安全限制

• 同源策略
• CORS (跨源资源共享)
• Content Security Policy (CSP)
• HTTPS要求(某些API)

兼容性

• 不同浏览器实现可能有差异
• 推荐使用特性检测而非浏览器检测
• 可使用Babel等工具处理语法兼容性

此文档提供了浏览器环境的核心功能概述，实际实现可能因浏览器版本和供应商而有所不同。