大白话html第九章
1. WebAssembly（Wasm）
概念
WebAssembly 就像是给网页开发开了个“外挂”。传统的网页代码主要是用 JavaScript 写的，但 JavaScript 在处理一些复杂的计算任务时速度比较慢。WebAssembly 允许我们把其他编程语言（像 C、C++、Rust 等）编写的代码编译成一种高效的二进制格式，然后在网页里运行。这就好比给网页带来了“超级大脑”，能快速处理复杂的计算，让网页运行得更快。
应用场景
- 游戏开发：游戏里有很多复杂的物理模拟、图形渲染等计算任务，WebAssembly 可以让游戏运行得更流畅。
- 图形处理：比如图像编辑、3D 建模等，能快速处理大量的像素数据和复杂的算法。
代码示例
下面以一个简单的 C 语言代码编译成 WebAssembly 并在网页中使用为例。
步骤 1：编写 C 代码
创建一个名为 add.c 的文件，内容如下：
// 定义一个简单的加法函数
int add(int a, int b) {return a + b;
}
步骤 2：编译 C 代码为 WebAssembly
使用 Emscripten 工具链进行编译，在命令行中运行以下命令：
emcc add.c -s WASM=1 -o add.js
这会生成两个文件：add.wasm 和 add.js。
步骤 3：在 HTML 中使用 WebAssembly
<!DOCTYPE html>
<html><body><button onclick="runWasm()">运行 WebAssembly 函数</button><p id="result"></p><script>async function runWasm() {// 加载 WebAssembly 模块const response = await fetch('add.wasm');const buffer = await response.arrayBuffer();const module = await WebAssembly.compile(buffer);const instance = await WebAssembly.instantiate(module);// 调用 WebAssembly 里的 add 函数const result = instance.exports.add(2, 3);document.getElementById('result').innerHTML = `计算结果: ${result}`;}</script>
</body></html>
在这个例子中，我们先编写了一个简单的 C 语言加法函数，然后把它编译成 WebAssembly 模块。在 HTML 中，通过 JavaScript 加载这个模块，并调用里面的 add 函数进行计算，最后把结果显示在网页上。
2. Progressive Web Apps（PWA）
概念
Progressive Web Apps 可以把网页变成像手机应用一样的存在。它结合了网页的开放性和原生应用的优点，用户可以像安装原生应用一样把网页添加到主屏幕，而且在离线状态下也能使用部分功能。就好比给网页穿上了“应用的外衣”，让用户使用起来更方便、更流畅。
特点
- 离线支持：借助 Service Workers 缓存网页资源，没网络时也能访问部分内容。
- 推送通知：可以像原生应用一样给用户发送通知，提醒用户有新消息或活动。
- 添加到主屏幕：用户可以把网页快捷方式添加到手机主屏幕，就像安装了一个应用。
代码示例
以下是一个简单的 PWA 示例，主要包括注册 Service Worker 和添加 manifest.json 文件。
步骤 1：创建 manifest.json 文件
{"name": "My PWA","short_name": "PWA","icons": [{"src": "icon.png","sizes": "192x192","type": "image/png"}],"start_url": "/index.html","display": "standalone","background_color": "#ffffff","theme_color": "#000000"
}
这个文件定义了 PWA 的名称、图标、启动页面等信息。
步骤 2：在 HTML 中引用 manifest.json
<!DOCTYPE html>
<html><head><link rel="manifest" href="manifest.json"><script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('/service-worker.js').then(function (registration) {console.log('Service Worker 注册成功:', registration);}).catch(function (error) {console.log('Service Worker 注册失败:', error);});});}</script>
</head><body><h1>这是一个 PWA 示例</h1>
</body></html>
步骤 3：创建 Service Worker 文件 service - worker.js
self.addEventListener('install', function (event) {event.waitUntil(caches.open('my - cache - v1').then(function (cache) {return cache.addAll(['/','/index.html']);}));
});self.addEventListener('fetch', function (event) {event.respondWith(caches.match(event.request).then(function (response) {if (response) {return response;}return fetch(event.request);}));
});
在这个 PWA 示例中，manifest.json 定义了 PWA 的基本信息，HTML 中注册了 Service Worker，Service Worker 负责缓存网页资源，实现离线访问。
3. Web Components
概念
Web Components 就像是搭积木，把网页拆分成一个个独立的、可复用的组件。每个组件都有自己的 HTML 结构、CSS 样式和 JavaScript 逻辑，就像一个独立的小零件。我们可以在不同的网页里重复使用这些组件，提高开发效率，也让代码更易于维护。
组成部分
- 自定义元素（Custom Elements）：自己定义一个新的 HTML 标签，赋予它特定的功能。
- 影子 DOM（Shadow DOM）：可以把组件的内部结构和样式封装起来，避免和外部的样式冲突。
- HTML 模板（HTML Templates）：定义一个 HTML 模板，在需要的时候复制使用。
代码示例
<!DOCTYPE html>
<html><body><!-- 使用自定义元素 --><my - component></my - component><script>// 定义自定义元素class MyComponent extends HTMLElement {constructor() {super();// 创建影子 DOMconst shadow = this.attachShadow({ mode: 'open' });// 创建模板const template = document.createElement('template');template.innerHTML = `<style>p {color: blue;}</style><p>这是一个自定义组件</p>`;// 克隆模板内容并添加到影子 DOM 中const clone = template.content.cloneNode(true);shadow.appendChild(clone);}}// 注册自定义元素customElements.define('my - component', MyComponent);</script>
</body></html>
在这个例子中，我们定义了一个自定义元素 my - component，在它的构造函数里创建了影子 DOM，然后把一个包含样式和文本的模板添加到影子 DOM 中。最后通过 customElements.define 方法注册这个自定义元素，这样就可以在 HTML 中使用它了。