HTML5结构规范

一，getBoundingClientRect；

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

const elTop = el.getBoundingClientRect().top;

二， Web Worker

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

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

Webworker使用限制：

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

Webworker使用场景：

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

三，html5新特性

3.1 语义化标签

 

与 

 

两者的区别在于

更加通用和广泛，而

更加具体和特定，用于表示具有独立意义的内容块。

：表示文档的主要内容区域，每个文档只应包含一个

元素。

：表示文档或区段的引导部分，通常包含标题、标志、导航等内容。

：表示文档或区段的页脚部分，通常包含版权信息、联系方式等内容。

：表示导航链接的部分。

：表示页面内容之外的侧边栏或附加信息区域。

 说明：标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<header>Headerheader>   
<nav>Navnav>   
<div class="body">     
<article>  
<section>Sectionsection> 
article>     
<aside>Asideaside>   
div>
<footer>Footerfooter>

• 清晰易读
• 有利于SEO，方便搜索引擎识别页面结构
• 方便设备解析、比如盲人阅读

3.2 音视频标签

在h5之前，网页中内嵌音视频普遍会采用flash实现。

3.3 画布 - Canvas+ SVG

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); 

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3.4 拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

3.5 本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

3.6 可编辑内容

它被广泛的应用，比如很多网页编辑器，内容切换编辑状态等等，都可以通过这个属性来实现。

四， 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 操作，以保证动画的流畅性和高性能。