9種可以減小HTML文件大小的方法

927 閱讀 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效果和用戶體驗。