大白话html第七章HTML 与后端交互、优化网页性能

IT、木易2025-03-04 11:07

在学习 HTML 的第七章，我们会更深入地探索网页开发的高级特性，包括 Web Storage、Web Workers、Web Sockets 等，这些技术能让网页拥有更强大的功能和更好的用户体验。下面咱们用大白话详细介绍这些内容，还会配上代码示例。

1. Web Storage（本地存储）

Web Storage 就像是浏览器给咱们网页提供的一个小仓库，咱们可以把一些数据存放在这个仓库里，下次再访问这个网页的时候，还能把这些数据取出来用。Web Storage 有两种类型：localStorage 和 sessionStorage。

localStorage

这个仓库比较大，而且只要你不手动清空它，里面的数据就会一直存在。就好比你把一些重要的文件存放在家里的大柜子里，只要你不扔掉这些文件，它们就会一直在柜子里。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="saveData()">保存数据</button>
    <button onclick="getData()">获取数据</button>
    <p id="result"></p>

    <script>
        function saveData() {
            // 把数据 "Hello, localStorage!" 存到 localStorage 里，键名为 "message"
            localStorage.setItem('message', 'Hello, localStorage!');
        }

        function getData() {
            // 从 localStorage 里取出键名为 "message" 的数据
            var data = localStorage.getItem('message');
            document.getElementById('result').innerHTML = data;
        }
    </script>
</body>

</html>

在这个例子中，点击"保存数据"按钮，就会把一段消息存到 localStorage 里；点击"获取数据"按钮，就会把存进去的消息取出来并显示在网页上。

sessionStorage

这个仓库就像你去商场购物时用的临时寄存柜，只要你关闭了当前的浏览器窗口或者标签页，里面的数据就会被清空。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="saveSessionData()">保存会话数据</button>
    <button onclick="getSessionData()">获取会话数据</button>
    <p id="sessionResult"></p>

    <script>
        function saveSessionData() {
            // 把数据 "Hello, sessionStorage!" 存到 sessionStorage 里，键名为 "sessionMessage"
            sessionStorage.setItem('sessionMessage', 'Hello, sessionStorage!');
        }

        function getSessionData() {
            // 从 sessionStorage 里取出键名为 "sessionMessage" 的数据
            var sessionData = sessionStorage.getItem('sessionMessage');
            document.getElementById('sessionResult').innerHTML = sessionData;
        }
    </script>
</body>

</html>

这里点击"保存会话数据"按钮，会把消息存到 sessionStorage 里；点击"获取会话数据"按钮，会取出数据显示在网页上。当你关闭当前窗口或标签页后，sessionStorage 里的数据就没了。

2. Web Workers（网页后台工作者）

想象一下你在做一顿大餐，你一个人又要炒菜又要煮饭又要切菜，肯定忙不过来。Web Workers 就像是你请的一个小助手，它可以在后台帮你做一些比较耗时的工作，而不会影响你在前台正常展示网页内容。也就是说，它可以让一些复杂的计算在后台进行，不会让网页卡住。

代码示例 ：

首先创建一个名为 worker.js 的文件，内容如下：

javascript 复制代码 
// 监听消息事件
self.onmessage = function (e) {
    var number = e.data;
    var result = 0;
    // 进行一个比较耗时的计算
    for (var i = 0; i < number; i++) {
        result += i;
    }
    // 把计算结果发送回主线程
    self.postMessage(result);
};

然后在 HTML 文件中使用这个 Web Worker：

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="startWorker()">开始计算</button>
    <p id="workerResult"></p>

    <script>
        function startWorker() {
            // 创建一个新的 Web Worker 实例
            var worker = new Worker('worker.js');
            // 给 Web Worker 发送一个消息，这里发送的是 1000000
            worker.postMessage(1000000);
            // 监听 Web Worker 发送回来的消息
            worker.onmessage = function (e) {
                document.getElementById('workerResult').innerHTML = '计算结果: ' + e.data;
            };
        }
    </script>
</body>

</html>

在这个例子中，点击"开始计算"按钮，会创建一个 Web Worker 并让它进行一个比较耗时的计算。计算完成后，Web Worker 会把结果发送回主线程，然后显示在网页上。在计算过程中，网页不会因为这个耗时操作而卡住。

3. Web Sockets（网页套接字）

Web Sockets 就像是在网页和服务器之间建立了一条实时通信的高速公路，网页和服务器可以随时、双向地交换数据。就好比你和朋友之间拉了一条专线电话，随时都能互相聊天。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="connectWebSocket()">连接 WebSocket</button>
    <input type="text" id="messageInput" placeholder="输入消息">
    <button onclick="sendMessage()">发送消息</button>
    <div id="chatLog"></div>

    <script>
        var socket;

        function connectWebSocket() {
            // 创建一个 WebSocket 实例，连接到指定的服务器地址
            socket = new WebSocket('ws://echo.websocket.org');
            // 监听 WebSocket 连接成功事件
            socket.onopen = function () {
                addMessageToLog('连接成功');
            };
            // 监听 WebSocket 接收到消息事件
            socket.onmessage = function (event) {
                addMessageToLog('收到消息: ' + event.data);
            };
            // 监听 WebSocket 连接关闭事件
            socket.onclose = function () {
                addMessageToLog('连接已关闭');
            };
        }

        function sendMessage() {
            var message = document.getElementById('messageInput').value;
            if (socket && socket.readyState === WebSocket.OPEN) {
                // 发送消息到服务器
                socket.send(message);
                addMessageToLog('发送消息: ' + message);
            }
        }

        function addMessageToLog(message) {
            var log = document.getElementById('chatLog');
            var p = document.createElement('p');
            p.textContent = message;
            log.appendChild(p);
        }
    </script>
</body>

</html>

在这个例子中，点击"连接 WebSocket"按钮，会和服务器建立一个 WebSocket 连接。在输入框里输入消息，点击"发送消息"按钮，消息就会发送到服务器，服务器返回的消息也会显示在网页上。这样就实现了网页和服务器之间的实时通信。

Web Storage的最大存储容量是多少？

Web Storage 是浏览器提供给网页用来存储数据的一个功能，就像给每个网页分配了一个小仓库，让网页可以把一些数据存起来，等需要的时候再拿出来用。它有两种类型，分别是 localStorage 和 sessionStorage ，这两种存储方式的最大存储容量情况比较类似，下面来详细说说。

不同浏览器的大致存储容量

不同的浏览器给这个"小仓库"规定的大小不太一样，不过总体来说都有一定的限制。

常见浏览器的情况
  • Chrome、Opera 和 Safari：这些浏览器一般给每个域名分配的 Web Storage 最大存储容量是 5MB。这就好比给每个网页的"小仓库"规定了只能装 5MB 大小的东西。比如说，你可以把一些图片、文本数据或者配置信息存进去，但是如果存的数据超过了 5MB，就像仓库满了一样，再存东西就会出错。
  • Firefox：Firefox 浏览器默认也是给每个域名 5MB 的 Web Storage 容量。不过 Firefox 允许用户通过配置来调整这个限制，就好像你可以自己动手把仓库的空间变大一点，但这需要用户手动去修改浏览器的设置。
  • Internet Explorer 和 Edge：在这些浏览器里，Web Storage 的最大存储容量通常也是 5MB 。

实际使用中的注意事项

  • 超出容量的处理：当你往 Web Storage 里存数据的时候，如果存的数据量超过了最大存储容量，浏览器会抛出一个错误。这就好比你往仓库里塞东西，塞到满了还继续塞，仓库就会"抗议"，给你报错。所以在使用 Web Storage 存数据的时候，要注意控制数据量，或者在存数据之前先检查一下仓库还剩多少空间。
  • 不同域名独立计算 ：每个域名的 Web Storage 是相互独立的。比如说，www.example1.com 和 www.example2.com 这两个不同的网站，它们的 Web Storage 是分开的，各自有自己的 5MB 容量。就好像不同的房子有各自独立的仓库，互相之间不影响。

代码示例来检测容量

虽然没有直接的方法能精确知道 Web Storage 还剩多少空间，但可以通过不断尝试存储数据，直到报错来大致判断还能存多少。下面是一个简单的 JavaScript 示例，用来测试 localStorage 能存多少数据：

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="testStorageCapacity()">测试存储容量</button>
    <p id="result"></p>

    <script>
        function testStorageCapacity() {
            var testData = 'a';
            var storage = localStorage;
            var counter = 0;
            try {
                while (true) {
                    storage.setItem('testKey', testData);
                    testData += 'a';
                    counter++;
                }
            } catch (e) {
                var size = (testData.length * 2) / (1024 * 1024); // 转换为 MB
                document.getElementById('result').innerHTML = '大致存储容量: ' + size.toFixed(2) + ' MB';
                storage.removeItem('testKey');
            }
        }
    </script>
</body>

</html>

在这个例子中，代码会不断往 localStorage 里存越来越长的字符串，直到存不进去报错为止。然后根据最后存的字符串长度，大致计算出用了多少存储空间，把结果显示在网页上。不过要注意，这个方法只是一个大致的测试，实际的存储容量可能会因为浏览器的实现细节和其他因素有所不同。

Web Workers是什么？有哪些应用场景？

啥是 Web Workers

Web Workers 就像是网页开发里的小助手。在传统的网页运行模式下，网页里的 JavaScript 代码是单线程执行的。这就好比一个人一次只能做一件事，要是遇到一件特别耗时的任务，这个人就得一直忙着做这件事，其他事情都得等着，在网页里就表现为页面卡住、无法响应用户操作。

而 Web Workers 打破了这个限制，它允许你在网页的主线程之外，另外开辟一个或多个"小线程"来做一些工作。这些"小线程"就像你的小助手，能帮你分担一些比较耗时的任务，让主线程可以继续去处理用户的交互、更新页面显示等工作，这样网页就不会因为某个耗时任务而卡住，用户体验会好很多。

工作原理

你可以把 Web Workers 想象成一个独立的小房间，在这个房间里可以运行一段 JavaScript 代码。主线程就像是老板，它可以给这个小房间里的"小助手"分配任务（发送消息），"小助手"完成任务后再把结果反馈给老板（主线程）。它们之间通过消息传递的方式来交流。

代码示例

下面是一个简单的使用 Web Workers 的例子。

首先创建一个 worker.js 文件，这个文件里的代码就是"小助手"要做的工作：
javascript 复制代码 
// 监听主线程发送过来的消息
self.onmessage = function (e) {
    // 从消息里获取数据，这里假设传过来的是一个数字
    var number = e.data;
    var result = 0;
    // 进行一个比较耗时的计算，比如累加从 0 到这个数字的值
    for (var i = 0; i < number; i++) {
        result += i;
    }
    // 把计算结果发送回主线程
    self.postMessage(result);
};
然后在 HTML 文件里使用这个 Web Worker：
html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="startWorker()">开始计算</button>
    <p id="workerResult"></p>

    <script>
        function startWorker() {
            // 创建一个新的 Web Worker 实例，指定要运行的 JavaScript 文件
            var worker = new Worker('worker.js');
            // 给 Web Worker 发送一个消息，这里发送的是 1000000，让它去计算累加值
            worker.postMessage(1000000);
            // 监听 Web Worker 发送回来的消息
            worker.onmessage = function (e) {
                // 把 Web Worker 计算好的结果显示在网页上
                document.getElementById('workerResult').innerHTML = '计算结果: ' + e.data;
            };
        }
    </script>
</body>

</html>

在这个例子中，点击"开始计算"按钮后，主线程会创建一个 Web Worker 并给它分配一个计算任务。Web Worker 在后台开始计算，主线程不会被这个计算任务阻塞，可以继续响应用户的其他操作。当 Web Worker 计算完成后，会把结果发送回主线程，主线程再把结果显示在网页上。

应用场景

1. 复杂计算任务
  • 科学计算：比如在一些在线的科学计算网页中，需要进行大量的数学运算，像矩阵运算、数值积分等。这些计算非常耗时，如果在主线程中进行，会导致网页长时间无响应。使用 Web Workers 就可以把这些计算任务交给小助手去做，主线程可以继续处理用户的界面操作，比如显示进度条、更新提示信息等。
  • 图像处理：在网页上对图片进行一些复杂的处理，比如图像滤镜效果、图像压缩算法等。这些处理需要大量的计算资源和时间，利用 Web Workers 可以在不影响页面交互的情况下完成这些图像处理任务。
2. 数据处理和分析
  • 大数据处理：当网页需要处理大量的数据时，比如对一个大型的数据集进行排序、筛选、统计等操作。这些操作可能会占用很长时间，使用 Web Workers 可以让主线程保持流畅，同时在后台完成数据处理任务。
  • 实时数据分析：在一些实时数据监控的网页中，需要不断地对新收到的数据进行分析和处理。Web Workers 可以在后台持续处理这些数据，主线程则负责实时更新页面上的数据展示，让用户可以流畅地查看数据变化。
3. 游戏开发
  • 游戏逻辑处理：在网页游戏中，游戏的逻辑计算（比如角色移动、碰撞检测、AI 算法等）可能会比较复杂和耗时。使用 Web Workers 可以把这些游戏逻辑处理任务放在后台线程中进行，主线程专注于渲染游戏画面和处理用户的输入操作，从而提高游戏的流畅度和响应速度。

如何在网页中使用Web Sockets？

什么是 Web Sockets

Web Sockets 就像是在网页和服务器之间建立了一条专门的、可以随时双向聊天的"电话线"。以前网页和服务器交流，就像发信件，得这边发过去，等那边回过来，来来回回的，而且每次交流都得重新"写信""寄信"。而 Web Sockets 让网页和服务器能实时、直接地沟通，不管什么时候，两边都能随时把想说的话传过去，非常方便。

使用 Web Sockets 的步骤

1. 建立连接

这就好比你要和对方通电话，得先拨通号码建立连接。在网页里，我们用 JavaScript 来创建一个 WebSocket 对象，指定服务器的地址，这样就能和服务器建立连接啦。

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="connectWebSocket()">连接服务器</button>

    <script>
        function connectWebSocket() {
            // 创建一个 WebSocket 实例，连接到指定的服务器地址
            var socket = new WebSocket('ws://echo.websocket.org');

            // 监听连接成功事件
            socket.onopen = function () {
                console.log('和服务器连接成功啦！');
            };
        }
    </script>
</body>

</html>

在这个例子里，new WebSocket('ws://echo.websocket.org') 就是在尝试和 ws://echo.websocket.org 这个服务器建立连接。当连接成功后，onopen 这个事件就会被触发，然后在控制台输出连接成功的消息。

2. 发送消息

连接建立好后，就可以像打电话一样和服务器说话啦。在 JavaScript 里，用 send 方法就能把消息发给服务器。

javascript 复制代码 
// 假设已经建立了 WebSocket 连接，变量名为 socket
socket.send('你好，服务器！');

这里的 send 方法就像是你对着电话说出想说的话，把消息传递给服务器。

3. 接收消息

服务器收到消息后，可能会给你回消息。我们要监听 onmessage 事件，这样当服务器发消息过来时，就能及时收到啦。

javascript 复制代码 
// 监听服务器发送过来的消息
socket.onmessage = function (event) {
    var message = event.data;
    console.log('收到服务器的消息：' + message);
};

onmessage 事件就像是电话的听筒，当服务器说话时，我们能听到它说的内容。event.data 就是服务器发过来的消息。

4. 处理连接关闭

有时候，通话结束了，得挂掉电话。在 Web Sockets 里，我们可以监听 onclose 事件，当连接关闭时做一些处理。

javascript 复制代码 
// 监听连接关闭事件
socket.onclose = function () {
    console.log('和服务器的连接关闭了。');
};

onclose 事件就像是电话挂断的提示，告诉我们和服务器的连接已经断开了。

5. 处理错误

打电话的时候可能会遇到信号不好等问题，Web Sockets 连接也可能会出错。我们可以监听 onerror 事件，当出现错误时进行处理。

javascript 复制代码 
// 监听错误事件
socket.onerror = function (error) {
    console.log('连接出错啦：' + error);
};

onerror 事件就像是电话出问题时的提示，告诉我们连接过程中出现了错误。

完整代码示例

html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="connectWebSocket()">连接服务器</button>
    <input type="text" id="messageInput" placeholder="输入要发送的消息">
    <button onclick="sendMessage()">发送消息</button>
    <div id="chatLog"></div>

    <script>
        var socket;

        function connectWebSocket() {
            // 创建一个 WebSocket 实例，连接到指定的服务器地址
            socket = new WebSocket('ws://echo.websocket.org');

            // 监听连接成功事件
            socket.onopen = function () {
                addMessageToLog('和服务器连接成功！');
            };

            // 监听服务器发送过来的消息
            socket.onmessage = function (event) {
                var message = event.data;
                addMessageToLog('收到服务器的消息：' + message);
            };

            // 监听连接关闭事件
            socket.onclose = function () {
                addMessageToLog('和服务器的连接关闭了。');
            };

            // 监听错误事件
            socket.onerror = function (error) {
                addMessageToLog('连接出错啦：' + error);
            };
        }

        function sendMessage() {
            var message = document.getElementById('messageInput').value;
            if (socket && socket.readyState === WebSocket.OPEN) {
                // 发送消息到服务器
                socket.send(message);
                addMessageToLog('发送消息：' + message);
            }
        }

        function addMessageToLog(message) {
            var log = document.getElementById('chatLog');
            var p = document.createElement('p');
            p.textContent = message;
            log.appendChild(p);
        }
    </script>
</body>

</html>

在这个完整的例子中，点击"连接服务器"按钮可以建立连接，在输入框里输入消息，点击"发送消息"按钮就能把消息发给服务器。服务器返回的消息、连接状态的变化等都会显示在网页上的聊天记录区域里。

相关推荐
关山月26 分钟前
🌊 布局抖动：是什么？如何消除它
前端
小妖66634 分钟前
css3的transform:tanslateZ没有效果
前端·css·css3
见青..1 小时前
[BUUCTF]web--wp（持续更新中）
前端·web安全·网络安全
二川bro1 小时前
前端模块化管理深度解析：从混沌到秩序的全链路实践指南
前端
JosieBook1 小时前
【前端】在WebStorm中安装Node.js与nvm与npm的详细过程
前端·node.js·webstorm
linweidong1 小时前
希音(Shein)前端面试题集锦和参考答案
前端·arcgis·xss·csrf·前端面试·前端面经·webpack原理
桃子不吃李子1 小时前
npm ERR! code 128 npm ERR! An unknown git error occurred
前端·npm·node.js
思想永无止境1 小时前
解决windows npm无法下载electron包的问题
前端·electron·npm
2401_897930061 小时前
npm install 详解
前端·npm·node.js
zybsjn3 小时前
Django框架下html文件无法格式化的解决方案
python·django·html
热门推荐
01DeepSeek各版本说明与优缺点分析02DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05本地部署DeepSeek教程（Mac版本）06DeepSeek本地部署详细指南07【docker】Windows10安装Docker Desktop - WSL update failed08保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型09DeepSeek r1本地安装全指南10Anaconda +Jupyter Notebook安装（2025最新版）