Những nhà phát triển plugin, theme thân mến, bạn không cần dùng jQuery đâu!

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

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ể không sử dụng đến 10% trong số đó.

thời gian thực thi jQuery thường là vấn đề lớn với nhiều website

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 (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:

thời gian thực thi jQuery
jQuery
thời gian thực thi Vannilla JavaScript
Vannilla JavaScript

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

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):

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 khá khó cho WordPress vì 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 khác biệt.

Một số có thể được thực hiện bằng CSS thuần túy:

(Dịch từ bài viết Dear WordPress Plugin/Theme Devs, You Don’t Need jQuery!, tác giả: Gijo Varghese)

Leave a Comment