qidao123.com技术社区-IT企服评测·应用市场»论坛 › 软件与程序人生 › DevOps与敏捷开发 › 明白话html第九章

明白话html第九章

[复制链接]
发表于 2025-10-20 22:33:42 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
明白话html第九章

1. WebAssembly（Wasm）

概念

WebAssembly 就像是给网页开辟开了个“外挂”。传统的网页代码紧张是用 JavaScript 写的，但 JavaScript 在处置惩罚一些复杂的盘算任务时速率比力慢。WebAssembly 允许我们把其他编程语言（像 C、C++、Rust 等）编写的代码编译成一种高效的二进制格式，然后在网页里运行。这就好比给网页带来了“超等大脑”，能快速处置惩罚复杂的盘算，让网页运行得更快。
应用场景



  • 游戏开辟：游戏里有许多复杂的物理模拟、图形渲染等盘算任务，WebAssembly 可以让游戏运行得更流畅。
  • 图形处置惩罚：好比图像编辑、3D 建模等，能快速处置惩罚大量的像素数据和复杂的算法。
代码示例

下面以一个简单的 C 语言代码编译成 WebAssembly 并在网页中利用为例。
步调 1：编写 C 代码
创建一个名为 add.c 的文件，内容如下：
  1. // 定义一个简单的加法函数
  2. int add(int a, int b) {
  3.     return a + b;
  4. }
复制代码
步调 2：编译 C 代码为 WebAssembly
利用 Emscripten 工具链举行编译，在下令行中运行以下下令：
  1. emcc add.c -s WASM=1 -o add.js
复制代码
这会天生两个文件：add.wasm 和 add.js。
步调 3：在 HTML 中利用 WebAssembly
  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.     <button onclick="runWasm()">运行 WebAssembly 函数</button>
  6.     <p id="result"></p>
  8.     <script>
  9.         async function runWasm() {
  10.             // 加载 WebAssembly 模块
  11.             const response = await fetch('add.wasm');
  12.             const buffer = await response.arrayBuffer();
  13.             const module = await WebAssembly.compile(buffer);
  14.             const instance = await WebAssembly.instantiate(module);
  16.             // 调用 WebAssembly 里的 add 函数
  17.             const result = instance.exports.add(2, 3);
  18.             document.getElementById('result').innerHTML = `计算结果: ${result}`;
  19.         }
  20.     </script>
  21. </body>
  23. </html>
复制代码
在这个例子中，我们先编写了一个简单的 C 语言加法函数，然后把它编译成 WebAssembly 模块。在 HTML 中，通过 JavaScript 加载这个模块，并调用内里的 add 函数举行盘算，末了把效果表如今网页上。
2. Progressive Web Apps（PWA）

概念

Progressive Web Apps 可以把网页酿成像手机应用一样的存在。它团结了网页的开放性和原生应用的长处，用户可以像安装原生应用一样把网页添加到主屏幕，而且在离线状态下也能利用部门功能。就好比给网页穿上了“应用的外衣”，让用户利用起来更方便、更流畅。
特点



  • 离线支持：借助 Service Workers 缓存网页资源，没网络时也能访问部门内容。
  • 推送关照：可以像原生应用一样给用户发送关照，提示用户有新消息或活动。
  • 添加到主屏幕：用户可以把网页快捷方式添加得手机主屏幕，就像安装了一个应用。
代码示例

以下是一个简单的 PWA 示例，紧张包罗注册 Service Worker 和添加 manifest.json 文件。
步调 1：创建 manifest.json 文件
  1. {
  2.     "name": "My PWA",
  3.     "short_name": "PWA",
  4.     "icons": [
  5.         {
  6.             "src": "icon.png",
  7.             "sizes": "192x192",
  8.             "type": "image/png"
  9.         }
  10.     ],
  11.     "start_url": "/index.html",
  12.     "display": "standalone",
  13.     "background_color": "#ffffff",
  14.     "theme_color": "#000000"
  15. }
复制代码
这个文件界说了 PWA 的名称、图标、启动页面等信息。
步调 2：在 HTML 中引用 manifest.json
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <link rel="manifest" href="manifest.json">
  6.     <script>
  7.         if ('serviceWorker' in navigator) {
  8.             window.addEventListener('load', function () {
  9.                 navigator.serviceWorker.register('/service-worker.js')
  10.                    .then(function (registration) {
  11.                         console.log('Service Worker 注册成功:', registration);
  12.                     })
  13.                    .catch(function (error) {
  14.                         console.log('Service Worker 注册失败:', error);
  15.                     });
  16.             });
  17.         }
  18.     </script>
  19. </head>
  21. <body>
  22.     <h1>这是一个 PWA 示例</h1>
  23. </body>
  25. </html>
复制代码
步调 3：创建 Service Worker 文件 service - worker.js
  1. self.addEventListener('install', function (event) {
  2.     event.waitUntil(
  3.         caches.open('my - cache - v1')
  4.            .then(function (cache) {
  5.                 return cache.addAll([
  6.                     '/',
  7.                     '/index.html'
  8.                 ]);
  9.             })
  10.     );
  11. });
  13. self.addEventListener('fetch', function (event) {
  14.     event.respondWith(
  15.         caches.match(event.request)
  16.            .then(function (response) {
  17.                 if (response) {
  18.                     return response;
  19.                 }
  20.                 return fetch(event.request);
  21.             })
  22.     );
  23. });
复制代码
在这个 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 模板，在须要的时间复制利用。
代码示例

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.     <!-- 使用自定义元素 -->
  6.     <my - component></my - component>
  8.     <script>
  9.         // 定义自定义元素
  10.         class MyComponent extends HTMLElement {
  11.             constructor() {
  12.                 super();
  13.                 // 创建影子 DOM
  14.                 const shadow = this.attachShadow({ mode: 'open' });
  15.                 // 创建模板
  16.                 const template = document.createElement('template');
  17.                 template.innerHTML = `
  18.                     <style>
  19.                         p {
  20.                             color: blue;
  21.                         }
  22.                     </style>
  23.                     <p>这是一个自定义组件</p>
  24.                 `;
  25.                 // 克隆模板内容并添加到影子 DOM 中
  26.                 const clone = template.content.cloneNode(true);
  27.                 shadow.appendChild(clone);
  28.             }
  29.         }
  30.         // 注册自定义元素
  31.         customElements.define('my - component', MyComponent);
  32.     </script>
  33. </body>
  35. </html>
复制代码
在这个例子中，我们界说了一个自界说元素 my - component，在它的构造函数里创建了影子 DOM，然后把一个包罗样式和文本的模板添加到影子 DOM 中。末了通过 customElements.define 方法注册这个自界说元素，如许就可以在 HTML 中利用它了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

返回列表

盛世宏图
+ 我要发帖
×
登录参与点评抽奖，加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表