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 文件
图片懒加载

async、 defer

defer:

使用时不阻塞 html 的解析
defer 加载脚本执行会在所有元素解析完成，domContentLoaded 事件触发之前完成执行。

<p>...content before scripts...</p>

<script>
  document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
</script>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<p>...content after scripts...</p>

1.页面内容立即显示。 2.DOMContentLoaded 事件处理程序等待具有 defer 特性的脚本执行完成。它仅在脚本下载且执行结束后才会被触发。

defer 特性仅适用于外部脚本,如果 <script> 脚本没有 src，则会忽略 defer 特性。

async:

async 特性与 defer 有些类似。它也能够让脚本不阻塞页面。但是，在行为上二者有着重要的区别。

async 特性意味着脚本是完全独立的：

浏览器不会因 async 脚本而阻塞（与 defer 类似）。
其他脚本不会等待 async 脚本加载完成，同样，async 脚本也不会等待其他脚本。
DOMContentLoaded 和异步脚本不会彼此等待：
- DOMContentLoaded 可能会发生在异步脚本之前（如果异步脚本在页面完成后才加载完成）
- DOMContentLoaded 也可能发生在异步脚本之后（如果异步脚本很短，或者是从 HTTP 缓存中加载的）

<p>...content before scripts...</p>

<script>
  document.addEventListener('DOMContentLoaded', () => alert("DOM ready!"));
</script>

<script async src="https://javascript.info/article/script-async-defer/long.js"></script>
<script async src="https://javascript.info/article/script-async-defer/small.js"></script>

<p>...content after scripts...</p>

页面内容立刻显示出来：加载写有 async 的脚本不会阻塞页面渲染。
DOMContentLoaded 可能在 async 之前或之后触发，不能保证谁先谁后。
较小的脚本 small.js 排在第二位，但可能会比 long.js 这个长脚本先加载完成，所以 small.js 会先执行。虽然，可能是 long.js 先加载完成，如果它被缓存了的话，那么它就会先执行。换句话说，异步脚本以“加载优先”的顺序执行。

解释下 long.js 可能先加载完成，指的是直接从缓存（cache）取

当我们将独立的第三方脚本集成到页面时，此时采用异步加载方式是非常棒的：计数器，广告等，因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：

它的用途其实跟 preload 十分相似。你可以使用 defer 加载脚本在 head 末尾，这比将脚本放在 body 底部效果来的更好。

HTTP/2 Server Push

HTTP/2 PUSH 功能可以让服务器在没有相应的请求情况下预先将资源推送到客户端。这个跟 preload/prefetch 预加载资源的思路类似，将下载和资源实际执行分离的方法，当脚本真正想要请求文件的时候，发现脚本就存在缓存中，就不需要去请求网络了。

preload 预加载指定资源（加载后并不执行），需要执行时在执行。一定会执行。 1.将加载和执行分离开，不堵塞渲染和 document 的 onload 事件 2.提前加载制定资源，不在出现依赖的 font 字体隔了一段时间才刷出的情况

link prefetch 是预加载下一页面可能会用到的资源的意思，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。加载优先等级非常低，不一定会执行。

prefetch 和 preload 不要混用

prerender 预渲染预渲染意味着我们提前加载好用户即将访问的下一个页面浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开。

不能预加载的场景： 1.url 中包含下载资源 2.页面中包含音频、视频 3.post、put 等 ajax 请求 4.http 认证 authentication 5.https

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

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

最后更新于12天前

这有帮助吗？