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 打造的免费开源加载动画，丝滑流畅高性能！｜那些免费的砖