h5 新增特性 html5

<简化的文档类型和字符集>

<!DOCTYPE HTML>

<meta charset="UTF-8">

标签更加语义化语义化标签：

、、、、、等。

HTML5 新特效
- 表单增强：
新增输入类型：、"number"、"date" 等。
新属性：placeholder、required、pattern、autofocus。
- 强大的绘图功能和多媒体功能
和标签（属性如 controls、autoplay、loop）。
支持的格式（MP4、WebM、Ogg）。
- Canvas 和 SVG：
Canvas：2D 绘图基础（如 getContext('2d')），用途（游戏、图表）。
SVG：矢量图形，优势（可缩放、不失真）。
- 拖放（Drag and Drop）：
事件：dragstart、dragover、drop 等。
- Geolocation（地理定位）：
API：navigator.geolocation.getCurrentPosition()。

HTML5 API

web storage:
localStorage 5M 和 sessionStorage 5M
web workers:
```
新增 webworker 对象 可以在后台运行 js 脚本 也就是支持多线程，从而提高了页面加载效率

关于 webworker 可以创建多个 worker 线程 小规模分布式计算

- 不能使用
- Web Worker 无法访问 DOM 节点；
- Web Worker 无法访问全局变量或是全局函数；
- Web Worker 无法调用 alert()或者 confirm 之类的函数；
- Web Worker 无法访问 window、document 之类的浏览器全局变量

- 可以使用

setTimeout setInterval ajax 通信

webworker 分为两种 专用线程 dedicated web worker 共享线程 shared web worker

dedicated web worker 随当前页面关闭而关闭 只能被当前创建页面所访问

![](2023-02-21-15-04-34.png)
```
- websockets:
  通过 websockets 可以实现服务器和客户端之间的实时通信
  优势：实时性高、支持双向通信、支持跨域
  缺点：不支持低版本浏览器
  使用：new WebSocket(url)
  事件：onopen、onmessage、onclose、onerror
  方法：send()、close()
- History API:
  新增 history 对象的 pushState()、replaceState() 方法
  作用：可以在不刷新页面的情况下改变 URL
  优势：可以实现前端路由
  缺点：不支持低版本浏览器
  使用：history.pushState(state, title, url)
  事件：popstate
- Fetch API:
  新增 fetch() 方法，用于替代 XMLHttpRequest
  优势：语法简洁、基于 Promise、支持跨域
  缺点：不支持低版本浏览器
  使用：fetch(url, options)
  方法：then()、catch()

性能优化
- 加载性能优化：
异步加载 js 文件预加载 css 文件

上一页flex布局下一页history 与 hash 路由策略

最后更新于7天前

这有帮助吗？

新增 webworker 对象可以在后台运行 js 脚本也就是支持多线程，从而提高了页面加载效率关于 webworker 可以创建多个 worker 线程小规模分布式计算 - 不能使用 - Web Worker 无法访问 DOM 节点； - Web Worker 无法访问全局变量或是全局函数； - Web Worker 无法调用 alert()或者 confirm 之类的函数； - Web Worker 无法访问 window、document 之类的浏览器全局变量 - 可以使用 setTimeout setInterval ajax 通信 webworker 分为两种专用线程 dedicated web worker 共享线程 shared web worker dedicated web worker 随当前页面关闭而关闭只能被当前创建页面所访问 ![](2023-02-21-15-04-34.png)