前端语言串讲

前端语言的基本能力

基础的前端三剑客HTML、CSS、JavaScript

HTML（超文本标记语言） ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。

CSS（级联样式表） ： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。

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

HTML

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

CSS

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

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

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

常见选择器

选择器名称	选择的内容	选择的内容
元素选择器（也称作标签或类型选择器）	所有指定 (该) 类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器）	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。也可以在元素内容之前之后添加新的元素
‘*’是选中全部的选择器

W3C和W3School的区别？

W3C 是一个国际组织，负责制定和维护 Web 标准。
W3Schools 是一个在线教育平台，提供关于 Web 技术的教程和实例

JavaScript

(1) 借鉴C语言的基本语法

(2) 借鉴Java语言的数据类型和内存管理

(3) 借鉴Scheme语言，将函数提升到”第一等公民”(first class)的地位(4)借鉴Self语言，使用基于原型 (prototype) 的继承机制

三剑客在浏览器中的运行

HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。

=》浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。

=》浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。

=》浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。

=》浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。

=》浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。

=》浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。（GPU）

Browser

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

javascript源代码作为引擎的输入，V8引擎将源码解析成抽象语法树AST（将用于接下来的编译和优化过程），解释器Ignition将AST转换成字节码（字节码是一种中间表示，比源代码更接近机器代码，但仍具有平台无关性），ignition执行字节码，实现JS源码的功能，（期间，V8引擎会收集代码的运行时信息（如变量类型、函数调用频率等）称为反馈（Feedback）。这些信息将用于指导后续的即时编译（JIT）过程，生成更高效的机器代码）。执行完字节码、实现功能后，TuiboFan根据feedback将字节码特定优化（如内联函数、消除数组边界检查等）为机器代码；机器代码是针对特定处理器架构的低级代码，可以直接在目标处理器上执行，实现更高的性能。

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

前端语言的协作配合

目前则是Vue、React与Angular各占半边天，越靠近现在的节点，工具类的发展像webpack就越发的繁荣。

CSS在HTML中的使用

行内样式、嵌入html文件的css样式、编写css后缀文件，然后导入html文件的写法（主流）

JavaScript在在HTML中的使用

使用script标签：script标签定义在开头会导致页面渲染被阻塞，因为代码是从上到下执行的，所以script标签一般在方法体的最后。添加differ让脚本的执行变得异步

行内式写法，例如使用onclick做到点击实现某方法的效果

使用vue；还有一种是编写JS代码文件，在html中引入

dom会把页面上的html部分转换为对应的JavaScript对象，比如下图：一级一级的转换 dom分为事件冒泡（事件从最内层的元素开始发生，一直向上传播，直到document对象）和事件捕获（事件会从最外层document开始发生，直到最具体的元素），都是为了解决页面中事件流（事件发生顺序）的问题。冒泡一般是对于开发者来说的，做一些事件代理；捕获是对计算机来说的，方便找到精准的触发元素

事件机制：

JavaScript 是单线程的，意味着在一个时间点只能执行一个任务。为了处理异步操作和事件回调，JavaScript 引入了事件循环（Event Loop）。事件循环使用任务队列（Task Queues）来管理要执行的任务。任务队列分为两种类型：宏任务队列（Macro-Task Queue）和微任务队列（Micro-Task Queue）。

宏任务队列（Macro-Task Queue）：宏任务队列存放宏任务（Macro-Task），它们通常是由外部事件触发的较大的任务。例如：

setTimeout 和 setInterval 的回调函数

I/O 操作（如文件读写、网络请求等）的回调函数

用户交互事件（如点击、滚动等）的回调函数

其他异步 API 的回调函数

事件循环会按顺序执行宏任务队列中的任务。当一个宏任务执行完毕后，事件循环会检查微任务队列，执行其中的所有任务，然后再执行下一个宏任务。

微任务队列（Micro-Task Queue）：微任务队列存放微任务（Micro-Task），它们通常是 JavaScript 代码中产生的较小的、需要尽快执行的任务。例如：

Promise 的 then、catch 和 finally 回调函数

async/await

MutationObserver 的回调函数

其他微任务 API

当事件循环执行一个宏任务后，它会检查微任务队列。在执行下一个宏任务之前，事件循环会一直执行微任务队列中的所有任务，直到微任务队列为空。这意味着在两个宏任务之间，JavaScript 会尽可能多地执行微任务。

事件循环的执行顺序如下：

从宏任务队列中取出一个任务并执行。

检查微任务队列，执行其中的所有任务。

如果有必要，进行渲染操作（如更新 DOM、执行动画等）。

返回第 1 步，重复执行。

通过区分宏任务和微任务，事件循环可以实现对异步操作和事件回调的有效管理。微任务队列确保了在宏任务之间可以尽快执行一些紧急的、短小的任务，从而提高了整体性能。

html在JavaScript中的使用

主要用来动态修改html的内容，一般不会使用最原始的dom方法，一般会基于线程的渲染方向来做，比如最经典的模板语言

这个语法的文件后缀名是JSX，延伸的有TSX。分别表示使用JS编写和TS编写。这种语法在React中尤其常见 JSX渲染效率也会高点

CSS在JavaScript中的使用

React 为了提高 CSS 样式管理的可维护性和局部性，引入了 CSS Modules 和 JSS 等技术。它们分别使用不同的方法来解决组件样式的作用范围和动态化问题。

CSS Modules： CSS Modules 是一种将 CSS 样式与 React 组件关联的方法。通过使用模块化的 CSS 文件，可以确保每个组件的样式都是独立的，避免样式污染和命名冲突。使用 CSS Modules 的方法如下：

（1）创建一个模块化的 CSS 文件，文件名通常以 .module.css 结尾，例如 Button.module.css：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}
复制代码

（2）在 React 组件中，使用 import 语句导入 CSS 文件，并将其作为一个对象使用：

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = ({ children, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;
复制代码

通过这种方式，组件的样式将被限制在组件的作用范围内，不会影响其他组件。

cssmodule会生成一个随机的字符串，可以避免变量名冲突 2. JSS（JavaScript Style Sheets）： JSS 是一种将 CSS 样式以 JavaScript 对象的形式编写和管理的技术。它允许我们在 JavaScript 代码中动态生成和修改样式。在 React 中，我们可以使用 @material-ui/styles 等库来使用 JSS。以下是使用 JSS 的方法：

（1）安装 `@material-ui/styles`：

```
npm install @material-ui/styles
复制代码
```

（2）在 React 组件中，使用 JSS 创建样式：

使用 JSS，我们可以在 JavaScript 代码中直接创建和管理样式。这使得样式的动态化和维护更加方便

```
// Button.js
import React from 'react';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  button: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  },
});

const Button = ({ children, onClick }) => {
  const classes = useStyles();

  return (
    <button className={classes.button} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;
```

你不知道的HTML(5)

HTML DTD

标签分类

html head标签

HTML body 功能性标签

HTML ARIA

ARIA（Accessible Rich Internet Applications）是一套让 Web 应用和网站更具可访问性的技术规范。ARIA 通过在 HTML 中添加特定的属性，帮助屏幕阅读器等辅助技术更好地理解页面内容和交互。

了解ARlA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARIA Example</title>
</head>
<body>
    <!--为无法通过文本内容描述的元素（如 <nav>）提供一个可访问的标签-->
  <nav aria-label="Main Navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h1 id="home">Welcome to our Website!</h1>
<!--将一个元素关联到一个或多个可见的标签元素，通常是标题元素（如 <h2>）。在这个例子中，我们将每个 <section> 元素关联到对应的标题元素-->
    <section aria-labelledby="about-section">
      <h2 id="about-section">About Us</h2>
      <p>We are a company that specializes in creating accessible web applications.</p>
    </section>
    <section aria-labelledby="contact-section">
      <h2 id="contact-section">Contact Us</h2>
      <p>Feel free to reach out to us for any questions or inquiries.</p>
    </section>
  </main>
</body>
</html>

HTML的规范和特性

HTML5语义化标签

建议：用对比不用好，不用比用错好。虽然这些语义化标签名字各不相同，但其实本质都是div标签

HTML5表单增强

新的表单元素：HTML5 引入了一些新的表单元素，如 date、time、email、url 等，使得开发者可以更容易地创建各种类型的表单。

自动聚焦：在 HTML5 中，可以通过将 autofocus 属性添加到表单元素中，使得页面加载时自动将焦点放在指定的表单元素上，方便用户操作。

表单验证：HTML5 提供了内置的表单验证功能，可以通过添加 required、pattern、min、max、step 等属性来限制表单元素的输入。在用户提交表单时，浏览器会自动验证表单内容，并在不合法时给出相应的提示信息。

自定义错误提示：HTML5 提供了 oninvalid 属性，使得开发者可以自定义表单元素验证失败时的错误提示信息，增强了用户体验。

表单自动保存：HTML5 允许浏览器自动保存表单数据，方便用户在下次填写相同表单时直接调用已保存的数据。

支持拖放上传文件：HTML5 的拖放功能可以使得用户直接将文件拖到表单区域，实现文件上传操作。

HTML5 存储

术语含义：

Cookies：Cookies 是存储在客户端计算机上的小文件，用于存储用户与网站之间的数据。常用于记录用户的登录状态、购物车内容等信息。

Local Storage：Local Storage 是 HTML5 新增的一种 Web 存储机制，用于在客户端存储持久化数据。与 Cookies 不同，Local Storage 的数据不会在每次请求时被发送到服务器，而是保存在客户端的本地存储空间中。

Session Storage：Session Storage 与 Local Storage 类似，也是用于在客户端存储数据。不同之处在于，Session Storage 的数据只在用户会话期间有效，即在浏览器窗口或标签页关闭时自动清除。

Capacity：Capacity 指的是 Local Storage 或 Session Storage 可以存储的最大数据量，通常为 5MB 到 10MB 不等。

Browsers：Browsers 指的是 Web 浏览器，如 Google Chrome、Firefox、Safari 等。

Accessible from：Accessible from 指的是可以从哪些网址访问到 Local Storage 或 Session Storage 中的数据。通常情况下，只有在同一域名下的页面才能够访问相同的 Local Storage 或 Session Storage 数据。

Expires：Expires 指的是 Cookie 的过期时间，即 Cookie 将在何时失效。当 Cookie 的 Expires 属性为一个固定的时间点时，该 Cookie 将在该时间点失效；当 Expires 属性为 0 时，该 Cookie 将在浏览器关闭时失效。

Storage Location：Storage Location 指的是 Local Storage 或 Session Storage 的存储位置。通常情况下，Local Storage 或 Session Storage 的数据是保存在客户端的本地存储空间中，而不是发送到服务器。

Sent with requests：Sent with requests 指的是 Cookie 是否随着 HTTP 请求一起发送到服务器。通常情况下，浏览器会将 Cookie 的值添加到 HTTP 请求头中，以便服务器进行身份验证等操作。

	Cookies	Local Storage	Session Storage
Capacity	4kb	10mb	5mb
Browsers	HTML4 / HTML5	HTML5	HTML5
Accessible from	Any window	Any window	Same tab
Expires	Manually set	Never	On tab close
Storage Location	Browser and server	Browser only	Browser only
Sent with requests	Yes	No	No

HTML5 IndexedDB

IndexedDB 是 HTML5 中新增的一种客户端存储机制，用于在浏览器中存储大量的结构化数据。它是一种键值对存储方式，类似于关系型数据库，可以通过索引快速访问数据。

IndexedDB 的主要特点包括：

异步访问：IndexedDB 的读写操作是异步进行的，不会阻塞主线程，从而提高了页面的性能。

支持事务：IndexedDB 支持事务，可以确保数据的一致性和完整性。

支持索引：IndexedDB 支持多个索引，可以提高数据的查询效率。

可存储大量数据：IndexedDB 可以存储大量的结构化数据，不会受到存储容量的限制。

支持离线应用：IndexedDB 可以使得应用在离线状态下也能够正常工作，从而提高用户体验。

HTML5 PWA & AMP

PWA（Progressive Web Apps）：PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑。PWA 具有以下特点：

可靠性：PWA 可以离线使用，并且具有快速的加载速度。

响应式设计：PWA 能够自适应不同的设备和屏幕尺寸。

安全性：PWA 使用 HTTPS 进行通信，确保用户的数据和隐私得到保护。

独立性：PWA 可以添加到设备的主屏幕上，就像原生应用程序一样。

AMP（Accelerated Mobile Pages）：AMP 是一种 Web 页面的开发方式，旨在提供快速的加载速度和优化的移动体验。它使用精简的 HTML 和 CSS，以及 AMP JavaScript 库来实现。AMP 具有以下特点：

快速加载：AMP 页面能够快速加载，提供更好的用户体验。

移动友好：AMP 页面被设计为移动优先，适应各种屏幕尺寸。

安全性：AMP 页面使用 AMP CDN 来缓存页面，并使用 HTTPS 进行通信。

限制性：AMP 页面不能包含一些复杂的功能和 JavaScript 库，以确保页面的速度和可靠性。

serverswork通过不同的生命流程，特别是在激活态完成以后就可以进行拦截请求，可以把本地缓存的文件直接返回，这是提高页面访问效率很明显的方式。

AMP主要针对sql引擎来用，AMP是谷歌定义的标签来声明一些关键性的内容

HTML5 Audio

振幅决定声音的音量、频率和音高；波形决定声音的音色

// 创建音频上下文
const audioCtx = new AudioContext();

// 创建正弦振荡器
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine'; // 正弦波
oscillator.frequency.value = 440; // 设置频率为 440Hz

// 创建音量增幅器
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5; // 设置增益为 0.5

// 正弦振荡器关联音量增幅器
oscillator.connect(gainNode);

// 音量增幅器关联音频上下文的音频输出器
gainNode.connect(audioCtx.destination);

// 开始振荡
oscillator.start();
复制代码

HTML5 Video

实现了创建一个媒体源，将该媒体源与一个 video 元素关联，为该媒体源添加媒体数据，并开始播放该视频的功能

// 创建媒体源
const mediaSource = new MediaSource();

// 创建 video 元素
const video = document.createElement('video');

// 将 video 元素与媒体源关联
video.src = URL.createObjectURL(mediaSource);

// 为媒体源添加媒体数据
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
fetch('video.mp4')
  .then(response => response.arrayBuffer())
  .then(buffer => sourceBuffer.appendBuffer(buffer));

// 开始播放视频
video.play();

HTML5 二进制

实现了一个函数 loadAsText()，用于从本地文件读取数据，并将其转换为不同的格式输出

function loadAsText(file) {
  // 创建一个 FileReader 对象
  const reader = new FileReader();

  // 设置加载完成事件处理程序
  reader.onload = function(loadedEvent) {
    // 输出读取到的文件内容
    console.log(loadedEvent.target.result);
  }

  // 以文本字符串格式读取文件内容
  reader.readAsText(file);

  // 以二进制数组格式读取文件内容
  reader.readAsArrayBuffer(file);

  // 以DataURL格式字符串读取文件内容
  reader.readAsDataURL(file);
}

HTML5 API(简略)

GeoLocation API 示例

使用 navigator.geolocation.getCurrentPosition() 方法获取当前设备的地理位置信息。当该方法调用成功时，将执行 position 回调函数，传入一个 position 对象，该对象包含了当前位置的经纬度信息。我们可以从 position.coords.latitude 和 position.coords.longitude 属性中获取当前位置的纬度和经度，并输出到控制台中。

如果获取当前位置信息失败，将执行 error 回调函数，传入一个 error 对象，该对象包含了错误信息。我们可以从 error.message 属性中获取错误消息，并输出到控制台中

// 获取当前位置的经纬度信息
navigator.geolocation.getCurrentPosition(position => {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log(`当前位置：纬度 ${latitude}，经度 ${longitude}`);
}, error => {
  console.error(error.message);
});
复制代码

Drag and Drop API 示例

首先，我们为拖拽源元素 dragSource 添加 dragstart 事件处理程序。在该处理程序中，我们使用 event.dataTransfer.setData() 方法设置拖拽数据，该方法接受两个参数：数据类型和数据内容。我们将数据类型设置为 'text/plain'，数据内容设置为 'Hello, World!'。然后，我们设置拖拽效果为 'copy'。

接着，我们为拖放目标元素 dropTarget 添加 dragover 和 drop 事件处理程序。在 dragover 处理程序中，我们首先阻止默认行为，允许元素被拖放到此处。然后，我们设置拖放效果为 'copy'。在 drop 处理程序中，我们同样阻止默认行为，防止浏览器打开拖放的文件

// 为拖拽源元素添加拖拽事件处理程序
const dragSource = document.getElementById('dragSource');
dragSource.addEventListener('dragstart', event => {
  // 设置拖拽数据
  event.dataTransfer.setData('text/plain', 'Hello, World!');

  // 设置拖拽效果
  event.dataTransfer.effectAllowed = 'copy';
});

// 为拖放目标元素添加拖放事件处理程序
const dropTarget = document.getElementById('dropTarget');
dropTarget.addEventListener('dragover', event => {
  // 阻止默认行为，允许元素被拖放到此处
  event.preventDefault();

  // 设置拖放效果
  event.dataTransfer.dropEffect = 'copy';
});

dropTarget.addEventListener('drop', event => {
  // 阻止默认行为，防止浏览器打开拖放的文件
  event.preventDefault();

  // 读取拖拽数据
  const data = event.dataTransfer.getData('text/plain');

  // 将拖拽数据输出到控制台中
  console.log(data);
});
复制代码

HTML5 Web Worker

HTML5 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}`);
});

HTML5 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 结构、监听组件内部的事件、控制组件内部的样式等。

HTML5 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' });

HTML5 SVG & Canvas

SVG是基于xml的，并且是一个向量化的图片，可用来交互；SVG是矢量的；所以svg是可扩展的，随着屏幕尺寸或者画布的尺寸变化，它不会发生明显的失帧；svg可以对事件处理支持的更好，因为它本身就是dom元素；SVG没办法绘制很复杂的图形，canvas可以；draw=》绘制程序主要目的不一样

Canvas是html元素，可以画各种各样的图形，使用点阵方式绘制的，canvas会发生失真，所以每次尺寸发生变化都要进行调整；canvas并没有提供对事件的特殊处理；paint

WebGL & WebGPU：通过着色器语言可以直接跟GPU交互来绘制图形

WebGL 是一种在浏览器中呈现 3D 和 2D 图形的 JavaScript API，它是基于 OpenGL ES 2.0 的标准，支持硬件加速，并可与 HTML、CSS 和 JavaScript 无缝集成。使用 WebGL，开发者可以在浏览器中创建高性能的 3D 游戏、可视化工具和数据展示应用等。

WebGPU 是一个新的 Web 标准，旨在为 Web 平台提供低级别、跨平台的图形和计算 API，支持使用现代硬件的强大功能。WebGPU 由 Khronos Group 开发，它是 Metal、Vulkan 和 DirectX 12 的 Web 版本，支持多线程和多 GPU，并可以在 WebAssembly 上运行。WebGPU 的目标是为 Web 开发者提供更高效、更灵活的图形和计算功能，从而打造更加丰富和复杂的 Web 应用。

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

PS：确实特别的震撼，可以通过这里的链接跳转过去看一看

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 游戏、图像和音频处理、虚拟现实和人工智能等方面具有广泛的应用前景。

前端需要arraybuffer的格式去加载三个C、C++、Rust的二进制文件，并编译和实例化；web的三个类和JavaScript的运行环境是完全隔离的，因此需要exportobj和importobj来进行通信；容器化是她未来重点的一个出入方向

拓展分享

Web的风靡

大前端

三剑客在Android、iOS已经非常普遍，比如Android通过xml方式定义一个vue，iOS也可以支持多个vue的层叠，来构建不同的图层。微信小程序是自己实现了一些wxml和wxss这些特殊的html或者css语法，通过JS的方式构建应用

MVC & MVVM & MVP

web作为gui最大的交互体系，已经沉淀出非常完善的交互方式

MVC、MVVM 和 MVP 是三种常见的前端架构设计模式。

MVC 是 Model-View-Controller（模型-视图-控制器）的缩写。它是一种分层设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和控制器（Controller），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，控制器负责协调模型和视图之间的通信。 例如用户在view里的输入框输入密码，controller判断是否正确，错误会让view给出提示，正确的话让model进行数据更新并返回给view

MVP 是 Model-View-Presenter（模型-视图-表示器）的缩写。它是一种基于事件驱动的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和表示器（Presenter），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，表示器负责协调模型和视图之间的通信，并响应用户的事件。 MVC的改进，把所有的操作内聚到了presenter这一层，及它需要同时处理事务层和数据层的相互操作，以及整个状态的统一

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写。它是一种基于数据绑定的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和视图模型（ViewModel），实现了数据的双向绑定。模型表示应用程序的数据和业务逻辑，视图表示用户界面，视图模型负责将模型数据绑定到视图上，并处理用户输入的数据。 MVVM最开始由微软提出的，在前端以VUE使用，本质与MVP相似，区别在于实现了双向绑定，减轻了view和model层的压力，同时具备可复用性

前端语言串讲 | 青训营笔记