Cuộc đại phẫu JavaScript trên XenForo 2.3: Tạm biệt jQuery, chào đón Native Performance

[VNXF] Theme Digital – Sự lựa chọn hoàn hảo cho diễn đàn công nghệ hiện đại

PVS

Super Moderator
Thành viên BQT
Cuộc đại phẫu JavaScript trên XenForo 2.3: Tạm biệt jQuery, chào đón Native Performance

Suốt hơn một thập kỷ, jQuery là "vị vua" không thể thay thế trong mã nguồn XenForo. Nhưng đến cuối năm 2025, vị vua này đã trở thành gánh nặng. Trong một động thái quyết liệt nhằm tối ưu hóa điểm số Core Web Vitals (đặc biệt là chỉ số INP), XenForo 2.3 đã chính thức thực hiện cuộc chuyển dịch lịch sử sang Native JavaScript (ES6). Điều này có nghĩa là gì? Diễn đàn của bạn sẽ nhanh hơn, nhẹ hơn, nhưng các Theme và Add-on cũ kỹ sẽ đối mặt với nguy cơ "vỡ trận" nếu không được cập nhật.

Cuộc đại phẫu JavaScript trên XenForo 2.3 Tạm biệt jQuery, chào đón Native Performance.png

1. Sự thay đổi cốt lõi: Từ "Thư viện" sang "Trình duyệt"​

Trước đây (XF 2.1/2.2), gần như mọi tương tác (click, hover, modal, ajax) đều phải đi qua thư viện jQuery nặng nề.
Trong XenForo 2.3, đội ngũ phát triển đã viết lại toàn bộ hệ thống xử lý sự kiện (Event Handling System).

  • Native DOM API: XenForo hiện tại "nói chuyện" trực tiếp với trình duyệt (Chrome/Safari) bằng ngôn ngữ gốc (Vanilla JS), bỏ qua người phiên dịch trung gian là jQuery.
  • ES6 Modules: Code được chia nhỏ thành các module thông minh, chỉ tải khi cần thiết, thay thế cho các file javascript gộp (bundled) khổng lồ trước đây.

Ví dụ kỹ thuật: Thay vì dùng $.ajax của jQuery, core hiện tại sử dụng Fetch API chuẩn của trình duyệt, giúp giảm tải CPU và bộ nhớ RAM đáng kể.

2. Hiệu suất thực tế: Chiến thắng chỉ số INP​

Google hiện đánh giá xếp hạng SEO rất gắt gao dựa trên chỉ số INP (Interaction to Next Paint) - độ trễ khi người dùng bấm vào một nút.
Việc loại bỏ các lớp bao bọc (wrappers) của jQuery giúp giảm thiểu hiện tượng "Main Thread Blocking". Kết quả thực tế kiểm nghiệm cho thấy các thao tác mở Menu, phản hồi nút Like, tải thông báo trên Mobile diễn ra gần như tức thì, mượt mà đạt chuẩn 60fps.

3. Cảnh báo quan trọng: "Cơn ác mộng" cho Theme cũ​

Đây là phần Admin cần đặc biệt lưu ý. XenForo 2.3 vẫn giữ lại file jQuery để tương thích ngược, NHƯNG cách gọi lệnh và thứ tự tải (loading order) đã thay đổi.

  • Nhiều Theme cũ hoặc Add-on tự viết (thường thấy ở VN) hay dùng cú pháp $(document).ready(...) hoặc gọi biến $ trực tiếp trong template mà không khai báo dependency chuẩn.
  • Trên kiến trúc mới, các đoạn mã này có thể chạy trước khi jQuery kịp tải (do cơ chế bất đồng bộ - async), dẫn đến lỗi kinh điển trong Console:

Mã:
Uncaught ReferenceError: $ is not defined

Hậu quả: Slide ảnh không chạy, Menu không sổ xuống, hoặc Editor bị trắng trang hoàn toàn.

4. Khuyến nghị hành động​

Để tận dụng sức mạnh của Native JS trong năm 2025:
  • Ưu tiên Theme "Native": Khi mua Theme mới, hãy hỏi tác giả xem họ đã rewrite JS sang Native (ES6) chưa.
  • Kiểm tra Add-on: Nếu diễn đàn bị lỗi JS sau khi nâng cấp, 90% nguyên nhân nằm ở các Add-on cũ chưa cập nhật cú pháp gọi XF.on() mới.

Kết luận​

Việc chuyển sang Native JS là bước đi tất yếu để XenForo tồn tại trong kỷ nguyên Mobile-First. Đừng luyến tiếc quá khứ, hãy cập nhật giao diện để diễn đàn của bạn thực sự "bay" trên nền tảng công nghệ mới này.
 
Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.
Back
Top