本文参与青训营笔记创作活动

前端语言的基本能力

HTML、CSS 和 JavaScript，它们是构建网页的基本组成部分， 三者的关系简单可以展示为下图：

HTML ：翻译过来是超文本标记语言，是一种标记语言，用于构建网页的基本结构及其内容。其中，超文本是指文本中包含了指向其他文本的链接，而标记语言则是指结合文本文本相关的信息，将文档的结构展现出来。常见的标记语言有HTML，XML，Markdown等。

CSS ：全称是层叠样式表，主要用于设置HTML页面中的文字内容(字体，大小，对齐方式)，图片外观(宽高，边框风格，边距)，以及版面布置和外观展示风格。使得让HTML专注于做结构呈现，风格交给CSS，这样在开发过程中就可以把结构和风格分开了。

JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

HTML

对于HTML是什么，MDN是这样定义的：
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签

CSS

CSS是一种用于网页样式设计的语言。通过定义各种样式规则和属性，可以控制网页上所有元素的外观、布局和交互效果。

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

上图标记	释义
选择器（Selector）	HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了
声明（Declaration）	一个单独的规则，如 color: red; 用来指定添加样式元素的属性
属性（Property）	改变 HTML 元素样式的途径。（本例中 color 就是 h1 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则
属性的值（Property value）	在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）

常见的css选择器：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定 (该) 类型的 HTML 元素	h1{ }
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	#myId{ }
类选择器	具有特定类的元素（单一页面中，一个类可以绑定多个标签）	.my-class{ }
后代选择器	外层标签在前，内层标签在后，中间用空格隔开	ul li{ }
子元素选择器	选择某个元素指定的子元素	ul>li{ }
兄弟选择器	选择两个同层级的元素	h1 + p{ }
交集选择器	并且的意思，既.....又.....的意思，两个选择器之间不能有空格	h1.my-class{ }
并集选择器	标签/类/id选择器都可，用逗号隔开，用于集体声明	h1, h2, h3{ }
属性选择器	拥有特定属性的元素	img[src]
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停）	a:hover

JavaScript

JavaScript是一种用于Web开发的高级编程语言。

它可以通过HTML和CSS网页上实现交互性和动态效果。

JavaScript作为一种基于对象和事件驱动的语言，提供了各种特性和API，如变量、函数、条件语句、循环语句、数组、面向对象编程、DOM操作、AJAX、Canvas等。

这些特性允许开发者创建各种动态效果，为用户提供更好的体验。另外，JavaScript还被广泛应用于服务器端、桌面应用程序和游戏开发。

JavaScript 的发展历史

JavaScript 的发展历史可以追溯到 1995 年，当时 Netscape 公司的工程师 Brendan Eich 在仅仅10 天的时间内设计出了这门语言。之后，Netscape 将它命名为 JavaScript，并将其作为一种脚本语言嵌入到其 Navigator 浏览器中。

在接下来的几年中，JavaScript 迅速流行起来，并被其他浏览器厂商采用。1997 年，JavaScript 发布了第一个版本的标准 ECMAScript，它定义了 JavaScript 的语法和基本功能，并被广泛使用。

随着互联网的不断发展，Web 应用程序越来越复杂，JavaScript 也逐渐发展成一种功能强大、可扩展性好的编程语言。2009 年，Node.js 项目发布，使得 JavaScript 可以脱离浏览器环境，进而开发服务器端应用程序。

2010 年，jQuery 框架发布，它大大简化了 JavaScript 开发的过程，并使得它变得更容易上手。此外，AngularJS、Vue.js 等前端框架和库的出现，也让 JavaScript 开发变得更加高效和便捷。

近年来，JavaScript 生态系统的发展非常迅速，涌现了很多新的技术和工具，如 React、Webpack、Babel 等，它们为 JavaScript 的发展带来了新的机遇和挑战。目前，JavaScript 已经成为最流行的编程语言之一，被广泛应用于 Web 开发、移动开发、服务器端开发、人工智能等领域。

JavaScript的每个版本说明：

1. JavaScript 1.0：1995 年发布，并被 Netscape Navigator 2.0 浏览器采用。这个版本包含了最初的 JavaScript 实现，并具有基本的语法和对象模型。
2. JavaScript 1.1：1996 年发布，是第一个标准化的 JavaScript 版本。它引入了命名函数和正则表达式等新特性。
3. JavaScript 1.2：1997 年发布，引入了一些新的特性，如对数组和日期的支持、动态图像替换（DHTML）、图片映射和框架等。
4. ECMAScript 1：1997 年发布，是第一个 JavaScript 标准。它规定了 JavaScript 的语法、数据类型、操作符等，为后续的 JavaScript 版本奠定了基础。
5. ECMAScript 2：1998 年发布，增加了一些新的特性，如异常处理、更完整的正则表达式支持和新的数组方法等。
6. ECMAScript 3：1999 年发布，是目前广泛使用的 JavaScript 版本。它引入了 try/catch 异常处理、switch 语句中的 fall-through、正则表达式字面量和 JSON 对象等新特性。
7. ECMAScript 4：该版本计划于 2008 年发布，但由于争议太大，最终被放弃。
8. ECMAScript 5：2009 年发布，引入了一些新的特性，如严格模式、JSON 对象的增强和 Object.create() 方法等。
9. ECMAScript 6（也称为 ES2015）：2015 年发布，是一次重要的更新。它引入了诸如箭头函数、类、模板字符串、解构赋值、let/const 块级作用域变量等新特性，使得 JavaScript 更加现代化、易读易写。
10. ECMAScript 7（ES2016）、ECMAScript 8（ES2017）、ECMAScript 9（ES2018）、ECMAScript( ES2019 均为相对较小的更新，引入了一些新特性，如 async/await、Object.values()、Promise.finally()、Array.flat() 和 Array.flatMap() 等。

JavaScript的基础语法

1. 原始数据类型：包括 Undefined、Null、Boolean、Number、String 和 Symbol 六种类型。

   • Undefined 类型表示未定义或不存在的值。
   • Null 类型表示一个空对象指针。
   • Boolean 类型表示逻辑上的 true 或 false。
   • Number 类型表示数值，可以是整数或小数，也可以用科学计数法表示。
   • String 类型表示字符串，表示一组由零个或多个 Unicode 字符组成的字符序列。
   • Symbol 类型表示独一无二的值，用于创建唯一的对象属性名。

2. 对象数据类型：包括 Object、Array、Date、RegExp、Function 等。

   • Object 是一个键值对的集合，其中每个键都是一个字符串（或 Symbol），对应的值可以是任何类型。Object 是 JavaScript 中的核心数据类型之一。
   • Array 是一组有序的值的集合，使用数字索引来访问每个元素。在 JavaScript 中数组本质上也是对象，但它们是具有特殊行为和属性的对象。
   • Date 表示日期和时间，可以存储毫秒级的时间戳，并提供了一些方法进行日期格式化和计算等操作。
   • RegExp 表示正则表达式，它用于匹配字符串中的模式。
   • Function 是一类特殊的对象，它可以被调用并执行预定义的代码块。

八股——浏览器输入地址后发生了什么

1. HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。
2. 构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。
3. 计算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点形式表示的 CSS 规则结构。
4. 排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。渲染树包含了 DOM 中的可见元素及其对应的 CSS 规则。接着，浏览器会计算渲染树中每个节点的位置和大小，这个过程称为排版或布局（Layout）。
5. 渲染合成：浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。每个层包含一个或多个节点，具有独立的绘制和合成上下文。
6. 绘制（Painting）：浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。绘制过程可能会在 GPU（图形处理器）上完成，以提高性能。
7. 合成（Compositing）：浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。合成过程通常由 GPU 完成，以实现高效的图像合成。

在这个过程中，JavaScript 代码的解析与执行可能穿插在各个阶段，因为 JavaScript 可以操作 DOM、CSSOM 和浏览器 API，从而改变页面的内容、样式和交互行为。这些变化可能需要浏览器重新执行排版、绘制和合成等任务。因此，在编写 JavaScript 代码时，应尽量减少对 DOM 和 CSSOM 的操作，以提高页面性能。

V8引擎运行机制

V8 是 Google 开发的高性能 JavaScript 引擎，用于解释和执行 JavaScript 代码。它是 Chrome 浏览器中默认的 JavaScript 引擎，也被 Node.js 等平台所采用。

JavaScript本质上也是一段文本，需要通过解释器才能够运行

1. Source code：JavaScript 源代码作为 V8 引擎的输入。
2. Parser：V8 引擎将 JavaScript 源代码解析成``一个抽象语法树（Abstract Syntax Tree，简称 AST）。AST 是源代码的一种树状表示，其中每个节点表示一个源代码中的语法结构（如变量声明、函数调用等）。
3. AST：生成的抽象语法树将用于接下来的编译和优化过程。
4. Ignition：V8 引擎中的 Ignition 是一个解释器（Interpreter），它负责将 AST 转换为字节码（Bytecode）。字节码是一种中间表示，比源代码更接近机器代码，但仍具有平台无关性。
5. Bytecode Execute：Ignition 解释器执行字节码，实现 JavaScript 源代码的功能。在执行字节码的过程中，V8 会收集代码的运行时信息（如类型信息等），用于后续的优化过程。
6. Feedback：V8 引擎收集的运行时信息（如变量类型、函数调用频率等）称为反馈（Feedback）。这些信息将用于指导后续的即时编译（JIT）过程，生成更高效的机器代码。
7. TurboFan：V8 引擎中的 TurboFan 是一个即时编译器（Just-In-Time Compiler，简称 JIT），它负责将字节码优化为机器代码。TurboFan 会根据收集到的反馈信息对代码进行特定的优化（如内联函数、消除数组边界检查等），生成性能更好的机器代码。
8. Machine code (Intel, ARM, MIPS)：TurboFan 生成的机器代码是针对特定处理器架构（如 Intel x86/x64、ARM、MIPS 等）的低级代码。这些机器代码可以直接在目标处理器上执行，实现更高的性能。

V8 引擎通过这个工作流程实现了 JavaScript 源代码的高效执行。在实际使用过程中，V8 会根据代码的运行情况动态调整优化策略，确保在不同场景下都能实现最佳性能。

V8 的运行机制可以分为以下几个步骤：

1. 解析 JavaScript 代码

当 V8 接收到 JavaScript 代码时，它首先需要将代码进行解析，并转换成一种称为抽象语法树（AST）的数据结构。这个过程由解析器完成，它会识别代码中的语法、变量和函数等元素，并将其转换成 AST。

2. 预处理

在解析代码的过程中，V8 还会进行一些预处理操作，例如分配内存、创建对象、解析作用域等。这些操作有助于提高代码执行的效率，并且允许 V8 更好地管理内存空间。

3. 编译代码

V8 在执行 JavaScript 代码之前，会将其编译成一种称为字节码的中间形式。字节码比原始 JavaScript 代码更接近于机器指令，因此它的执行速度也更快。

4. 执行代码

在 V8 中，代码的执行是通过一种称为“热点分析”（hotspotting）的技术来实现的。V8 会对代码进行分析，确定哪些部分最常被执行，然后将这些部分编译成本地机器码，并缓存起来，以便下次执行时更快地加载和执行。

此外，V8 中还有一种称为“垃圾回收”（garbage collection）的机制用于管理内存。当 JavaScript 代码执行时，它会创建许多对象、数组等数据结构，这些数据通常在不需要使用时就会被 V8 自动回收，以避免内存泄漏和程序崩溃。

总之，V8 引擎通过解析、预处理、编译和执行 JavaScript 代码的方式，实现了高效和快速的 JavaScript 执行速度。

前端语言的协同合作

CSS in HTML

从上向下 分别对应的是 行内式 内嵌式 外联式

JS in HTML

通过script标签引入外部资源, 或者在script标签块里面写脚本代码

HTML in JS

CSS in JS

通过 js 提供的dom api 可以修改元素的css属性

HTML5

HTML标签分类

head标签：

body标签：

语义化标签

HTML5 引入了许多新的语义化标签，以下是一些常见的 HTML5 新增语义化标签：

1. <article>：表示一个独立的内容块。
2. <aside>：定义一个附属信息的区域。
3. <details>：表示用户可以查看或隐藏的补充信息。
4. <figcaption>：为图片或图表添加标题。
5. <figure>：用于组合一组相关元素，例如图表和其标题。
6. <footer>：定义文档的页脚。
7. <header>：定义文档的页眉。
8. <main>：代表文档或应用程序的主要内容。
9. <nav>：用于定义导航链接集合的部分。
10. <section>：用于划分页面上的段落、主题、内容区块等。

建议: 用对比不用好,不用比用错好

表单增强

• 常见表单 
• 表单属性 

H5存储

HTML5 引入了两种新的客户端存储技术：Web 存储和 IndexedDB。

一 .Web 存储

Web 存储包括 localStorage 和 sessionStorage 两种，可以保存在浏览器端，不需要每次向服务器请求数据，提高了网页加载速度。这两种存储方式都是以 key-value 对的形式进行存储，并且只能存储字符串类型的数据。

• localStorage：该存储方式保存于本地，在整个浏览器中都有效，在关闭浏览器后再次打开相同的页面时仍然可用。
• sessionStorage：该存储方式也保存于本地，但它与会话相关，意味着当用户关闭标签或离开网站时，存储的数据将被删除。

下面是一个例子，展示如何使用 localStorage 存储和读取数据：

// 将数据存储到本地储存中
localStorage.setItem('username', 'John');
localStorage.setItem('password', '123456');

// 从本地储存中读取数据
var username = localStorage.getItem('username');
var password = localStorage.getItem('password');

console.log(username); // 输出 "John"
console.log(password); // 输出 "123456"

二. IndexedDB

IndexedDB 是浏览器中另一种存储机制，它是一种更灵活的对象数据库，允许存储非字符串类型的数据，例如 Blob 和 ArrayBuffer 等。

IndexedDB 使用异步 API 进行操作，需要使用数据库、事务、对象存储区域等概念。下面是一个简单的示例，展示如何使用 IndexedDB 存储和读取数据：

// 创建 IndexedDB 数据库
var request = indexedDB.open('myDatabase', 1);
var db;

request.onerror = function(event) {
  console.log("IndexedDB 数据库打开失败");
};

request.onsuccess = function(event) {
  // 将数据库对象存储在变量中
  db = event.target.result;
  console.log("IndexedDB 数据库打开成功");

  // 使用事务进行读写操作
  var transaction = db.transaction(['users'], 'readwrite');
  var objectStore = transaction.objectStore('users');
  var user = { username: 'John', password: '123456' };

  // 存储数据
  var request = objectStore.add(user);
  request.onsuccess = function(event) {
    console.log("数据存储成功");
  };

  // 读取数据
  var getRequest = objectStore.get('John');
  getRequest.onsuccess = function(event) {
    console.log("数据读取成功", event.target.result);
  };
};

需要注意的是，由于这两种存储方式都是针对客户端而言的，因此不宜存储敏感信息，例如密码等，以及过多的数据，否则可能会导致程序性能问题。

H5音视频

• <audio>音频标签

  1. 音频格式：支持三种音频格式

  2. 语法格式：

     <!-- src属性是必须的，嵌⼊视频⽂件路径 -->
     <!-- source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试) -->
     <audio src="文件地址" controls="controls"> </autio>
     <audio controls="controls">
         <source src="happy.mp3" type="audio/mpeg">
         <source src="happy.ogg" type="audio/ogg" >
     </audio>
     复制代码
     

  3. 常见属性:

• <video>视频标签

  1. 视频格式：支持三种视频格式

  2. 语法格式：

     <!-- src属性是必须的，嵌⼊视频⽂件路径 -->
     <!-- source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试) -->
     <video src="文件地址" controls="controls"> </video>
     <video controls="controls">
         <source src="happy.mp4" type="video/mp4">
         <source src="happy.ogg" type="video/ogg" >
     </video>
     复制代码
     

  3. 常见属性:

H5二进制

H5 API

HTML5 API是指HTML5标准所定义的一系列JavaScript API，它们提供了开发者处理DOM、Canvas、Web Storage、WebSocket等各种功能的能力。下面是一些常用的HTML5 API：

1. DOM API：允许开发者以编程方式访问和操作文档对象模型(DOM)，包括查询和修改网页中的元素和属性，添加和删除节点等。
2. Canvas API：允许开发者在浏览器中绘制图形和动画，包括绘制直线、圆形、矩形、文本等。
3. WebSocket API：允许开发者创建基于TCP的双向通信通道，使得服务器可以主动推送数据给客户端。
4. Web Storage API：允许开发者在浏览器端存储键值对，包括localStorage和sessionStorage。
5. File API：允许开发者读取和写入本地文件系统中的文件，包括上传和下载文件，查看文件属性等。
6. Geolocation API：允许开发者获取用户的位置信息，包括经度和纬度坐标等。
7. Media API：允许开发者在浏览器中播放音频和视频，包括媒体控制面板、音频和视频源设置等。
8. Drag and Drop API：允许开发者通过拖拽来移动和重排网页上的元素。

这些HTML5 API提供了丰富的功能和强大的控制能力，使得开发者可以更加方便地实现各种Web应用程序。

H5 Web Worker

H5 Web Socket

Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。

Web Socket 协议基于 TCP 协议实现，使用了类似 HTTP 协议的握手过程来建立连接。客户端和服务器之间的通信采用帧（Frame）的形式进行，每个帧包含一个标识、一些附加信息和一段数据。客户端和服务器可以通过发送不同类型的帧来实现不同的功能，比如文本消息、二进制数据、ping-pong 等。

Web Socket 协议可以与任何支持该协议的服务器进行通信，包括自己开发的服务器和第三方提供的服务。它通常被用于实现实时聊天室、实时游戏、实时协作等应用场景。由于其实时性和高效性，越来越多的 Web 应用程序开始采用 Web Socket 技术来实现实时通信的功能

// 创建 Web Socket 连接
const socket = new WebSocket('ws://localhost:8080');
​
// 当连接打开时，发送一条消息到服务器
socket.addEventListener('open', event => {
  socket.send('Hello, Server!');
});
​
// 当收到服务器发送的消息时，输出到控制台中
socket.addEventListener('message', event => {
  console.log(`Received message from server: ${event.data}`);
});
​
// 当连接关闭时，输出一条消息到控制台中
socket.addEventListener('close', event => {
  console.log('Web Socket connection closed');
});
​
// 当连接发生错误时，输出错误消息到控制台中
socket.addEventListener('error', event => {
  console.error(`Web Socket error: ${event.message}`);
});

H5 Shadow DOM

Shadow DOM 是 Web Components 技术中的一部分，用于实现 Web 页面上的组件化开发。它允许开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中，以便在不同的页面和应用程序中进行复用。

Shadow DOM 通过创建一个“影子树”来实现组件的封装和隔离。在一个 Shadow DOM 中，组件的 HTML 结构、CSS 样式和 JavaScript 行为都被包裹在一个独立的命名空间中，与外部页面的 HTML、CSS 和 JavaScript 不会互相干扰。这种隔离性使得组件可以在不同的页面和应用程序中进行复用，而不用担心样式和行为的冲突。

使用 Shadow DOM 可以创建一些高度可定制化的组件，比如自定义的表单控件、交互式组件等。Shadow DOM 还提供了一些 API，可以让开发者更加方便地控制组件的行为和样式。比如，可以使用 JavaScript 修改组件内部的 DOM 结构、监听组件内部的事件、控制组件内部的样式等。

H5 Web Component

HTML5 的 Web Component 是一种基于标准 Web 技术实现的组件化开发模型，它由三个技术规范组成：Custom Elements、Shadow DOM 和 HTML Templates。

Custom Elements 允许开发者自定义 HTML 元素，可以通过 JavaScript API 来创建、注册和使用自定义元素。这样，开发者就可以将多个 HTML 元素封装为一个独立的组件，并在 Web 页面中进行复用。Custom Elements 还提供了一些生命周期方法和事件，可以让开发者控制自定义元素的创建和销毁过程。

Shadow DOM 允许开发者创建一个独立的、封装的 DOM 树，用于包含和隔离组件内部的 HTML 结构、CSS 样式和 JavaScript 行为。这样，开发者就可以将组件内部的实现细节隐藏起来，避免与外部页面的 HTML、CSS 和 JavaScript 冲突。Shadow DOM 还提供了一些 API，可以让开发者更加方便地控制组件内部的样式和行为。

HTML Templates 允许开发者将 HTML 片段封装为一个可重用的模板，并在 Web 页面中进行复用。HTML Templates 还支持使用 JavaScript API 来动态生成和填充模板内容，以适应不同的使用场景。

代码示例：

<!-- 定义一个自定义元素 my-button，使用 Shadow DOM 封装组件内部的样式和行为 -->
<template id="my-button-template">
  <style>
    button {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 3px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0069d9;
    }
  </style>
  <button>Click me!</button>
</template>
​
<!-- 在页面中使用自定义元素 my-button -->
<my-button></my-button>

// 定义一个 MyButton 类，继承自 HTMLButtonElement，用于创建自定义元素
class MyButton extends HTMLButtonElement {
  constructor() {
    super();
​
    // 创建 Shadow DOM，并将模板内容插入其中
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('my-button-template');
    const clone = template.content.cloneNode(true);
    shadow.appendChild(clone);
​
    // 绑定按钮的点击事件
    const button = shadow.querySelector('button');
    button.addEventListener('click', () => {
      console.log('Button clicked!');
    });
  }
}
​
// 将 MyButton 注册为自定义元素
customElements.define('my-button', MyButton, { extends: 'button' });

H5 SVG & Canvas

webGL and WebGPU

WebGL和WebGPU都是用于在Web浏览器中实现高性能图形渲染的技术，但它们之间有一些区别。

WebGL是一种基于OpenGL ES 2.0的JavaScript API，可用于在Web浏览器中呈现交互式3D和2D图形。它使开发者可以使用标准的OpenGL ES编程语言来编写动画、游戏、数据可视化和其他图形应用程序，并在Web上运行。WebGL支持硬件加速，与传统的Canvas API相比具有更高的性能和更好的图形效果。

相比之下，WebGPU是一种正在开发中的API，旨在为Web浏览器提供底层的图形渲染接口。WebGPU的设计参考了Vulkan、DirectX 12和Metal等跨平台的图形API，可以为Web应用程序提供与本地应用程序相似的性能和功能。WebGPU可以直接访问GPU硬件，使得开发者可以更好地控制图形处理流程，从而实现更快的图形渲染和更高的帧率。

总之，WebGL和WebGPU都是用于在Web浏览器中实现高性能图形渲染的技术，但WebGPU还处于开发阶段，其性能和功能将会更加强大和灵活。开发者可以根据需要选择其中的一种技术来实现各种图形应用程序。

地址：Some Amazing Demo:davidwalsh.name/webgl-demo

HTML5 WebAssembly

WebAssembly(WASM)是一种新的编码方式，可以直接在浏览器中运行

WebAssembly（简称为 wasm）是一种新型的虚拟机技术，是一种由 W3C、Mozilla 和其他浏览器厂商共同推出的新 Web 标准。WebAssembly 可以将高性能的 C、C++、Rust 等语言的代码编译成二进制格式，在浏览器中运行，从而提供了比 JavaScript 更高的性能和更好的可移植性。

WebAssembly 具有许多优点，比如：

• 高性能：WebAssembly 的代码可以直接在浏览器中运行，可以比 JavaScript 更高效地利用硬件资源。
• 跨平台：WebAssembly 的二进制格式是跨平台的，可以在任何支持 WebAssembly 的平台上运行，包括浏览器、移动设备、IoT 设备等。
• 安全性：WebAssembly 的代码运行在沙箱环境中，不会对浏览器和计算机造成安全风险。
• 可扩展性：WebAssembly 可以与 JavaScript 无缝集成，并且可以与浏览器中的其他 Web 技术一起使用，比如 Canvas、WebGL 等。

HTML5 支持 WebAssembly 技术，并且可以通过 JavaScript 脚本来调用 WebAssembly 的函数，实现更高效、更复杂的 Web 应用程序。WebAssembly 技术在 Web 游戏、图像和音频处理、虚拟现实和人工智能等方面具有广泛的应用前景。