VanillaJS是一个极轻量级的JavaScript库，用来简化JavaScript开发，它只有大约6KB（压缩后），不需要任何依赖和插件。Vanilla的核心思想是希望让开发者可以使用JavaScript最原始和基本的方法来进行开发，而不是依赖于某个特定的框架或库。
所谓Vanilla，"vanilla" 这个词是指原味，没有添加其他成分的香草。VanillaJS的目标是实现有用的、轻量级的JavaScript工具，不需要添加任何额外的开销或复杂性。这意味着它是非常小、非常快、非常易于使用的。
VanillaJS可以被视为jQuery的替代品。VanillaJS和jQuery都是用来帮助开发人员在Web上快速创建互动性的JavaScript库。但是，VanillaJS提供了一些jQuery不支持的功能，并且VanillaJS并不提供对老版浏览器的支持。如果您需要在老版浏览器上操作Dom对象，您还需要自己编写兼容性代
vanillaJS目前在国外备受推崇，Bootstrap5舍弃了Jquery，选择了它作为基础框架，有哪些知名企业使用了它呢:
字节跳动
百度
阿里巴巴
美团
谷歌
facebook
github
腾讯
以上只列出了一些耳熟能详的企业，事实上他的应用范围远超你的想象
使用方法
vanillaJS是世界上最轻量的框架，没有之一！使用vanillaJS的部署策略，能够让在用户访问访问你的网站之前就就从内存中读取vanillaJS的资源。 引入方式只需要在html中加入这行script
<script src="path/to/vanilla.js"></script>
当部署在正式环境中，直接把html中的这段引用替换成以下内容
模块化
VanillaJS包括如下模块，下载安装时可以只选择需要的模块，以便提高性能。
核心功能
DOM(遍历/选择器)
基于原型的对象系统
AJAX
动画
事件系统
正则表达式
函数作为第一类对象
闭包
数学库
数组库
字符串库
是的你没看错，没有任何代码。因为vanillaJS的广受欢迎，所有的浏览器都已经内置这个框架了！
性能对比
这里有一些对比关于vanillaJS性能指标
看看Vanilla JS到底有多快：
根据ID获取DOM元素
| 框架 | 代码 | 次数/秒 |
|---|---|---|
| Vanilla JS | document.getElementById('test-table'); |
12,137,211 |
| Dojo | dojo.byId('test-table'); |
5,443,343 |
| Prototype JS | $('test-table') |
2,940,734 |
| Ext JS | delete Ext.elCache['test-table']; Ext.get('test-table'); |
997,562 |
| jQuery | $jq('#test-table'); |
350,557 |
| YUI | YAHOO.util.Dom.get('test-table'); |
326,534 |
| MooTools | document.id('test-table'); |
78,802 |
根据标签名获取DOM元素
| 框架 | 代码 | 次数/秒 |
|---|---|---|
| Vanilla JS | document.getElementsByTagName("span"); |
8,280,893 |
| Prototype JS | Prototype.Selector.select('span', document); |
62,872 |
| YUI | YAHOO.util.Dom.getElementsBy(function(){return true;},'span'); |
48,545 |
| Ext JS | Ext.query('span'); |
46,915 |
| jQuery | $jq('span'); |
19,449 |
| Dojo | dojo.query('span'); |
10,335 |
| MooTools | Slick.search(document, 'span', new Elements); |
5,457 |
代码示例
下面是一些常见任务的例子，可以看下Vanilla JS和jQuery的区别：
淡出元素
Vanilla JS
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>
AJAX请求
Vanilla JS
var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
alert("Success: " + r.responseText);
};
r.send("banana=yellow");
Vanilla JS 是世界上最轻量的JavaScript框架（没有之一）”这句话读三遍。如果还是不信的话，再把下面这句话读三遍：“无论过去、现在还是未来，Vanilla JS 都是世界上最轻量的JavaScript框架（没有之一）！”
