Pretext.js: Thư viện TypeScript mới giúp giao diện web đạt tốc độ 120 FPS nhờ tối ưu hóa bố cục văn bản

Cheng Lou, một kỹ sư phần mềm đang làm việc tại Midjourney và là cựu thành viên cốt cán của nhóm phát triển React, đã vừa tung ra Pretext. Đây là một thư viện TypeScript mã nguồn mở với dung lượng chỉ 15KB, có khả năng đo lường và bố trí văn bản mà hoàn toàn không cần chạm vào DOM (Document Object Model).

Phương pháp tiếp cận này giúp loại bỏ các thao tác tính toán lại bố cục (layout reflow) tốn kém của trình duyệt, từ đó cho phép các mẫu giao diện người dùng (UX/UI) nâng cao như danh sách vô hạn (infinite lists), bố cục kiểu gạch (masonry layouts) hay neo vị trí cuộn (scroll position anchoring) có thể hoạt động mượt mà ở tốc độ 60-120 FPS. Điểm đáng chú ý là Pretext được xây dựng thông qua một vòng lặp AI nhằm tái tạo kỹ thuật các phép tính bố cục của DOM.

Vấn đề về hiệu suất khi xử lý văn bản trên Web

Đối với các ứng dụng hướng tới người dùng cuối (B2C), trải nghiệm người dùng là yếu tố then chốt để tạo sự khác biệt. Các ứng dụng web từ lâu đã sử dụng các mẫu giao diện phức tạp như bố cục masonry (tương tự Pinterest, Tumblr), cuộn ảo (virtual scrolling) hay neo vị trí cuộn. Mặc dù một số mẫu này đang dần được chuẩn hóa trong CSS (như CSS Grid hay overflow-anchor), nhưng mức độ hỗ trợ giữa các trình duyệt vẫn chưa đồng nhất.

Bất kỳ triển khai nào dựa trên JavaScript tùy chỉnh cho các mẫu này đều dễ bị tổn hại bởi hiện tượng "layout thrashing" (xung đột bố cục) và chi phí hiệu suất đi kèm. Khi một ứng dụng cần tính toán chiều cao của văn bản — ví dụ như cho các danh sách ảo chứa hàng ngàn mục, lưới masonry, hay giao diện trò chuyện AI liên tục — cách truyền thống là truy vấn DOM bằng các lệnh như getBoundingClientRect hoặc offsetHeight.

Trình duyệt sẽ phản hồi bằng cách kích hoạt một layout reflow, buộc động cơ kết xuất (rendering engine) phải tính toán lại hình học và vị trí của mọi phần tử trên trang. Trên các trang web nặng hoặc với ngân sách kết xuất chặt chẽ, việc reflow dẫn đến việc mất khung hình (frame drops) và giao diện trở nên ì ạch.

Cơ chế hoạt động của Pretext.js

Pretext.js hoàn toàn loại bỏ quy trình reflow. Công cụ này hoạt động theo hai giai đoạn riêng biệt:

1. Giai đoạn prepare(): Sử dụng phương thức measureText() của Canvas API để phân tích văn bản và xác định chiều rộng tính theo pixel của từng đoạn (dựa trên phông chữ, khoảng cách và quy tắc Unicode) một cách độc lập với DOM. Các kết quả này sau đó được lưu vào bộ nhớ đệm. Chi phí cho giai đoạn prepare() chỉ phải trả một lần duy nhất.
2. Giai đoạn layout(): Sử dụng các phép tính thuần túy trên các chiều rộng đã được lưu trong bộ nhớ đệm để suy ra tổng số dòng và chiều cao cuối cùng dựa trên kích thước của vùng chứa. layout() là con đường nóng (hot path) và có thể được gọi thường xuyên tùy ý để phản ánh các thay đổi về kích thước của vùng chứa.

Cả hai giai đoạn đều không đọc dữ liệu từ DOM, do đó không gây ra các thao tác reflow tốn kém.

Hiệu suất vượt trội và sự hỗ trợ của AI

Theo nhiều bài kiểm tra hiệu suất được cộng đồng chia sẻ, một thao tác bố cục duy nhất trên 500 khối văn bản chỉ mất khoảng 0,09 mili-giây với Pretext, khiến nó nhanh hơn tới 600 lần so với các phương pháp dựa trên DOM truyền thống. Điều này giúp các ứng dụng dễ dàng duy trì tốc độ 120 khung hình mỗi giây, ngay cả khi người dùng thao tác với các phần tử yêu cầu văn bản phải ngắt dòng động theo thời gian thực.

Một điều thú vị là Lou giải thích rằng AI đã đóng một vai trò lớn trong việc triển khai đa ngôn ngữ thành công của thư viện này:

Động cơ này rất nhỏ gọn (vài KB), nhận biết các "đặc quẻ" của trình duyệt và hỗ trợ tất cả các ngôn ngữ bạn cần, bao gồm cả tiếng Hàn trộn lẫn tiếng Ả Rập RTL và emoji đặc thù cho từng nền tảng. Điều này đạt được bằng cách cho Claude và Codex thấy "sự thật cơ bản" (ground truth) của trình duyệt và yêu cầu chúng đo lường và lặp lại dựa trên những kết quả đó ở mọi chiều rộng vùng chứa quan trọng, chạy trong suốt nhiều tuần.

Phương pháp sử dụng phần mềm đang hoạt động như một "ngôn sứ" để xác minh này minh họa tiềm năng của các vòng lặp AI tự chủ. Gần đây, mười sáu tác nhân AI của Claude đã xây dựng một trình biên dịch C vượt qua 99% bài kiểm tra của gcc. Mặc dù trình biên dịch đó chưa đạt cấp độ sản xuất, nhưng nó chỉ mất hai tuần làm việc với sự can thiệp tối thiểu của con người.

Phản hồi của cộng đồng lập trình viên

Các nhà phát triển đã phản hồi cực kỳ tích cực trước bản phát hành này. Kho lưu trữ (repository) đã đạt được 16.000 sao trên GitHub chỉ trong vòng 24 giờ sau khi công bố. Các nhà phát triển đã bắt đầu áp dụng công cụ này cho các giao diện trước đây được coi là quá nặng đối với web.

Một nhà thiết kế đã chia sẻ:

Luôn luôn có một khoảng cách giữa những gì các nhà thiết kế in ấn làm và những gì các nhà thiết kế web được phép làm. Vấn đề chủ yếu nằm ở văn bản. Tôi đã hoàn toàn ám ảnh bởi các bản demo Pretext đẹp mắt này và đã thu thập một số bản yêu thích của mình.

[...] Đối với các nhà thiết kế đồ họa, điều này có nghĩa là sử dụng văn bản trên web với sự linh hoạt giống như bạn có được trong in ấn.

Các nhà phát triển quan tâm có thể xem xét nhiều bản demo và trường hợp sử dụng có sẵn, chẳng hạn như cuộn ảo chiều cao thay đổi, bong bóng trò chuyện AI động và nguồn cấp nội đa ngôn ngữ. Những người có thiên hướng toán học và thiết kế (typesetting) cũng có thể xem xét sự so sánh tương tác giữa các thuật toán căn chỉnh, đối đầu Pretext với tiêu chuẩn của Web và thuật toán Knuth-Plass (được sử dụng trong hệ thống thiết kế TeX/LaTeX nổi tiếng).