Hồi năm 2013 khi tôi bắt đầu viết mã JavaScript, tôi đã nghĩ là jQuery thực sự là “JavaScript” và jQuery nên được đưa vào mọi trang web để thực thi đoạn mã JS của tôi.
Nhưng vì sao lại thế? Bởi vì mọi đoạn code tôi copy từ StackOverflow chỉ hoạt động sau khi importing jQuery vào!
Vấn đề với jQuery là gì?
jQuery nặng khoảng 90KB, khi được nén chỉ còn tầm 32KB.
Lượng đó rất nhỏ. Một CDN chất lượng tốt có thể phân phối nó trong vòng chưa đến 50ms!
Nhưng vấn đề lại không phải là kích cỡ. jQuery có khoảng 10 ngàn dòng mã. Bạn có thể sử dụng chưa đến 10% trong số đó (hơi giống chuyện tủ quần áo của bạn có 30 bộ, nhưng chắc bạn chỉ thường dùng 5 – 6 bộ mà thôi).
Từng dòng phải phân tích cú pháp (parsed) và đánh giá bởi trình duyệt đều gây tốn kém tài nguyên. Quá trình xử lý này ảnh hưởng đến thời gian kết xuất hiển thị website (render time), đặc biệt là trên di động.
Để thấy sự khác biệt trong thực tế thế nào, đây là cùng chức năng được viết bằng jQuery và Vannila JavaScript:
jQuery:
<body>
<div id="hello-div"></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// jQuery
const div = $("#hello-div");
for (let i = 0; i < 10000; i += 1) {
div.append("<p>Hello world</p>");
}
</script>
</body>Vanilla JavaScript:
<body>
<div id="hello-div"></div>
<script>
// Pure JavaScript
const div = document.getElementById("hello-div");
for (let i = 0; i < 10000; i += 1) {
const p = document.createElement("p");
p.textContent = "Hello world";
div.appendChild(p);
}
</script>
</body>Dưới đây là sự khác biệt về mặt hiệu suất:
Trong khi jQuery thực thi hết 2,4s, vannila JvaScript chỉ hết có 0,8s. Điều đó cho thấy vanilla JavaScript nhanh hơn gần 4 lần so với jQuery.
Tại sao bạn không cần jQuery nữa?
Vài năm trước đây việc viết các hàm tiêu chuẩn trong vanilla JavaScript thật mệt mỏi trong khi jQuery làm việc đó dễ hơn nhiều.
Nhưng trình duyệt tiến hóa rất nhanh. Phần lớn các hàm bạn viết bằng jQuery thì nay có thể viết bằng JavaScript.
Dưới đây là một vài ví dụ:
1. Ajax Requests
Tìm nạp dữ liệu từ một URL:
jQuery:
$.ajax({
url: '/api.json',
type: 'GET'
success: (data) => {
console.log(data)
}
})Vanilla JavaScript:
fetch('/api.json')
.then(response => response.text())
.then(body => console.log(body))2. Tìm các phần tử & Thao tác
Tìm một số phần tử từ DOM (HTML) và đổi màu sắc của nó:
jQuery:
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css("color", "red");
</script>Vanilla JavaScript:
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
document
.querySelectorAll("p > span")
.forEach((elem) => (elem.style.color = "red"));
</script>3. Hiện/Ẩn các phần tử
Một ứng dụng phổ biến của jQuery, hiện/ẩn một số thứ thông qua click:
jQuery:
<button id="button">
Hide me
</button>
<script>
$("#button").click(function () {
$("#button").hide();
});
</script>Vanilla JavaScript:
<button id="button">
Hide me
</button>
<script>
document.getElementById("button").addEventListener("click", function () {
document.getElementById("button").style.display = "none";
});
</script>4. Hoạt ảnh / Animate
jQuery:
<button id="button" class="animate">
Hide me
</button>
<script>
$("#button").click(function () {
$("#button").hide("slow");
});
</script>Vanilla JavaScript:
<style>
.animate {
opacity: 0;
transition: opacity 0.5s ease;
}
</style>
<button id="button">
Hide me
</button>
<script>
document.getElementById("button").addEventListener("click", function () {
document.getElementById("button").classList.add("animate");
});
</script>Bạn có thể tìm thấy rất nhiều ví dụ tương tự trong các bài viết sau (tiếng Anh):
- Bạn có thể không cần jQuery nữa;
- Bạn có nên học cách dùng jQuery trong năm 2020;
- Cách chuyển từ jQuery sang JavaScript.
Thế còn trình duyệt hỗ trợ thì sao?
Đa số các hàm tôi sử dụng ở trên được hỗ trợ rộng rãi trong tất cả các trình duyệt lớn.
Tôi thường chỉ thấy Internet Explorer và Opera Mini là hai trình duyệt không hỗ trợ một số hàm.
Nếu bạn vẫn muốn hỗ trợ cho các trình duyệt cũ hơn, bạn có thể detect (nhận biết) trình duyệt và thêm dự phòng (polyfills). Dưới đây là một số polyfills cho các hàm phổ biến:
Các trình duyệt hỗ trợ querySelector:
Các trình duyệt hỗ trợ fetch:
Mọi người đều đã rời đi, ngoại trừ WordPress
Nhờ vào sự tiến bộ của các công cụ front-end và trình duyệt hỗ trợ, chúng tôi giờ không còn dùng jQuery nữa, nhưng bạn sẽ không nhận thấy sự khác biệt nào.
Bootsrap 5 – bài đăng
GitHub.com cũng loại bỏ jQuery vào năm 2018 – Loại bỏ jQuery từ frontend của GitHub.com.
Trong khi tất cả mọi người dần bỏ jQuery, điều tương tự khá khó cho WordPress vì họ có số lượng lớn các theme và plugin.
WordPress nên phản đối việc sử dụng JQuery và dần dần chuyển sang dùng vanilla JavaScript.
Bạn thậm chí có thể không cần cả JavaScript nữa
Như tôi nói ở phần trên, web và JavaScript tiến hóa rất nhanh. CSS cũng vậy.
Nhiều hàm mà trước chỉ JavaScript làm được nay có thể thực hiện bằng CSS. Điều này đem đến sự cải thiện hiệu suất đáng kể.
Một số có thể được thực hiện bằng CSS thuần túy:
- Image Slider – CSS Slider Builder, CSS Gallery, Pure CSS Slider;
- Modal – Pure CSS Modal;
- Form validation – HTML form validation;
- Scroll Indicator – CSS only scroll indicator;
- Accordion – 4 Ways to Create Awesome CSS-Only Accordions;
- Lightbox – Pure CSS Lightbox, CSS only Lightbox;
- Tabs – CSS-Only Tabs, Material Design CSS Only Tabs;
- Scroll to top – Pure CSS Smooth-Scroll “Back to Top”;
- Smooth Scroll to links – CSS Smooth Scroll Demo;
- Sticky navbar – Pure CSS Sticky Header.
PS từ Kiến càng: thông thường các plugin cache sẽ mặc định không defer jQuery vì có thể theme và đặc biệt là plugin nào đấy cần dùng nó trong quá trình tải trang. Nếu bạn nhận thấy việc defer jQuery không ảnh hưởng đến chức năng, giao diện trang, tôi khuyến khích bạn defer nó để cải thiện tốc độ website. Một cách tinh quái khác là nếu chỉ một vài trang cần jQuery còn đa số không dùng, bạn có thể dùng plugin Perfmatters hoặc Gonzales để loại bỏ JS dư thừa.
(Dịch từ bài viết Dear WordPress Plugin/Theme Devs, You Don’t Need jQuery!, tác giả: Gijo Varghese)
