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

IT、木易2025-03-02 8:27

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

1. HTML 与后端交互

当你在网页上填写表单并提交，或者点击某些按钮获取数据时，就需要和后端服务器进行交互。这里主要通过表单提交和 AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）来实现。

表单提交

表单提交是最基础的和后端交互的方式，就好像你把填好的表格交给办事人员。在 HTML 里，表单用 <form> 标签，通过 action 属性指定数据要发送到的后端地址，method 属性指定发送数据的方式（一般有 GET 和 POST）。

代码示例：

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

<body>
    <!-- action 指定后端处理地址，method 为 POST 方式提交数据 -->
    <form action="https://example.com/submit" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

在这个例子中，用户填写用户名和密码后点击"提交"按钮，表单数据就会以 POST 方式发送到 https://example.com/submit 这个后端地址。

AJAX 请求

AJAX 能让网页在不刷新整个页面的情况下和后端进行数据交互，就像你不用重新换一张表格，就能悄悄把修改的内容发给办事人员。在现代开发中，更多使用 fetch API 来实现 AJAX 请求。

代码示例：

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

<body>
    <button onclick="getData()">获取数据</button>
    <div id="result"></div>

    <script>
        async function getData() {
            try {
                // 发起一个 GET 请求到指定地址
                const response = await fetch('https://example.com/api/data');
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                // 将响应数据转换为 JSON 格式
                const data = await response.json();
                document.getElementById('result').innerHTML = JSON.stringify(data);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }
    </script>
</body>

</html>

在这个例子中，当用户点击"获取数据"按钮时，会发起一个 GET 请求到 https://example.com/api/data 地址，然后把返回的数据显示在 id 为 result 的 div 里。

2. 优化网页性能

优化网页性能可以让网页加载得更快，用户体验更好。主要从图片优化、缓存设置和代码压缩等方面入手。

图片优化

图片往往是网页中占用空间较大的元素，优化图片可以减小文件大小。可以使用图片压缩工具，并且根据不同设备使用合适的图片格式和尺寸。

代码示例：

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

<body>
    <!-- 使用 srcset 和 sizes 属性根据屏幕宽度加载不同尺寸的图片 -->
    <img src="small-image.jpg"
         srcset="small-image.jpg 500w, medium-image.jpg 1000w, large-image.jpg 2000w"
         sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 2000px"
         alt="优化后的图片">
</body>

</html>

这里通过 srcset 和 sizes 属性，让浏览器根据屏幕宽度自动选择合适尺寸的图片加载，避免加载过大的图片浪费流量和时间。

缓存设置

可以使用 HTML 的 <meta> 标签设置缓存策略，让浏览器可以缓存网页资源，下次访问时就不用重新下载。

代码示例：

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

<head>
    <!-- 设置缓存时间为 1 小时 -->
    <meta http-equiv="Cache-Control" content="max-age=3600">
    <title>缓存优化示例</title>
</head>

<body>
    <p>这是一个有缓存设置的网页。</p>
</body>

</html>

这里设置了网页资源的缓存时间为 3600 秒（即 1 小时），在这个时间内，浏览器再次访问该网页时会优先使用缓存中的资源。

代码压缩

虽然 HTML 代码压缩在 HTML 层面直接体现的不多，但要知道可以通过工具压缩 HTML、CSS 和 JavaScript 代码，去除多余的空格、注释等，减小文件大小。例如使用在线的代码压缩工具，或者在构建项目时使用自动化工具（如 Gulp、Webpack）来完成。

3. 高级特性运用
微数据（Microdata）

微数据可以让网页中的内容更有语义，方便搜索引擎等机器理解。就好像给网页内容贴上了详细的标签，让搜索引擎知道每个部分是什么。

代码示例：

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

<body>
    <!-- 使用微数据标记一个餐厅信息 -->
    <div itemscope itemtype="http://schema.org/Restaurant">
        <h1 itemprop="name">美味餐厅</h1>
        <p>地址: <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="streetAddress">幸福路 123 号</span>,
                <span itemprop="addressLocality">快乐市</span>
            </span></p>
        <p>电话: <span itemprop="telephone">123 - 456 - 7890</span></p>
    </div>
</body>

</html>

在这个例子中，使用微数据标记了一个餐厅的信息，包括餐厅名称、地址和电话，搜索引擎可以更好地理解这些内容并进行展示。

模板标签（<template>）

模板标签可以定义一段 HTML 代码，这段代码不会立即显示，而是可以在需要的时候通过 JavaScript 动态插入到页面中。就像你准备了一个备用的零件，需要的时候拿出来装上。

代码示例：

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

<body>
    <!-- 定义一个模板 -->
    <template id="myTemplate">
        <div>
            <h2>这是模板内容</h2>
            <p>这里可以放一些动态生成的信息。</p>
        </div>
    </template>
    <button onclick="insertTemplate()">插入模板内容</button>
    <div id="target"></div>

    <script>
        function insertTemplate() {
            // 获取模板元素
            const template = document.getElementById('myTemplate');
            // 克隆模板内容
            const clone = template.content.cloneNode(true);
            // 将克隆的内容插入到指定位置
            document.getElementById('target').appendChild(clone);
        }
    </script>
</body>

</html>

在这个例子中，定义了一个模板，当用户点击"插入模板内容"按钮时，通过 JavaScript 克隆模板内容并插入到 id 为 target 的 div 里。

如何在HTML中使用AJAX进行异步通信？

啥是 AJAX 异步通信

在讲怎么用 AJAX 之前，咱先弄明白啥是 AJAX 异步通信。简单来说，在网页里，有时候你想从服务器拿点数据，或者给服务器发点数据，要是用传统的方式，网页可能就得刷新一下。但 AJAX 能让你在不刷新整个网页的情况下和服务器偷偷地交流数据，就像你在后台和别人悄悄说话一样，网页上该干啥还干啥，不会受到影响。这就叫异步通信，能让网页用起来更流畅、更舒服。

实现 AJAX 异步通信的步骤

1. 创建 XMLHttpRequest 对象

XMLHttpRequest 就像是你和服务器交流的"小信使"，你得先把它创建出来，让它能跑腿给你办事。在现代开发中，也常用 fetch API 来替代 XMLHttpRequest，但这里先介绍 XMLHttpRequest 的方式。

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

<body>
    <button onclick="makeRequest()">发送请求</button>
    <div id="result"></div>

    <script>
        function makeRequest() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
        }
    </script>
</body>

</html>

这里创建了一个 XMLHttpRequest 对象，命名为 xhr，之后就用它来和服务器交流。

2. 打开请求

你得告诉这个"小信使"（XMLHttpRequest 对象）要去哪个地方（服务器地址），用什么方式（比如是 GET 还是 POST）去交流。

javascript 复制代码 
// 打开一个 GET 请求，请求的地址是 'data.txt'
xhr.open('GET', 'data.txt', true);

这里 open 方法有三个参数：

  • 第一个参数 'GET' 表示请求的方式，GET 就是从服务器拿数据，还有 POST 是往服务器送数据。
  • 第二个参数 'data.txt' 是你要访问的服务器地址，也就是你要找服务器要的数据在哪里。
  • 第三个参数 true 表示这个请求是异步的，也就是在"小信使"去和服务器交流的时候，网页该干啥干啥，不用等它回来才继续。
3. 监听请求状态变化

"小信使"出去办事了，你得知道它办得咋样了，所以要监听请求的状态变化。

javascript 复制代码 
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应数据
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};

这里 onreadystatechange 是一个事件，当请求的状态发生变化时就会触发。readyState 有几个状态值，4 表示请求已经完成，status 是服务器返回的状态码，200 表示一切正常。当请求完成且状态正常时，就把服务器返回的数据显示在网页上 id 为 result 的 div 里。

4. 发送请求

"小信使"准备好啦，你得让它出发去和服务器交流。

javascript 复制代码 
xhr.send();

如果是 POST 请求，并且要往服务器送数据，send 方法里可以带上要发送的数据，比如 xhr.send('name=张三&age=20');。

完整代码示例
html 复制代码 
<!DOCTYPE html>
<html>

<body>
    <button onclick="makeRequest()">发送请求</button>
    <div id="result"></div>

    <script>
        function makeRequest() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 打开请求
            xhr.open('GET', 'data.txt', true);

            // 监听请求状态变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功，处理响应数据
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };

            // 发送请求
            xhr.send();
        }
    </script>
</body>

</html>

在这个例子里，当你点击"发送请求"按钮时，就会创建一个 XMLHttpRequest 对象，然后向 data.txt 这个地址发送一个 GET 请求，等服务器返回数据后，把数据显示在网页上。

使用 fetch API 实现 AJAX 异步通信

fetch API 是现代 JavaScript 里更方便的和服务器交流的方式，它用起来更简单。

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

<body>
    <button onclick="makeFetchRequest()">发送请求</button>
    <div id="result"></div>

    <script>
        async function makeFetchRequest() {
            try {
                // 发起一个 GET 请求
                const response = await fetch('data.txt');
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                // 将响应数据转换为文本格式
                const data = await response.text();
                document.getElementById('result').innerHTML = data;
            } catch (error) {
                console.error('请求出错:', error);
            }
        }
    </script>
</body>

</html>

这里用 fetch 函数发起一个 GET 请求，await 会等服务器返回响应，然后把响应的数据转换为文本格式，最后显示在网页上。如果请求过程中出了问题，会在控制台输出错误信息。

发送 POST 请求和 GET 请求有什么区别？

1. 数据放哪儿不一样

  • GET 请求 ：
    • 你可以把 GET 请求想象成在一个大喇叭里喊出你要告诉服务器的信息。当你用 GET 请求给服务器传数据时，这些数据会直接加在网页地址（URL）的后面。比如说你在一个购物网站搜索"运动鞋"，用 GET 请求的话，网页地址可能就变成了 http://shop.com/search?keyword=运动鞋。别人一眼就能从地址栏里看到你搜的是"运动鞋"。
  • POST 请求 ：
    • POST 请求就像是把你要告诉服务器的信息写在一个信封里，然后通过快递（请求）发给服务器。数据不会显示在网页地址上，地址栏里还是原来那个干净的网址，别人看不到你具体传了啥数据。比如你在一个论坛发帖子，用 POST 请求提交内容，别人从地址栏可看不出你发了啥帖子。

2. 能传的数据量不同

  • GET 请求 ：
    • GET 请求能传的数据量就像你拿在手里的一个小袋子，装不了太多东西。因为数据是加在网址后面的，而网址的长度是有限制的。不同的浏览器和网站服务器对网址长度的限制不一样，但一般来说都不会太长。要是你想传的数据太多，超过了这个限制，就像小袋子装不下东西了，请求可能就失败了。
  • POST 请求 ：
    • POST 请求就像一辆大卡车，能装的数据量理论上没有上限。因为数据是放在"信封"（请求的消息体）里传的。不过呢，服务器也不会让你无限制地装东西，它可能会规定一个最大的"载货量"，防止有人恶意传特别大的数据来捣乱。

3. 安全性有差别

  • GET 请求 ：
    • GET 请求不太安全，就像你在大街上大声喊出自己的银行卡密码一样。因为数据都显示在网址上，别人很容易就看到了。而且浏览器会记录你访问过的网址，网站服务器也会记录请求信息，要是里面有你的敏感信息，比如密码、身份证号啥的，就很容易被别人获取到，存在很大的风险。
  • POST 请求 ：
    • POST 请求相对安全很多，就像把银行卡密码写在信封里寄出去。数据藏在"信封"里，别人从网址上看不到具体内容。不过这也不是绝对安全的，如果有人在网络传输过程中做手脚，还是有可能获取到数据。所以对于特别敏感的信息，还需要进行加密处理。

4. 使用场景不一样

  • GET 请求 ：
    • GET 请求适合用来获取一些公开的、不需要保密的数据，就像你去图书馆查资料，直接告诉管理员你要查哪本书。比如你在网页上查看新闻列表、搜索商品信息等，用 GET 请求就很合适。因为这些操作只是单纯地从服务器拿数据，而且数据也不敏感。
  • POST 请求 ：
    • POST 请求更适合用来提交数据，特别是需要保密的数据或者会对服务器上的数据进行修改、添加的操作。比如你注册账号、登录网站、提交订单等，这些操作涉及到你的个人信息，而且会改变服务器上的数据，用 POST 请求更安全可靠。

优化网页性能方式

1. 压缩代码

  • HTML 代码压缩：HTML 代码里有很多空格、换行符和注释，这些东西对浏览器显示网页没啥用，就像房子里一些占地方但没实际用途的杂物。可以把它们去掉，让代码变得更紧凑。比如，把原本写得松松垮垮的代码压缩成一行，这样文件就变小了，浏览器下载和解析的速度就会变快。现在有很多在线工具或者代码编辑器的插件可以帮你完成这个工作。
  • CSS 代码压缩：CSS 代码也一样，里面的空格、注释和多余的换行符都可以去掉。而且还能把一些重复的样式合并，减少代码量。比如说，好几个元素都用了相同的颜色和字体大小，就可以把这些样式合并成一个公共的样式，让代码更简洁。
  • JavaScript 代码压缩：JavaScript 代码里也有很多可以精简的地方。像变量名可以缩短，注释可以去掉，一些不必要的空格和换行也能删掉。还可以把一些代码进行混淆，让别人更难看懂代码的逻辑，同时也能进一步减小文件大小。

2. 优化图片

  • 选择合适的图片格式：不同的图片格式就像不同材质的衣服，适合不同的场景。比如 JPEG 格式适合色彩丰富的照片，它可以在保证一定画质的情况下把文件大小压缩得比较小；PNG 格式适合有透明背景或者颜色比较少的图片，它能很好地保留图片的细节和透明度；GIF 格式适合简单的动画图片。所以要根据图片的特点选择合适的格式，这样可以在不影响视觉效果的前提下减小文件大小。
  • 压缩图片大小：可以使用专门的图片压缩工具，把图片文件进一步压缩。这些工具就像一个神奇的"瘦身器"，能在不明显降低图片质量的情况下，让图片变得更小。比如，一张原本 1MB 的图片，经过压缩后可能就只有几百 KB 了，这样网页加载图片的速度就会快很多。
  • 响应式图片 ：现在的设备屏幕大小各不相同，从手机到电脑显示器，尺寸差异很大。响应式图片就是根据不同设备的屏幕大小，给它们提供合适尺寸的图片。就像给不同身材的人准备合适的衣服一样。比如，在手机上看网页，就给它加载小尺寸的图片，这样既能保证图片在手机上能正常显示，又能减少数据传输量，加快加载速度。在 HTML 里可以用 srcset 和 sizes 属性来实现响应式图片。

3. 缓存策略

  • 浏览器缓存 ：浏览器缓存就像一个小仓库，当你第一次访问一个网页时，浏览器会把网页上的一些资源（比如图片、CSS 文件、JavaScript 文件等）存到这个仓库里。当你再次访问这个网页时，浏览器会先看看仓库里有没有这些资源，如果有就直接从仓库里拿出来用，不用再从网上下载了，这样就大大加快了网页的加载速度。可以通过设置 HTTP 头信息来控制浏览器缓存的时间和方式。比如，设置 Cache-Control 和 Expires 等头信息，告诉浏览器这些资源可以在多长时间内直接从缓存里拿。
  • CDN 缓存：CDN（内容分发网络）就像在全国各地建了很多小仓库，把网页的资源复制到这些小仓库里。当用户访问网页时，CDN 会自动选择离用户最近的小仓库，把资源快速地发给用户。这样就减少了数据传输的距离和时间，加快了网页的加载速度。很多大的网站都会使用 CDN 来分发图片、脚本等静态资源。

4. 优化服务器响应

  • 选择合适的服务器：服务器就像网页的"家"，一个好的服务器能让网页住得更舒服，运行得更高效。要选择性能好、稳定性高、带宽充足的服务器。就像给房子选一个好的地段和结实的地基一样。如果服务器性能差，处理请求的速度就会很慢，网页加载也就会很慢。
  • 优化服务器配置：可以对服务器的一些参数进行调整，让它能更好地处理网页请求。比如，调整服务器的缓存策略、优化数据库查询语句等。这些调整就像给房子做一些内部装修，让它的功能更完善，运行更顺畅。
  • 减少 HTTP 请求：每次浏览器向服务器发送一个请求，就像你每次去超市都只买一样东西，来来回回跑很多趟，很浪费时间。可以把一些小的 CSS 文件和 JavaScript 文件合并成一个大文件，把一些小图片合并成一个雪碧图（Sprite）。这样就可以减少浏览器向服务器发送请求的次数，加快网页的加载速度。

5. 优化代码结构

  • 合理组织 HTML 结构：HTML 结构就像房子的框架，要合理规划。把重要的内容放在前面，让浏览器先加载和显示。避免使用嵌套过深的 HTML 标签，这样会让浏览器解析起来更复杂、更慢。就像房子的结构太复杂，工人装修起来就会很费劲。
  • 优化 CSS 加载顺序：CSS 文件的加载顺序也很重要。要先加载关键的 CSS 文件，让网页能尽快显示出基本的样式。可以把一些不影响首屏显示的 CSS 文件放在后面加载，或者使用异步加载的方式。这样就像先把房子的主体框架搭好，再慢慢装修细节部分。
  • 优化 JavaScript 代码执行：JavaScript 代码的执行可能会阻塞网页的渲染，影响用户体验。可以把一些不必要的 JavaScript 代码放在网页底部加载，或者使用异步加载的方式。还可以对 JavaScript 代码进行优化，减少不必要的循环和计算，提高代码的执行效率。就像让房子里的电器运行得更节能、更高效一样。
相关推荐
程序员的世界你不懂2 小时前
playwright Electron 应用程序启动问题处理，依赖处理，本地开发服务器搭建
服务器·前端·测试工具·electron·单元测试·集成测试
Dxy12393102164 小时前
python把html网页转换成pdf标题没有乱码，正文都乱码
python·pdf·html
wuhuhuan5 小时前
Ruby 数组（Array）
服务器·前端·ruby
vvilkim5 小时前
JavaScript 数据类型和数据结构：从基础到实践
开发语言·前端·javascript
bin91537 小时前
DeepSeek 助力 Vue3 开发：打造丝滑的网格布局（Grid Layout）
前端·javascript·vue.js·ecmascript·deepseek
见青..8 小时前
【新手入门】SQL注入之盲注
前端·数据库·sql·web安全
海晨忆8 小时前
CSS—选择器详解：5分钟动手掌握选择器
前端·css·选择器
MZWeiei8 小时前
CSS 中最常用的三种选择器的详细讲解（配合实例）
前端·css·css3
FLGB8 小时前
Jenkins 自动打包项目镜像部署到服务器 ---（前端项目）
前端·docker·jenkins
wkj0018 小时前
vue图表插件ECharts使用指南
前端·javascript·echarts
热门推荐
01DeepSeek各版本说明与优缺点分析02本地部署DeepSeek教程（Mac版本）03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06DeepSeek本地部署详细指南07Anaconda +Jupyter Notebook安装（2025最新版）08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek r1本地安装全指南10保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型