9种可以减小HTML文件大小的方法

157 阅读 0 评论 1 点赞

1. 数据清洗

数据清洗通常是指对从服务器获取的数据进行处理，以减少页面内存占用并提高加载速度。

在服务器渲染网页时，页面会被存储在 Redis 缓存中。小型的 HTML 文件不仅可以减轻存储空间压力，还有助于提升页面加载速度。

如何才能减少 HTML 文件的大小呢？

在服务器渲染时，一些请求接口的数据会被转换成文本并嵌入到 HTML 文件中，而这些数据可能包含很多冗余信息。我们只需要在请求接口后对数据进行清理，保留必要的部分，就可以有效地减小 HTML 文件的大小。

压缩 HTML 代码

使用压缩工具或服务可以去除 HTML 文件中的空格、注释和其他不必要的字符，从而减小文件大小。

如压缩工具：https://www.minifier.org/

使用缩写和简化代码

尽量使用简洁的标记和属性，避免冗余的代码和不必要的标签，以减少 HTML 文件的体积。

合并和压缩 CSS 和 JavaScript 文件

将多个 CSS 和 JavaScript 文件合并为一个文件，并对这些文件进行压缩，可以减小页面加载所需的 HTTP 请求次数，提高加载速度。

使用语义化标记

使用语义化的标记结构，使代码更易读且更具可维护性，同时也可以减少冗余代码。html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。

延迟加载资源

将不是首要加载的资源（如图片、视频等）延迟加载，可以减少页面初始加载时所需的资源量，加快页面呈现速度。

使用图片优化技术

对网页中的图片进行优化，包括压缩图片、选择合适的格式（如 WebP 格式）、使用适当的尺寸和质量，可以减小页面大小。

减少嵌入式内容

减少或避免在 HTML 文件中嵌入大量的外部资源（如嵌入式视频、音频等），可以减小文件大小。

使用 CDN 加速

将静态资源（如图片、CSS、JavaScript 文件）托管到 CDN（内容分发网络）上，可以提高资源加载速度，减轻服务器负担，并间接减小 HTML 文件大小。CDN 在全球各地都有服务器节点，这意味着无论用户身在何处，都可以从最近的 CDN 边缘服务器获取网站的静态资源，从而提高页面加载速度。

扩展:

以下是HTML中常用的语义化标签及其简要说明：

<header>：用于定义页面或区域的头部，通常包含标题、logo、导航等元素。
<nav>：用于定义导航链接部分，包含主导航、侧边栏链接等。
<main>：标识文档的主要内容区域，确保页面主要内容在所有设备和浏览器上都能正确显示。
<article>：用于定义独立的内容块，如博客文章、新闻报道等。
<section>：用于将页面内容划分为不同的部分或区域，便于组织和样式化。
<footer>：用于定义页面或区域的底部，通常包含版权信息、公司标识等。
<h1> - <h6>：用于定义六个不同级别的标题，<h1>表示最高级别标题，<h6>表示最低级别标题。
<p>：用于定义段落。
<figure>：用于表示独立的内容，如图片、图表等，常与<figcaption>一起使用来添加标题。
<div>：用于对页面内容进行分区和样式化，常与CSS一起使用。
<span>：用于对文本或其他元素进行分组，常与CSS一起使用来添加样式。
<aside>：用于定义与页面内容相关但不直接相关的内容，如侧边栏、广告等。
<details>：用于创建可展开和折叠的内容块，常与<summary>一起使用来添加标题。
<summary>：用于定义<details>元素的标题。
<label>：用于定义表单控件的标签，有助于提高表单的可访问性。
<form>：用于创建表单，包含输入控件、提交按钮等。
<input>：用于创建输入控件，如文本框、单选框、复选框等。
<textarea>：用于创建多行文本输入框。
<button>：用于创建按钮。
<select>和<option>：用于创建下拉选择框。
<datalist>：与<input>元素结合使用，提供预定义的选项列表供用户选择。
<progress>和<meter>：分别用于表示进度信息和度量标准。
<section>和<article>/<section>的区别在于<article>表示一个独立的、完整的片段，如博客文章或新闻报道；而<section>则表示页面中的一部分内容或区域。在实际开发中，根据内容的性质和结构选择合适的语义化标签，有助于提高网页的可读性和可访问性。同时，遵循HTML5规范和语义化标签的使用原则，还可以提高SEO效果和用户体验。