大白话html第八章HTML 与新兴技术的结合、更高级的性能优化

1. 服务工作线程（Service Workers）

概念：服务工作线程就像是网页的小管家，它可以在浏览器后台独立运行，即使网页关闭了它也能继续工作。它主要有两个重要作用，一是可以缓存网页资源，这样下次访问网页时可以直接从缓存里拿东西，加快加载速度；二是可以实现离线访问，就算没网络了，用户也能继续浏览部分网页内容。
代码示例 ：
- 注册服务工作线程：在 HTML 文件里添加以下代码来注册服务工作线程。

html 复制代码

<!DOCTYPE html>
<html>

<body>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/service-worker.js')
                   .then(function (registration) {
                        console.log('服务工作线程注册成功:', registration);
                    })
                   .catch(function (error) {
                        console.log('服务工作线程注册失败:', error);
                    });
            });
        }
    </script>
</body>

</html>

- **创建服务工作线程文件（service - worker.js）**：

javascript 复制代码

// 监听安装事件
self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('my - cache - v1')
           .then(function (cache) {
                return cache.addAll([
                    '/',
                    '/index.html',
                    '/styles.css',
                    '/script.js'
                ]);
            })
    );
});

// 监听请求事件
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
           .then(function (response) {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

- 解释：在注册代码里，我们检查浏览器是否支持服务工作线程，如果支持就注册 `service - worker.js` 文件。在 `service - worker.js` 中，`install` 事件里我们打开一个缓存并把一些网页资源添加进去；`fetch` 事件里，当有请求时先检查缓存里有没有对应的资源，如果有就直接返回，没有就去网络请求。

2. 媒体查询进阶

概念：媒体查询之前我们简单提过，它能让网页根据不同设备的屏幕尺寸等特性应用不同的样式。进阶的媒体查询可以结合更多的设备特性，比如屏幕的方向（横屏还是竖屏）、分辨率等，让网页在各种设备上都能完美显示。
代码示例：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 竖屏样式 */
        @media (orientation: portrait) {
            body {
                background-color: lightblue;
            }
        }

        /* 横屏样式 */
        @media (orientation: landscape) {
            body {
                background-color: lightgreen;
            }
        }

        /* 高分辨率屏幕样式 */
        @media (-webkit - min - device - pixel - ratio: 2),
        (min - resolution: 192dpi) {
            body {
                font - size: 18px;
            }
        }
    </style>
</head>

<body>
    <p>这是一个使用进阶媒体查询的网页。</p>
</body>

</html>

- 解释：这里定义了三个媒体查询。第一个根据屏幕方向为竖屏时设置背景颜色为浅蓝色；第二个在横屏时设置背景颜色为浅绿色；第三个针对高分辨率屏幕把字体大小设置为 18px。

3. 无障碍设计深化

概念：无障碍设计就是让各种身体状况的人都能方便地使用网页。深化无障碍设计要考虑更多细节，比如为图片添加更准确的 alt 属性描述，为表单元素添加 aria - 系列属性等，让屏幕阅读器等辅助设备能更好地解读网页内容。
代码示例：

html 复制代码

<!DOCTYPE html>
<html>

<body>
    <!-- 为图片添加详细的 alt 描述 -->
    <img src="example.jpg" alt="一张美丽的海边风景照，湛蓝的天空下，海浪拍打着金色的沙滩">

    <!-- 为表单元素添加 aria - 属性 -->
    <form>
        <label for="username" aria - label="请输入您的用户名">用户名:</label>
        <input type="text" id="username" name="username" aria - required="true">
        <input type="submit" value="提交">
    </form>
</body>

</html>

- 解释：图片的 `alt` 属性详细描述了图片内容，方便视力障碍者通过屏幕阅读器了解图片。表单的 `label` 元素添加了 `aria - label` 属性，输入框添加了 `aria - required` 属性，让屏幕阅读器能更好地告知用户表单的要求。

4. WebGL 基础

概念：WebGL 可以让网页实现 3D 图形和动画效果，就像在网页上搭建一个 3D 世界。它基于 OpenGL ES 标准，能在支持的浏览器里直接运行，不需要额外的插件。
代码示例：

html 复制代码

<!DOCTYPE html>
<html>

<body>
    <canvas id="glCanvas" width="640" height="480"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('glCanvas');
        // 获取 WebGL 上下文
        const gl = canvas.getContext('webgl');

        if (!gl) {
            alert('无法初始化 WebGL，你的浏览器可能不支持。');
            return;
        }

        // 设置清除颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // 清除颜色缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT);
    </script>
</body>

</html>

- 解释：首先获取 `canvas` 元素，然后尝试获取 WebGL 上下文。如果获取成功，设置清除颜色为黑色，最后清除颜色缓冲区，这样 canvas 就会显示为黑色背景。这只是一个简单的基础示例，WebGL 还能实现更复杂的 3D 效果。