avaScript奇淫技巧：清理無效的垃圾代碼

在編程過程中，難免會產生一些無效的、冗長的長碼。

很常見的是：定義了某些變量，但未使用，或者是曾使用過，但在修改代碼后不再使用。那么，它就成了無用的垃圾代碼，而它占用著代碼空間，使代碼龐大、影響代碼閱讀。

在較大的工程中，往往有不少這種代碼。

本文，演示一種方法，自動化地去除無效的變量。

例程：

添加圖片注釋，不超過 140 字（可選）

以上代碼中，變量b是無用的。

通過編程，實現去除，完整代碼如下：

?

添加圖片注釋，不超過 140 字（可選）

其原理是：將代碼轉化為AST（抽象語法樹），從語法樹中遍歷變量定義，然后檢測變量是否被引用或修改，如果變量既未引用、也未被修改過。則刪除該變量。最后，再把AST重新生成為JS代碼。

這段代碼在NodeJS環境中使用，運行效果：

?

添加圖片注釋，不超過 140 字（可選）

從運行效果可以看到，刪除了未使用的變量b，并重新生成了代碼。

這個操作，可以精簡、優化JS代碼。

與這波操作相反的，有時，為了保護JS代碼，防止代碼被分析、復制、盜用；防止他人理解代碼；或因小游戲過審等需要，而對JS代碼進行混淆加密。

在JS代碼混淆加密時，經常會有“僵尸代碼植入操作”，會插入一些無用的變量和函數等，比如JShaman就具有這項功能。下面，再測試一下，用JShaman插入的JS代碼，是否能用這種方式去除。

例程如下：

?

添加圖片注釋，不超過 140 字（可選）

在配置中，只選擇“僵尸代碼植入”。JShaman有很多JS加密選項，本文只測試是否能去除插入的JS代碼，所以，只啟用這一項：

?

添加圖片注釋，不超過 140 字（可選）

用JShaman混淆加密后，得到代碼：

?

添加圖片注釋，不超過 140 字（可選）

代碼中的紅色標識處，都是隨機插入的僵尸代碼。

把這段代碼，放到剛剛的程序中，并運行：

?

添加圖片注釋，不超過 140 字（可選）

從運行結果看，并未能去除被JShaman插入的僵尸代碼，原因是因為僵尸變量也有引用和修改。

本文僅演示了無效變量的去除，同理，還可以用類似的方法去除無效的函數。

最后，附上本文使用的代碼：

//自動去除無效變量

//Auther： JShaman.com w2sft

var parser=require("@babel/parser");

var traverse=require("@babel/traverse").default;

var generator=require("@babel/generator").default;

var jscode=`

function get_copyright() {

var _0x4d=1 + 5;

var domain="jshaman.com";

_0x4d="apib";

var _0x05f;

var from_year=2017;

_0x05f=9;

var _0x;

var copyright="(c)" + from_year + "-" + new Date().getFullYear() + "," + domain;

_0x=8 + 2;

return copyright;

}

console.log(get_copyright());

`;

var ast=parser.parse(jscode);

var visitor={

VariableDeclarator(path){

var binding=path.scope.getBinding(path.node.id.name);

//變量被修改過

if (!binding || binding.constantViolations.length > 0) {

return;

}

//變量沒有被使用過

if (binding.referencePaths.length==0) {

console.log(" 已刪除變量：",path.node.id.name);

console.log();

們經常在檢測網站加載速度的過程中，遇到了以下問題：從樣式表中刪除無效規則，并延遲不用于首屏內容的CSS加載，以減少網絡活動消耗的不必要字節。

盡管看起來CSS文件的大小只有幾KB甚至沒有1 MB，但不要僅僅因為文件大小而感到困惑。所有這些事情加起來可能會使您的網站變慢，因此建議從樣式表中刪除未使用的CSS和無效規則，使樣式表文件更精簡，最小化并完善它，以便在速度較慢的連接上更快地加載。速度更快的網站更有可能獲得更高的排名，因此，您應該非常非常認真地考慮網站的加載時間。

什么是未使用的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規則，這將不必要地增加網站頁面的加載時間。

使用Unused-CSS.Com從StyleSheets中刪除未使用的CSS

有許多工具可用于合并CSS文件，最小化它們或從樣式表中刪除無效規則。但我強烈建議您使用Unused-Css.Com。實際上，它是我們刪除多余CSS代碼的唯一工具，而且至今還沒有任何差錯。我們已經在多個網站上對其進行了測試，并且得到的輸出CSS文件從未出錯過。

我們也嘗試過Purify CSS，但是對于包含許多CSS代碼的較大站點，輸出的CSS文件是不正確的。一些CSS代碼會從輸出文件中刪除，這些代碼正在其他頁面上使用。

進行此過程的最佳方法是不要從網站的樣式表文件中手動刪除未使用的CSS。因為，當您手動進行操作時，總是存在人為錯誤的可能性。手動檢查每個類并查找在哪個頁面或場景中使用它們也是非常費力。因此，我們就不要考慮手動刪除多余的CSS代碼了。

您需要一個在線工具，該工具將對整個網站進行爬網，考慮所有頁面并僅提取每個頁面中使用的CSS。一旦在整個站點的每個頁面上提取了可用的CSS，它將對其進行組合，并為您提供最終的輸出文件，即干凈的CSS-避免腫的代碼或無效規則。

這是您的操作方式。

1. 在Unused-css.com上注冊一個免費帳戶。這項免費計劃可讓您僅清潔一個網站（最多100頁）的CSS。
2. 添加您的網站并設置掃描。他們的抓取工具將抓取您的整個網站和所有頁面，因此請確保您的robots.txt或其他腳本不會以任何方式阻止抓取工具。
3. 當他們的抓取工具完成對所有網站的抓取并優化了整個網站中使用的所有CSS文件后，您很快就會收到一封電子郵件。不用擔心，所有這些文件都不會合并在一起，您可以根據自己的需要有選擇地下載每個優化的CSS文件，然后決定將其與另一個文件合并。
4. 登錄到您的未使用CSS帳戶，選擇項目，您將在左側欄中看到所有CSS文件。首先，在左側邊欄中，選擇網站主題或HTML模板正在使用的CSS文件（該文件應位于左側邊欄底部的下方）。接下來，單擊“下載CSS”，您將獲得縮小的CSS文件，其中沒有腫的代碼或未使用的代碼。
5. 將此新的CSS文件上傳到您網站的主題目錄中。請勿刪除原始CSS文件，而是上傳此新CSS文件，然后從您的網站頭部調用新的優化CSS文件。完成后，轉到Google頁面速度分析，然后再次運行診斷。在您的網站上使用隨機頁面，因為Unused-CSS.com掃描了整個網站并將所有正在使用的CSS類合并到一個文件中，所以完全沒問題。您應該會看到警告– 刪除未使用的CSS并從樣式表中刪除無效規則，這些內容不再顯示在Google頁面速度分析的“機會”部分下。

當然，您不必使用付費工具即可完成此操作。您可以使用Chrome開發人員工具并手動完成操作，也可以推遲未使用的CSS。

如果我的網站的主題更新怎么辦？我是否必須再次刪除未使用的CSS？

是的，如果您使用免費的模板，則必須一次又一次地執行此操作。這是因為當您的主題收到新的更新時，它將覆蓋您的style.css文件中的代碼。

這樣，當主題有新更新時，它將不會覆蓋沒有膨脹代碼的優化CSS文件。

我們的建議是不要使用免費的模板。推薦您使用定制網站，這樣您就知道所有內容如何適合以及從哪個部分調用了哪些文件。

個 CSS3 loading 動畫庫，簡單易用，動畫流暢，無論是學習還是使用，都很不錯。

關于 Loaders.css

Loaders.css 是一個性能出色的 web 前端代碼庫，或者叫 CSS 庫，因為它完全沒有用到一行 js 代碼或者圖片，僅僅利用純 CSS 就實現多種樣式的 loading 動畫，運行流暢絲滑，輕量小巧，性能優秀。

Loaders.css 技術特性

• 純 CSS 實現，沒有多余的代碼，唯一的依賴就是瀏覽器，非常輕量
• 性能出眾，相比于用 javascript 計算繪圖和布局來實現 loading，Loaders.css 使用的是 CSS3 的動畫屬性和 transform 變形，能極大地利用電腦或手機的圖形硬件性能，所以極為流暢
• 提供將近 30 個不同樣式的 loading 動畫，復制粘貼拿來就可以用

多年使用體驗和感受

loading 動畫是前端開發收到的頻次很高的需求，特別是前后端分離的開發模式，數據都是異步加載的。以前做 loading 都是一張 菊花.gif 走天下， 但現在產品開發要求變高，咱們的追求也變高了，特別是移動端，顯示加載動畫前還得加載一個動圖，這早就 out 了。

直到發現了 Loaders.css，為這些年來上千次的 loading 實現節省了大量的時間和精力。雖然官方支持 npm 安裝和 jQuery 的方式引入，但我更建議面對要求不高的場景，直接復制對應的動畫樣式即可，不需要引入 CSS，這是極致的按需取用。

面對外觀要求的加載場景，我們可以修改 CSS 屬性來達到精準定制的要求來符合產品的調性，無論是移動端還是 pc 端都非常好用，而且也是一個很好的 CSS3 動畫學習研究對象。

得益于 Loaders.css 毫無依賴\高性能\輕量化\免費開源的特點，開發者們又陸續根據 Loaders.css 構建了用于其他技術平臺甚至是 iOS \ android 原生的動畫庫：

• React 版本：react-loaders
• Vue 版本：vue-loaders
• Angular 版本：Masadow
• ember 版本：ember-cli-loaders
• iOS 版本：DGActivityIndicatorView
• Android 版本：Loaders.CSS-Android-App

免費開源說明

Loaders.css 是一個免費開源的前端 CSS 動畫庫，基于 MIT 開源協議托管在 Github 上，任何人和商業機構都可以免費下載使用。

Loaders.css 官網在國內訪問不太穩定，經常有打不開的情況，大家也可以直接訪問 Loaders.css 的 Github 主頁獲取源碼。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Loaders.css - 純 CSS 打造的免費開源加載動畫，絲滑流暢高性能！｜那些免費的磚