HTML5结构规范

一，getBoundingClientRect；

用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

const?elTop?=?el.getBoundingClientRect().top;

二，?Web?Worker

当在?HTML?页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web?worker?是运行在后台的?JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时?web?worker?运行在后台。

Webworker使用限制：

• 与主线程脚本同源
• 无法操作DOM和BOM
• 不能读取本地文件

Webworker使用场景：

• 复杂运算
• 渲染优化
• 流媒体数据处理

三，html5新特性

3.1?语义化标签

<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?操作次数

• requestAnimationFrame：

function?animate() {

??//?在这里执行动画操作

??//?...

??//?在动画完成后，再次调用?requestAnimationFrame，实现连续动画效果

requestAnimationFrame(animate);

}

//?第一次调用?requestAnimationFrame，启动动画

requestAnimationFrame(animate);

注意：在使用?requestAnimationFrame?进行动画时，回调函数应该尽量简洁，避免执行过多的计算和?DOM?操作，以保证动画的流畅性和高性能。