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

htmlHTML__0">大白话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）去交流。

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

这里 open 方法有三个参数：

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

3. 监听请求状态变化

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

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. 发送请求

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

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 代码进行优化，减少不必要的循环和计算，提高代码的执行效率。就像让房子里的电器运行得更节能、更高效一样。