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

你可能感兴趣的:(#,前端基础,html5,前端,html)