一，getBoundingClientRect；
用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
const elTop = el.getBoundingClientRect().top;
二， Web Worker
当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
Webworker使用限制：
- 与主线程脚本同源
- 无法操作DOM和BOM
- 不能读取本地文件
Webworker使用场景：
- 复杂运算
- 渲染优化
- 流媒体数据处理
三，html5新特性
3.1 语义化标签
<section> </section> 与 <article> </article>
两者的区别在于<section>更加通用和广泛，而<article>更加具体和特定，用于表示具有独立意义的内容块。
<main>：表示文档的主要内容区域，每个文档只应包含一个<main>元素。
<header>：表示文档或区段的引导部分，通常包含标题、标志、导航等内容。
<footer>：表示文档或区段的页脚部分，通常包含版权信息、联系方式等内容。
<nav>：表示导航链接的部分。<aside>：表示页面内容之外的侧边栏或附加信息区域。
说明：<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<header>Header</header>
<nav>Nav</nav>
<div class="body">
<article>
<section>Section</section>
</article>
<aside>Aside</aside>
</div>
<footer>Footer</footer>- 清晰易读
- 有利于SEO，方便搜索引擎识别页面结构
- 方便设备解析、比如盲人阅读
3.2 音视频标签
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video>在h5之前，网页中内嵌音视频普遍会采用flash实现。
3.3 画布 - Canvas+ SVG
<canvas id="myCanvas" width="200" height="100"></canvas><script type="text/javascript">var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3.4 拖放
拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
3.5 本地存储
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
3.6 可编辑内容
<div class="edit" contenteditable='true'></div>
它被广泛的应用，比如很多网页编辑器，内容切换编辑状态等等，都可以通过这个属性来实现。
四， BigInt；
在 JavaScript 中，大整数ID 和 高精度的时间戳 不能安全的表示为 Number。这经常会引发错误，这导致 JavaScript 开发者将其表示为字符串。 有了 BigInt 这些数据就可以表示为数值了。
五， createDocumentFragment;
一次性将文档片段添加到 DOM 中，减少 DOM 操作次数
createDocumentFragment 是 Document 对象的方法之一，用于创建一个空白的文档片段（DocumentFragment）。
文档片段是一种特殊的节点类型，它类似于一个轻量级的虚拟文档，可以用来临时存储一系列节点，而不需要将它们直接添加到 DOM 树中。
创建文档片段后，可以将多个节点先添加到文档片段中，然后一次性将文档片段添加到实际的 DOM 结构中，这样可以减少 DOM 操作次数，提高性能。
- requestAnimationFrame：
requestAnimationFrame 是一个浏览器提供的 API，用于执行动画和其他高性能的操作。
它通过浏览器的刷新频率（通常是每秒 60 帧）来调用指定的回调函数，以确保动画在每一帧之前更新。
使用 requestAnimationFrame 可以获得更加平滑和高效的动画效果，因为它会自动根据浏览器的刷新频率进行优化，避免了过度渲染和性能问题。
function animate() {
// 在这里执行动画操作
// ...
// 在动画完成后，再次调用 requestAnimationFrame，实现连续动画效果
requestAnimationFrame(animate);
}
// 第一次调用 requestAnimationFrame，启动动画
requestAnimationFrame(animate);注意：在使用 requestAnimationFrame 进行动画时，回调函数应该尽量简洁，避免执行过多的计算和 DOM 操作，以保证动画的流畅性和高性能。
