1.?數(shù)據(jù)清洗
數(shù)據(jù)清洗通常是指對從服務(wù)器獲取的數(shù)據(jù)進行處理，以減少頁面內(nèi)存占用并提高加載速度。
在服務(wù)器渲染網(wǎng)頁時，頁面會被存儲在 Redis 緩存中。小型的 HTML 文件不僅可以減輕存儲空間壓力，還有助于提升頁面加載速度。
如何才能減少 HTML 文件的大小呢？
在服務(wù)器渲染時，一些請求接口的數(shù)據(jù)會被轉(zhuǎn)換成文本并嵌入到 HTML 文件中，而這些數(shù)據(jù)可能包含很多冗余信息。我們只需要在請求接口后對數(shù)據(jù)進行清理，保留必要的部分，就可以有效地減小 HTML 文件的大小。
壓縮 HTML 代碼
使用壓縮工具或服務(wù)可以去除 HTML 文件中的空格、注釋和其他不必要的字符，從而減小文件大小。
如壓縮工具：https://www.minifier.org/
使用縮寫和簡化代碼
盡量使用簡潔的標記和屬性，避免冗余的代碼和不必要的標簽，以減少 HTML 文件的體積。
合并和壓縮 CSS 和 JavaScript 文件
將多個 CSS 和 JavaScript 文件合并為一個文件，并對這些文件進行壓縮，可以減小頁面加載所需的 HTTP 請求次數(shù)，提高加載速度。
使用語義化標記
使用語義化的標記結(jié)構(gòu)，使代碼更易讀且更具可維護性，同時也可以減少冗余代碼。html 語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析。
延遲加載資源
將不是首要加載的資源（如圖片、視頻等）延遲加載，可以減少頁面初始加載時所需的資源量，加快頁面呈現(xiàn)速度。
使用圖片優(yōu)化技術(shù)
對網(wǎng)頁中的圖片進行優(yōu)化，包括壓縮圖片、選擇合適的格式（如 WebP 格式）、使用適當?shù)某叽绾唾|(zhì)量，可以減小頁面大小。
減少嵌入式內(nèi)容
減少或避免在 HTML 文件中嵌入大量的外部資源（如嵌入式視頻、音頻等），可以減小文件大小。
使用 CDN 加速
將靜態(tài)資源（如圖片、CSS、JavaScript 文件）托管到 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）上，可以提高資源加載速度，減輕服務(wù)器負擔，并間接減小 HTML 文件大小。CDN 在全球各地都有服務(wù)器節(jié)點，這意味著無論用戶身在何處，都可以從最近的 CDN 邊緣服務(wù)器獲取網(wǎng)站的靜態(tài)資源，從而提高頁面加載速度。
擴展:
以下是HTML中常用的語義化標簽及其簡要說明：
<header>：用于定義頁面或區(qū)域的頭部，通常包含標題、logo、導航等元素。<nav>：用于定義導航鏈接部分，包含主導航、側(cè)邊欄鏈接等。<main>：標識文檔的主要內(nèi)容區(qū)域，確保頁面主要內(nèi)容在所有設(shè)備和瀏覽器上都能正確顯示。<article>：用于定義獨立的內(nèi)容塊，如博客文章、新聞報道等。<section>：用于將頁面內(nèi)容劃分為不同的部分或區(qū)域，便于組織和樣式化。<footer>：用于定義頁面或區(qū)域的底部，通常包含版權(quán)信息、公司標識等。<h1>?-?<h6>：用于定義六個不同級別的標題，<h1>表示最高級別標題，<h6>表示最低級別標題。<p>：用于定義段落。<figure>：用于表示獨立的內(nèi)容，如圖片、圖表等，常與<figcaption>一起使用來添加標題。<div>：用于對頁面內(nèi)容進行分區(qū)和樣式化，常與CSS一起使用。<span>：用于對文本或其他元素進行分組，常與CSS一起使用來添加樣式。<aside>：用于定義與頁面內(nèi)容相關(guān)但不直接相關(guān)的內(nèi)容，如側(cè)邊欄、廣告等。<details>：用于創(chuàng)建可展開和折疊的內(nèi)容塊，常與<summary>一起使用來添加標題。<summary>：用于定義<details>元素的標題。<label>：用于定義表單控件的標簽，有助于提高表單的可訪問性。<form>：用于創(chuàng)建表單，包含輸入控件、提交按鈕等。<input>：用于創(chuàng)建輸入控件，如文本框、單選框、復選框等。<textarea>：用于創(chuàng)建多行文本輸入框。<button>：用于創(chuàng)建按鈕。<select>和<option>：用于創(chuàng)建下拉選擇框。<datalist>：與<input>元素結(jié)合使用，提供預定義的選項列表供用戶選擇。<progress>和<meter>：分別用于表示進度信息和度量標準。<section>和<article>/<section>的區(qū)別在于<article>表示一個獨立的、完整的片段，如博客文章或新聞報道；而<section>則表示頁面中的一部分內(nèi)容或區(qū)域。在實際開發(fā)中，根據(jù)內(nèi)容的性質(zhì)和結(jié)構(gòu)選擇合適的語義化標簽，有助于提高網(wǎng)頁的可讀性和可訪問性。同時，遵循HTML5規(guī)范和語義化標簽的使用原則，還可以提高SEO效果和用戶體驗。
文章為作者獨立觀點，不代表DLZ123立場。如有侵權(quán),請聯(lián)系我們。( 版權(quán)為作者所有，如需轉(zhuǎn)載，請聯(lián)系作者 )
網(wǎng)站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優(yōu)質(zhì)的學習資料。
現(xiàn)在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
