Script Queue
Tải JS từ Block Components theo thứ tự dependency
Script Queue — Tải JS từ Block Components
Vấn đề
uTPro sử dụng chiến lược deferred loading — jQuery và plugins chỉ tải sau khi người dùng tương tác (hoặc 3 giây idle) để cải thiện Core Web Vitals. Điều này tạo ra thách thức:
Nếu block component render tag <script defer> riêng, nó có thể chạy trước khi jQuery sẵn sàng — gây lỗi $ is not defined.
Giải pháp: Script Queue
Components đăng ký đường dẫn JS vào queue theo request. Layout sau đó render chúng ở vị trí đúng — bên trong deferred loader (sau jQuery) hoặc dạng standalone <script defer>.
Hai phương thức
| Phương thức | Khi nào dùng | Cách tải |
|---|---|---|
Html.QueueScript(path) | Script cần jQuery | Thêm vào deferred loader (tải sau jQuery) |
Html.QueueStandaloneScript(path) | Script vanilla JS, không dependency | Render dạng <script defer> (tải độc lập) |
Cả hai phương thức tự động loại bỏ trùng lặp — cùng script đăng ký 2 lần = render 1 lần.
Quy tắc
- Vanilla JS (không dependency) →
QueueStandaloneScript - Cần jQuery hoặc thư viện trong deferred chain →
QueueScript - Không bao giờ đặt
<script src="...">trực tiếp trong component — dùng queue - CSS vẫn dùng
SetSectionbình thường - Cả hai đều an toàn khi gọi nhiều lần — dedup tự động
Kiến trúc
Được implement trong uTPro.Extension/ScriptQueueExtensions.cs:
- Dùng
HttpContext.Itemscho lưu trữ per-request (zero serialization) HashSet<string>cho O(1) dedup- HTML-encode paths để chống XSS
- Hai queue riêng biệt (deferred vs standalone)
