整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開發這個網站時，前端會不斷進行調試，其中有一點CSS技術還是不錯的，分享給大家：如圖
看上圖，在灰色字體中，這個字是擁有兩百個字，已經是三行的內容，但全顯示簡要不太好看，因此選擇用一行顯示，然后用省略號結尾。代碼如下：
們經常在檢測網站加載速度的過程中，遇到了以下問題：從樣式表中刪除無效規則，并延遲不用于首屏內容的CSS加載，以減少網絡活動消耗的不必要字節。
盡管看起來CSS文件的大小只有幾KB甚至沒有1 MB，但不要僅僅因為文件大小而感到困惑。所有這些事情加起來可能會使您的網站變慢，因此建議從樣式表中刪除未使用的CSS和無效規則，使樣式表文件更精簡，最小化并完善它，以便在速度較慢的連接上更快地加載。速度更快的網站更有可能獲得更高的排名，因此，您應該非常非常認真地考慮網站的加載時間。
未使用的CSS或“無效規則”不過是未在您的網頁上使用的CSS代碼。如果刪除此代碼，它將使CSS文件更精簡，更輕便，并在某種程度上幫助縮短頁面的加載時間。
讓我們舉一個例子來理解這一點。
假設您的樣式表中包含以下CSS代碼
.red_highlight_box {
padding: 10px;
background-color: black;
color: white;
cursor: pointer;
max-width: 85%;
margin: 0 auto;
border-bottom: 2px solid white;
//border-radius: 10px;
font-family: 'Secular One', Arial, Helvetica, sans-serif;
}上面的代碼用于類名“ red_highlight_box”。您可能不會在網站的主題中使用此類，并且網站上任何現有的頁面也不會使用該類。
在這種情況下，上面的代碼是未使用的CSS或無效規則或“膨脹代碼”。它什么也沒做，只是減慢了網站速度，您絕對應該考慮一勞永逸地將其從樣式表文件中刪除。
注釋掉未使用的CSS與完全刪除它是不同的。當您注釋掉未使用的CSS代碼時，該代碼仍然存在，并增加了文件大小。未使用的css清理的目標是減小CSS文件的文件大小，以便更快地加載，呈現在用戶瀏覽器中。因此，不建議注釋掉不必要的CSS代碼，您應該從CSS文件中永久刪除多余的代碼。
想象一下，如果您從網站的每個頁面調用了5個樣式表，并且這些樣式表中的每一個都充滿了無效規則和代碼，而這些規則和代碼根本沒有在您網站的HTML中使用。如果您使用廉價的模板網站，這是很正常的，因為CSS包含主題“可能”需要的所有內容。HTML模板的開發人員已經考慮了所有可能性，小部件，部分，字體，樣式，背景色，因此編寫了滿足所有可能性的代碼。
但實際上，您不會使用所有可能性。實踐表明，在CSS文件中使用的所有可能性中，您將使用的可能性不到30％，因此，樣式表中會有很多未使用的CSS規則，這將不必要地增加網站頁面的加載時間。
有許多工具可用于合并CSS文件，最小化它們或從樣式表中刪除無效規則。但我強烈建議您使用Unused-Css.Com。實際上，它是我們刪除多余CSS代碼的唯一工具，而且至今還沒有任何差錯。我們已經在多個網站上對其進行了測試，并且得到的輸出CSS文件從未出錯過。
我們也嘗試過Purify CSS，但是對于包含許多CSS代碼的較大站點，輸出的CSS文件是不正確的。一些CSS代碼會從輸出文件中刪除，這些代碼正在其他頁面上使用。
進行此過程的最佳方法是不要從網站的樣式表文件中手動刪除未使用的CSS。因為，當您手動進行操作時，總是存在人為錯誤的可能性。手動檢查每個類并查找在哪個頁面或場景中使用它們也是非常費力。因此，我們就不要考慮手動刪除多余的CSS代碼了。
您需要一個在線工具，該工具將對整個網站進行爬網，考慮所有頁面并僅提取每個頁面中使用的CSS。一旦在整個站點的每個頁面上提取了可用的CSS，它將對其進行組合，并為您提供最終的輸出文件，即干凈的CSS-避免腫的代碼或無效規則。
這是您的操作方式。
當然，您不必使用付費工具即可完成此操作。您可以使用Chrome開發人員工具并手動完成操作，也可以推遲未使用的CSS。
是的，如果您使用免費的模板，則必須一次又一次地執行此操作。這是因為當您的主題收到新的更新時，它將覆蓋您的style.css文件中的代碼。
這樣，當主題有新更新時，它將不會覆蓋沒有膨脹代碼的優化CSS文件。
我們的建議是不要使用免費的模板。推薦您使用定制網站，這樣您就知道所有內容如何適合以及從哪個部分調用了哪些文件。
實現 HTML 壓縮，可以使用 JavaScript 中的正則表達式來去除 HTML 中的空格和注釋。以下是一個簡單的 HTML 壓縮函數：
function compressHTML(html) {
// 去除注釋
html = html.replace(/<!--[\s\S]*?-->/g, "");
// 去除多余空白
html = html.replace(/\s+/g, " ");
// 去除標簽之間空格
html = html.replace(/>\s+</g, "><");
return html.trim();
}該函數首先使用正則表達式去除 HTML 中的注釋。然后，它使用另一個正則表達式去除 HTML 中的多余空格。最后，它使用另一個正則表達式去除標簽之間的空格。
為了測試該函數，您可以創建一個 HTML 文件，并在其中添加一些冗余的空格和注釋。例如：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- This is a comment -->
<h1> Welcome to my website! </h1>
<p> This is some text. </p>
</body>
</html>然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：
// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);輸出是一個壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。
或者直接在IE中測試，代碼如下：
function compressHTML(html) {
// 去除注釋
html = html.replace(/<!--[\s\S]*?-->/g, "");
// 去除多余空白
html = html.replace(/\s+/g, " ");
// 去除標簽之間空格
html = html.replace(/>\s+</g, "><");
return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- This is a comment -->
<h1> Welcome to my website! </h1>
<p> This is some text. </p>
</body>
</html>
`;
console.log(compressHTML(html));運行效果：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
