用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
const?elTop?=?el.getBoundingClientRect().top;
当在?HTML?页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web?worker?是运行在后台的?JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时?web?worker?运行在后台。
Webworker使用限制：
Webworker使用场景：
<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><video?width="320"?height="240"?controls="controls">???<source?src="movie.mp4"?type="video/mp4"?/>?</video>在h5之前，网页中内嵌音视频普遍会采用flash实现。
<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?拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
拖放（Drag?和?Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是?HTML5?标准的组成部分：任何元素都是可拖放的。
通过本地存储（Local?Storage），web?应用程序能够在用户浏览器中对数据进行本地的存储。
在?HTML5?之前，应用程序数据只能存储在?cookie?中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与?cookie?不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
<div?class="edit"?contenteditable='true'></div>
它被广泛的应用，比如很多网页编辑器，内容切换编辑状态等等，都可以通过这个属性来实现。
在?JavaScript?中，大整数ID?和?高精度的时间戳?不能安全的表示为?Number。这经常会引发错误，这导致?JavaScript?开发者将其表示为字符串。?有了?BigInt?这些数据就可以表示为数值了。
一次性将文档片段添加到?DOM?中，减少?DOM?操作次数
createDocumentFragment?是?Document?对象的方法之一，用于创建一个空白的文档片段（DocumentFragment）。
文档片段是一种特殊的节点类型，它类似于一个轻量级的虚拟文档，可以用来临时存储一系列节点，而不需要将它们直接添加到?DOM?树中。
创建文档片段后，可以将多个节点先添加到文档片段中，然后一次性将文档片段添加到实际的?DOM?结构中，这样可以减少?DOM?操作次数，提高性能。
requestAnimationFrame?是一个浏览器提供的?API，用于执行动画和其他高性能的操作。
它通过浏览器的刷新频率（通常是每秒?60?帧）来调用指定的回调函数，以确保动画在每一帧之前更新。
使用?requestAnimationFrame?可以获得更加平滑和高效的动画效果，因为它会自动根据浏览器的刷新频率进行优化，避免了过度渲染和性能问题。
function?animate() {
??//?在这里执行动画操作
??//?...
??//?在动画完成后，再次调用?requestAnimationFrame，实现连续动画效果
requestAnimationFrame(animate);
}
//?第一次调用?requestAnimationFrame，启动动画
requestAnimationFrame(animate);注意：在使用?requestAnimationFrame?进行动画时，回调函数应该尽量简洁，避免执行过多的计算和?DOM?操作，以保证动画的流畅性和高性能。