你不需要 jQuery

2025-06-09

你不需要 jQuery

有没有想过为什么 jQuery？它是世界上使用最广泛的 Javascript 库，同时也是受到批评最多的库。

嗯，jQuery 有很多优点，比如它易于使用，它可以用几行代码来操作网页，并且兼容跨浏览器，所以我们为什么不使用它呢？唯一的问题是它会对网络性能产生很大的影响。

即使一秒钟的延迟也会对您的网站造成严重影响，研究表明，网站加载时间延迟一秒钟就会导致转化率损失 7%，对于亚马逊来说，一秒钟的延迟每年将导致 16 亿美元的损失。

jQuery 为何很慢？

首先，为了使用 jQuery，您需要添加一个外部 javascript 文件，例如 jquery.min.js，该文件的大小为 30 kb（经过 gzip 压缩），这将导致 7 毫秒的延迟，这看起来并不多，但它会累积起来，因为您必须将其添加到 javascript 代码之前，并且大多数人将其添加到标头中，因此即使 7 毫秒的延迟也很多，如果您使用的是移动连接或网速较慢，那么延迟会急剧增加。

现在当然如果你已经添加了 google 的 jQuery url 比如https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js那么它可能会被浏览器缓存，因为很多网站使用相同的 url 并且加载速度会更快，但它仍然是一个外部调用，而且对你自己的网站以外的域名调用也会增加一点延迟。

除了外部文件引起的延迟之外，jQuery 比纯 javscript 慢得多，例如，当将节点附加到 DOM 时，只需要调用一次 Vanilla javscript，它直接与 DOM API 交互，而 jQuery 运行大量操作来操作 DOM，
这很重要，没有人喜欢使用速度慢的网站，我的意思是用户可以在某个时候接受初始延迟，但他们在与网站交互时不会容忍延迟。

结论

那么我们应该怎么做呢？我们应该从每个项目中删除 jQuery 吗？用纯 javascript 替换 jQuery 并不是那么容易。

我们可以避免使用它，或者用一些轻量级的 jQuery 替代品（如Cash或Zepto.js）来代替它，或者用纯 javascript 完全代替 jQuery，因为它们受到所有现代浏览器（IE9+）的支持，并且比 jQuery 更快。

如果您想用纯 JavaScript 替换 jQuery，下面是一些纯 JavaScript 中 jQuery 的重要替代代码。

JavaScript GET 请求

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error
  }
};
request.onerror = function() {
  // There was a connection error of some sort
};
request.send();
Enter fullscreen mode Exit fullscreen mode

JavaScript POST

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
Enter fullscreen mode Exit fullscreen mode

JavaScript JSONP 请求跨域调用

function onFetchComplete(data) {console.log(data);}

var script = document.createElement('script');

script.src = 'https://en.wikipedia.org/w/api.php?action=query&generator=random'+
'&grnnamespace=0&prop=extracts'+
'&exchars=500&format=json&callback=onFetchComplete';

document.body.appendChild(script);
Enter fullscreen mode Exit fullscreen mode

JavaScript 隐藏和显示

el.style.display = 'none';//HIDE
el.style.display = '';//SHOW
Enter fullscreen mode Exit fullscreen mode

JavaScript 查找

el.querySelectorAll(selector);
Enter fullscreen mode Exit fullscreen mode

JavaScript 之后

el.insertAdjacentHTML('afterend', htmlString);
Enter fullscreen mode Exit fullscreen mode

JavaScript 之前

el.insertAdjacentHTML('beforebegin', htmlString);
Enter fullscreen mode Exit fullscreen mode

JavaScript 附加

parent.appendChild(el);
Enter fullscreen mode Exit fullscreen mode

JavaScript 前置

parent.insertBefore(el, parent.firstChild);
Enter fullscreen mode Exit fullscreen mode

JavaScript 删除

el.parentNode.removeChild(el);
Enter fullscreen mode Exit fullscreen mode

JavaScript 获取 HTML

el.innerHTML
Enter fullscreen mode Exit fullscreen mode

JavaScript 获取文本

el.textContent
Enter fullscreen mode Exit fullscreen mode

JavaScript 获取属性

el.getAttribute('attributeName');
Enter fullscreen mode Exit fullscreen mode

JavaScript 获取样式

window.getComputedStyle(el, null).getPropertyValue("background-color");
Enter fullscreen mode Exit fullscreen mode

JavaScript 获取外部 HTML

el.outerHTML
Enter fullscreen mode Exit fullscreen mode

JavaScript 添加类

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
Enter fullscreen mode Exit fullscreen mode

JavaScript 删除类

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace
(new RegExp('(^|\\b)' + className.split(' ').join('|') 
+ '(\\b|$)', 'gi'), ' ');
Enter fullscreen mode Exit fullscreen mode

JavaScript 设置 HTML

el.innerHTML = string;
Enter fullscreen mode Exit fullscreen mode

JavaScript 设置文本

el.textContent = string;
Enter fullscreen mode Exit fullscreen mode

JavaScript 设置属性

el.setAttribute('attributeName','attributeValue');
Enter fullscreen mode Exit fullscreen mode

JavaScript 设置样式

// Use a class if possible
el.style.borderWidth = '20px';
Enter fullscreen mode Exit fullscreen mode

参考

http://youmightnotneedjquery.com/
https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3

鏂囩珷鏉ユ簮锛�https://dev.to/kdinnypaul/you-don-t-need-jquery-1a18
Devto 翻译
PREV
您不需要个人网站（以及我为什么不再拥有个人网站）前言：您需要个人网站吗？1）它会浪费大量时间 2）它会浪费比它应得的更多的时间 3）其他平台可以更好地满足个人网站的需求什么应该取代您的个人网站？
NEXT
虚拟机 101