Blog

Pretext.js: Thư Viện 15KB Tối Ưu Bố Cục Văn Bản Nhanh Gấp 500 Lần

Ashley Innocent

Ashley Innocent

31 tháng 3 2026

Pretext.js: Thư Viện 15KB Tối Ưu Bố Cục Văn Bản Nhanh Gấp 500 Lần

TL;DR (Tóm tắt)

Pretext.js là một thư viện TypeScript không có phụ thuộc, dùng để đo lường và định vị văn bản đa dòng thông qua các phép toán thuần túy thay vì các thao tác DOM. Nó loại bỏ các thao tác reflow đồng bộ bắt buộc, cung cấp khả năng đo văn bản nhanh hơn ~500 lần so với getBoundingClientRect() và hỗ trợ mọi hệ thống chữ viết chính trên hành tinh. Nếu bạn xây dựng các trình cuộn ảo, giao diện người dùng trò chuyện hoặc bảng dữ liệu, thư viện này giải quyết một vấn đề mà các trình duyệt đã bỏ qua trong 30 năm qua.

Giới thiệu

Mỗi khi JavaScript của bạn gọi getBoundingClientRect() hoặc đọc offsetHeight, trình duyệt sẽ dừng mọi thứ. Nó xóa các thay đổi kiểu đang chờ xử lý, tính toán lại bố cục và buộc phải thực hiện một lần hiển thị đầy đủ. Đây được gọi là reflow đồng bộ bắt buộc, và đây là thao tác tốn kém nhất mà một trình duyệt có thể thực hiện.

Bây giờ hãy nhân điều đó lên với 1.000 bong bóng trò chuyện trong một danh sách ảo. Hoặc 10.000 hàng trong một bảng dữ liệu. Kết quả? Khung hình bị mất, giật lag và người dùng nghĩ rằng ứng dụng của bạn bị lỗi.

💡
Các nhóm Apidog xây dựng giao diện người dùng dựa trên API rất quen thuộc với nỗi đau này; truyền dữ liệu phản hồi vào giao diện người dùng động trong khi giữ mọi thứ mượt mà là một cuộc chiến không ngừng khi công cụ bố cục của bạn chống lại bạn ở mỗi bước.
button

Cheng Lou, nhà phát triển đứng sau react-motion (21.700+ lượt gắn sao trên GitHub) và là cộng tác viên cốt lõi cho React và ReasonML tại Meta, đã xây dựng Pretext.js để khắc phục điều này. Thư viện được phát hành vào tháng 3 năm 2026, đạt hơn 14.000 lượt gắn sao trên GitHub chỉ trong vài ngày và gây ra một trong những chủ đề Hacker News lớn nhất trong năm.

Bài viết này phân tích Pretext.js làm gì, cách nó hoạt động bên trong, khi nào bạn nên sử dụng nó và những hạn chế của nó. Bạn sẽ biết liệu thư viện này có thuộc về ngăn xếp công nghệ của mình hay không.

Pretext.js là gì?

Pretext.js là một công cụ bố cục văn bản thuần JavaScript/TypeScript. Nó đo lường và định vị văn bản đa dòng hoàn toàn thông qua các phép toán; không có getBoundingClientRect(), không có offsetHeight, không reflow, không lãng phí.

Ý tưởng cốt lõi rất đơn giản. Thay vì hỏi trình duyệt "văn bản này cao bao nhiêu?" (điều này buộc trình duyệt phải hiển thị nó trước), Pretext.js tính toán câu trả lời một cách toán học bằng cách sử dụng các chỉ số phông chữ từ Canvas API.

Đây là toàn bộ bề mặt API:

import { prepare, layout } from '@chenglou/pretext';

// Bước 1: Chuẩn bị văn bản (một lần, có thể lưu vào bộ nhớ cache)
const handle = prepare('Hello, pretext.js', '16px "Inter"');

// Bước 2: Bố cục ở bất kỳ chiều rộng nào (thuần toán học, micro giây)
const { height, lineCount } = layout(handle, 400, 24);

Chỉ có vậy. Hai hàm. Một hàm đo các phân đoạn văn bản và lưu chúng vào bộ nhớ cache. Hàm còn lại thực hiện các phép toán để tính toán bố cục. Cuộc gọi prepare() là thao tác duy nhất chạm vào trình duyệt (thông qua Canvas measureText()). Sau đó, layout() là toán học thuần túy.

Tại sao điều này quan trọng đối với các ứng dụng nặng API

Nếu bạn đang xây dựng các ứng dụng tiêu thụ phản hồi API truyền trực tuyến; hãy nghĩ đến các trợ lý AI, bảng điều khiển thời gian thực hoặc trình chỉnh sửa cộng tác; bạn cần biết chiều cao của văn bản đến trước khi hiển thị nó. Nếu không, trình cuộn ảo của bạn sẽ bị giật, giao diện người dùng trò chuyện của bạn sẽ nhảy nhót và người dùng của bạn sẽ nhận thấy.

Pretext.js cung cấp cho bạn chiều cao đó trong micro giây thay vì mili giây. Sự khác biệt tích lũy nhanh chóng.

Vấn đề Pretext.js giải quyết

Để hiểu tại sao thư viện này tồn tại, bạn cần hiểu điều gì xảy ra khi JavaScript đọc các thuộc tính bố cục.

Giải thích về Reflow đồng bộ bắt buộc

Khi bạn viết mã này:

const elements = document.querySelectorAll('.text-block');
elements.forEach(el => {
  const height = el.getBoundingClientRect().height; // REFLOW!
  // use height for positioning...
});

Mỗi cuộc gọi getBoundingClientRect() buộc trình duyệt phải:

  1. Tạm dừng thực thi JavaScript
  2. Xóa tất cả các thay đổi kiểu đang chờ xử lý
  3. Tính toán lại bố cục cho toàn bộ tài liệu (hoặc cây con)
  4. Trả về giá trị đã tính toán

Đây được gọi là "layout thrashing" (tái bố cục liên tục). Trong một vòng lặp đo 1.000 phần tử, trình duyệt thực hiện 1.000 phép tính toán lại bố cục đầy đủ. Chi phí? Khoảng 94 mili giây, có nghĩa là 6 khung hình bị mất ở 60fps.

Vấn đề cuộn ảo

Các thư viện cuộn ảo (như react-window hoặc tanstack-virtual) cần biết chiều cao của từng mục để tính toán vị trí cuộn. Đối với các mục có chiều cao cố định, điều này rất đơn giản. Đối với nội dung văn bản có chiều cao thay đổi, đó là một cơn ác mộng.

Giải pháp tiêu chuẩn là hiển thị các mục ngoài màn hình, đo chúng, sau đó định vị chúng. Điều này hoạt động nhưng làm mất đi mục đích của việc cuộn ảo; bạn đang hiển thị các nút DOM mà bạn đang cố gắng tránh hiển thị.

Một số thư viện ước tính chiều cao và điều chỉnh chúng sau khi hiển thị, gây ra các bước nhảy rõ ràng. Những thư viện khác buộc các nhà phát triển phải chỉ định chiều cao cố định, hạn chế những gì bạn có thể hiển thị.

Pretext.js loại bỏ toàn bộ loại giải pháp tạm thời này. Bạn tính toán chiều cao văn bản chính xác trước khi bất kỳ nút DOM nào tồn tại.

Số liệu thực tế

Pretext.js đã công bố kết quả kiểm định hiệu suất trên trang web của họ:

Phương pháp 1.000 khối văn bản 500 khối văn bản
DOM (getBoundingClientRect) ~94ms (6 khung hình bị mất) ~47ms
Pretext.js (layout()) ~2ms ~0.09ms
Sự khác biệt về tốc độ Nhanh hơn ~47 lần Nhanh hơn ~500 lần

Cải thiện tốc độ ấn tượng hơn với các lô nhỏ hơn vì chi phí phụ trợ trên mỗi cuộc gọi của phép đo DOM không đổi trong khi chi phí toán học của Pretext tăng tuyến tính.

Cách Pretext.js hoạt động bên trong

Thư viện hoạt động qua ba giai đoạn riêng biệt. Hiểu những điều này giúp bạn tối ưu hóa cách sử dụng nó.

Giai đoạn 1: Phân đoạn văn bản

Khi bạn gọi prepare(), Pretext.js trước tiên chuẩn hóa văn bản đầu vào của bạn. Nó xử lý khoảng trắng, áp dụng các quy tắc ngắt dòng Unicode (UAX #14) và phân đoạn văn bản thành các đơn vị có thể ngắt.

Đây là nơi hỗ trợ đa ngôn ngữ phát huy tác dụng. Công cụ phân đoạn xử lý chính xác:

Giai đoạn 2: Đo lường Canvas

Sau khi phân đoạn, Pretext.js đưa từng phân đoạn qua Canvas measureText() API. Đây là một cuộc gọi trình duyệt mà thư viện thực hiện, và nó nhanh vì phép đo văn bản Canvas không kích hoạt reflow bố cục.

// Nội bộ: cách Pretext đo văn bản
const ctx = offscreenCanvas.getContext('2d');
ctx.font = '16px "Inter"';
const metrics = ctx.measureText('Hello'); // Không reflow!
const width = metrics.width; // Chiều rộng tiến của glyph

Các phép đo được lưu vào bộ nhớ cache theo phân đoạn và kết hợp phông chữ. Nếu bạn gọi prepare() với cùng một văn bản và phông chữ hai lần, cuộc gọi thứ hai sẽ sử dụng lại dữ liệu đã được lưu trong bộ nhớ cache.

Giai đoạn 3: Bố cục toán học thuần túy

Hàm layout() lấy chiều rộng phân đoạn đã lưu trong bộ nhớ cache và chiều rộng vùng chứa, sau đó tính toán các điểm ngắt dòng bằng thuật toán tham lam:

  1. Cộng chiều rộng phân đoạn cho đến khi tổng vượt quá chiều rộng vùng chứa
  2. Ngắt sang một dòng mới
  3. Lặp lại cho đến khi tất cả các phân đoạn được đặt
  4. Nhân số lượng dòng với chiều cao dòng để có tổng chiều cao

Không có DOM. Không có Canvas. Phép cộng và so sánh thuần túy.

Đây là lý do tại sao layout() rất nhanh; nó đang thực hiện cùng một phép toán mà bạn sẽ viết trên giấy bằng thước kẻ và máy tính.

Mẫu handle có thể tái sử dụng

Một trong những quyết định thiết kế tốt nhất trong Pretext.js là prepare() trả về một handle có thể tái sử dụng. Một cuộc gọi prepare() duy nhất hoạt động trên tất cả các chiều rộng vùng chứa:

const handle = prepare(longArticleText, '16px "Inter"');

// Tính toán chiều cao cho thiết bị di động, máy tính bảng và máy tính để bàn trong micro giây
const mobile = layout(handle, 375, 24);   // { height: 2400, lineCount: 100 }
const tablet = layout(handle, 768, 24);   // { height: 1200, lineCount: 50 }
const desktop = layout(handle, 1200, 24); // { height: 720, lineCount: 30 }

Mẫu này hoàn hảo cho các tính toán thiết kế đáp ứng. Bạn đo một lần và bố cục ở bất kỳ chiều rộng nào ngay lập tức.

Các trường hợp sử dụng thực tế

1. Cuộn ảo với văn bản có chiều cao thay đổi

Đây là trường hợp sử dụng chính. Dưới đây là cách bạn tích hợp Pretext.js với một trình cuộn ảo:

import { prepare, layout } from '@chenglou/pretext';

interface TextItem {
  id: string;
  content: string;
}

function computeHeights(items: TextItem[], containerWidth: number) {
  return items.map(item => {
    const handle = prepare(item.content, '14px "Inter"');
    const { height } = layout(handle, containerWidth, 20);
    return { id: item.id, height: height + 32 }; // +32 cho khoảng đệm
  });
}

// 10.000 mục được đo trong ~4ms
const heights = computeHeights(chatMessages, 600);

Không hiển thị ngoài màn hình. Không ước tính chiều cao. Không có sự nhảy rõ ràng khi các mục cuộn vào chế độ xem.

2. Giao diện trò chuyện AI

Các trợ lý AI truyền phản hồi từng token. Mỗi token mới có thể thay đổi số dòng, dịch chuyển mọi thứ bên dưới nó. Với phép đo DOM truyền thống, mỗi cập nhật token sẽ kích hoạt một reflow.

Với Pretext.js, bạn tính toán lại chiều cao sau khi mỗi đoạn đến mà không cần chạm vào DOM:

let streamedText = '';
const font = '15px "SF Pro"';

socket.on('token', (token: string) => {
  streamedText += token;
  const handle = prepare(streamedText, font);
  const { height } = layout(handle, bubbleWidth, 22);
  
  // Cập nhật vị trí trình cuộn ảo mà không cần đo DOM
  scroller.updateItemHeight(messageId, height + padding);
});

3. Bảng dữ liệu với các cột văn bản

Các ứng dụng kiểu bảng tính cần tự động điều chỉnh kích thước cột. Đo hàng nghìn giá trị ô thông qua DOM rất tốn kém. Pretext.js làm cho nó nhanh chóng:

function computeColumnWidth(values: string[], font: string, padding: number) {
  let maxWidth = 0;
  for (const value of values) {
    const handle = prepare(value, font);
    // Bố cục với chiều rộng vô hạn = một dòng = chiều rộng văn bản tự nhiên
    const { height } = layout(handle, Infinity, 20);
    // Sử dụng tính năng theo dõi chiều rộng nội bộ của handle để định cỡ cột
    maxWidth = Math.max(maxWidth, /* chiều rộng đã tính */);
  }
  return maxWidth + padding;
}

4. Nguồn cấp nội dung đa ngôn ngữ

Các nguồn cấp dữ liệu mạng xã hội với nội dung hỗn hợp (bài đăng tiếng Trung theo sau là phản hồi tiếng Ả Rập theo sau là bình luận tiếng Hàn) rất khó để ảo hóa vì mỗi ngôn ngữ có các quy tắc ngắt dòng khác nhau.

Pretext.js xử lý tất cả chúng với cùng một API:

const posts = [
  { text: 'Thư viện này đã thay đổi mọi thứ', lang: 'en' },
  { text: 'Văn bản RTL với bố cục hai chiều chính xác', lang: 'ar' },
  { text: 'Văn bản CJK được ngắt ký tự đúng cách', lang: 'zh' },
];

// Cùng API, kết quả chính xác cho mọi ngôn ngữ
posts.forEach(post => {
  const handle = prepare(post.text, '16px system-ui');
  const { height } = layout(handle, 400, 24);
});

Kiểm tra bố cục văn bản của bạn với Apidog

Khi bạn đang xây dựng các giao diện người dùng nặng văn bản được hỗ trợ bởi API, việc bố cục đúng chỉ là một nửa cuộc chiến. Bạn cũng cần xác minh các phản hồi API cung cấp cho các thành phần văn bản của bạn cung cấp dữ liệu đúng, ở định dạng đúng, với tốc độ đúng.

Apidog giúp điều này trở nên đơn giản. Bạn có thể mô phỏng các phản hồi API truyền trực tuyến để kiểm tra cách tích hợp Pretext.js của bạn xử lý việc tải văn bản tiến bộ. Thiết lập các kịch bản thử nghiệm với độ dài văn bản, ngôn ngữ và các trường hợp biên Unicode khác nhau, sau đó xác minh trình cuộn ảo của bạn hoạt động chính xác trước khi triển khai.

Đối với các nhóm xây dựng sản phẩm trò chuyện AI, môi trường kiểm thử API của Apidog cho phép bạn:

Điều này quan trọng bởi vì một thư viện bố cục văn bản chỉ tốt khi dữ liệu được đưa vào nó. Các phản hồi API rác tạo ra các bố cục rác, bất kể công cụ đo lường của bạn chạy nhanh đến mức nào.

button

Những hạn chế và phê bình đã biết

Pretext.js không hoàn hảo. Chủ đề Hacker News đã đưa ra một số lo ngại hợp lệ đáng biết trước khi bạn áp dụng nó.

Các trường hợp biên về độ chính xác hiển thị

Nhiều người dùng đã báo cáo văn bản vượt quá các hộp giới hạn trong các bản demo của Safari và Chrome. Phép toán của thư viện có thể sai lệch so với bố cục gốc của trình duyệt trong các trường hợp cụ thể:

Những trường hợp biên này ít quan trọng hơn đối với việc cuộn ảo (nơi vài pixel lỗi không thể nhìn thấy) và quan trọng hơn đối với việc sắp chữ pixel hoàn hảo.

Đo lường Canvas không miễn phí

Cuộc gọi prepare() vẫn chạm vào công cụ văn bản Canvas của trình duyệt. Đối với các ứng dụng tạo ra hàng nghìn handle prepare() độc đáo trên mỗi khung hình, điều này có thể trở thành nút thắt cổ chai. Giải pháp là lưu vào bộ nhớ cache và xử lý theo lô, nhưng thư viện không bắt buộc cả hai.

Không hỗ trợ thuộc tính CSS

Pretext.js đo lường văn bản thô với thông số kỹ thuật phông chữ. Nó không tính đến các thuộc tính CSS ảnh hưởng đến bố cục:

Nếu kiểu văn bản của bạn dựa vào các thuộc tính CSS này, chiều cao đã tính toán sẽ không khớp với những gì trình duyệt hiển thị. Bạn sẽ cần phải tính toán thủ công hoặc chấp nhận sự khác biệt.

Nó không thay thế hiển thị DOM

Pretext.js cho bạn biết văn bản sẽ cao bao nhiêu. Nó không hiển thị văn bản cho bạn. Bạn vẫn cần các nút DOM (hoặc hiển thị Canvas/SVG) để hiển thị văn bản. Giá trị của thư viện nằm ở giai đoạn đo lường, không phải giai đoạn hiển thị.

Pretext.js so với các phương pháp truyền thống

Tính năng Pretext.js Đo lường DOM Chiều cao ước tính
Tốc độ (1K mục) ~2ms ~94ms ~0ms (không đo lường)
Độ chính xác Cao (dựa trên Canvas) Hoàn hảo (giá trị thực) Thấp (phương pháp phỏng đoán)
Phụ thuộc DOM Không có sau prepare() Hoàn toàn Không có
Kích hoạt Reflow Không Một lần mỗi phép đo Không
Đa ngôn ngữ Hỗ trợ Unicode đầy đủ Đầy đủ (tự nhiên của trình duyệt) Kém (tỷ lệ mã hóa cứng)
Hỗ trợ thuộc tính CSS Hạn chế (chỉ phông chữ) Đầy đủ Không có
Chi phí bộ nhớ Các phân đoạn đã lưu trong bộ nhớ cache Các nút DOM Tối thiểu
Bố cục đáp ứng Một prepare(), nhiều layout() Đo lại theo chiều rộng Ước tính lại theo chiều rộng

Lựa chọn đúng đắn phụ thuộc vào những hạn chế của bạn. Nếu bạn cần độ chính xác pixel hoàn hảo và hỗ trợ thuộc tính CSS, phép đo DOM vẫn là sự thật cơ bản. Nếu bạn cần tốc độ trên hàng nghìn mục và có thể chịu được sự khác biệt subpixel nhỏ, Pretext.js sẽ chiến thắng với một biên độ lớn.

Bắt đầu

Cài đặt

npm install @chenglou/pretext
# hoặc
pnpm add @chenglou/pretext
# hoặc
bun add @chenglou/pretext

Cách sử dụng cơ bản

import { prepare, layout } from '@chenglou/pretext';

// Đo một đoạn văn
const handle = prepare(
  'Pretext.js tính toán bố cục văn bản mà không cần chạm vào DOM.',
  '16px "Inter"'
);

// Lấy chiều cao ở một chiều rộng vùng chứa cụ thể
const result = layout(handle, 600, 24);
console.log(result.height);    // ví dụ, 48 (2 dòng x 24px)
console.log(result.lineCount); // ví dụ, 2

Tích hợp với React

import { prepare, layout } from '@chenglou/pretext';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useMemo, useRef } from 'react';

function VirtualChat({ messages }: { messages: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const containerWidth = 600;
  const font = '14px "Inter"';
  const lineHeight = 20;

  const heights = useMemo(() => {
    return messages.map(msg => {
      const handle = prepare(msg, font);
      const { height } = layout(handle, containerWidth, lineHeight);
      return height + 24; // padding
    });
  }, [messages]);

  const virtualizer = useVirtualizer({
    count: messages.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (index) => heights[index],
  });

  return (
    <div ref={parentRef} style={{ height: '100vh', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: virtualRow.start,
              width: containerWidth,
            }}
          >
            {messages[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Điều này cung cấp cho bạn một cuộc trò chuyện ảo với chiều cao mục chính xác được tính toán trước khi bất kỳ tin nhắn nào được hiển thị vào DOM. Không có ước tính, không có bước nhảy chỉnh sửa, không reflow.

Sân chơi tương tác

Trang web Pretext.js bao gồm một sân chơi tương tác tại pretextjs.dev/playground nơi bạn có thể dán văn bản, chọn phông chữ, điều chỉnh chiều rộng vùng chứa và xem tính toán bố cục trong thời gian thực. Đó là cách nhanh nhất để xác minh hành vi trước khi tích hợp.

Khi bạn KHÔNG nên sử dụng Pretext.js

Pretext.js không phải là công cụ phù hợp cho mọi vấn đề đo lường văn bản:

Câu hỏi thường gặp

Pretext.js đã sẵn sàng cho sản xuất chưa?

Thư viện được phát hành vào tháng 3 năm 2026 và đã đạt được hơn 14.000 lượt gắn sao trên GitHub chỉ trong vài ngày. Cheng Lou, người tạo ra nó, điều hành frontend của Midjourney; một hệ thống sản xuất phục vụ hàng triệu người dùng. Bộ kiểm thử của thư viện bao gồm hàng chục ngôn ngữ và các trường hợp biên. Mặc dù vậy, đây là một bản phát hành mới. Hãy khóa phiên bản của bạn và kiểm thử với các phông chữ và nội dung cụ thể của bạn.

Pretext.js có hoạt động với React, Vue và Svelte không?

Có. Pretext.js không phụ thuộc vào framework. Nó là một thư viện TypeScript thuần túy với hai hàm. Bạn gọi prepare() và layout() ở bất cứ đâu bạn cần đo văn bản; bên trong React hooks, Vue composables, Svelte stores hoặc JavaScript thuần túy.

Pretext.js xử lý phông chữ web như thế nào?

Hàm prepare() đo văn bản bằng cách sử dụng bất kỳ phông chữ nào mà trình duyệt đã tải tại thời điểm gọi. Nếu phông chữ web của bạn chưa được tải, phép đo sẽ sử dụng phông chữ dự phòng và tạo ra kết quả không chính xác. Hãy đảm bảo phông chữ của bạn được tải trước khi gọi prepare(). Sử dụng Font Loading API (document.fonts.ready) để xác minh.

Tôi có thể sử dụng Pretext.js để hiển thị Canvas hoặc SVG không?

Có. Thư viện tính toán bố cục văn bản không phụ thuộc vào mục tiêu hiển thị. Bạn có thể sử dụng chiều cao đã tính toán và các điểm ngắt dòng để định vị văn bản trong Canvas 2D, WebGL, SVG hoặc DOM. Trang web Pretext.js hiển thị các ví dụ về tất cả các mục tiêu hiển thị này.

Nó có hỗ trợ các ngôn ngữ RTL (từ phải sang trái) không?

Có. Pretext.js xử lý tiếng Ả Rập, tiếng Do Thái và các ngôn ngữ RTL khác với hỗ trợ văn bản hai chiều thích hợp. Nó cũng xử lý văn bản hỗn hợp hướng (ví dụ: văn bản tiếng Ả Rập có các từ tiếng Anh được nhúng) một cách chính xác.

Kích thước gói là bao nhiêu?

15KB đã được nén với không có phụ thuộc. Không yêu cầu polyfill. Thư viện chỉ sử dụng các API trình duyệt tiêu chuẩn (Canvas measureText() và Intl.Segmenter nếu có).

Độ chính xác của nó so với phép đo DOM như thế nào?

Đối với hầu hết nội dung văn bản, Pretext.js khớp với bố cục DOM trong vòng 1-2 pixel. Độ chính xác phụ thuộc vào phông chữ và các thuộc tính CSS bạn sử dụng. Các thuộc tính như letter-spacing và word-spacing không được tính đến, vì vậy nếu bạn sử dụng chúng, hãy mong đợi sự khác biệt lớn hơn. Đối với cuộn ảo, nơi vài pixel lỗi không thể nhìn thấy, độ chính xác là quá đủ.

Pretext.js có thể đo văn bản được định kiểu (in đậm, in nghiêng, kích thước hỗn hợp) không?

Mỗi cuộc gọi prepare() chấp nhận một thông số kỹ thuật phông chữ duy nhất. Đối với văn bản có kiểu hỗn hợp (từ in đậm trong văn bản thông thường), bạn sẽ cần tự phân đoạn văn bản và tạo các handle riêng biệt cho từng kiểu. Đây là một hạn chế đã biết có thể được giải quyết trong các phiên bản tương lai.

Kết luận

Pretext.js giải quyết một vấn đề mà các trình duyệt đã bỏ qua trong ba thập kỷ: đo lường văn bản nhanh chóng, chính xác mà không cần reflow DOM. Đối với các nhà phát triển xây dựng trình cuộn ảo, giao diện người dùng trò chuyện, bảng dữ liệu hoặc bất kỳ giao diện nào cần đo hàng nghìn khối văn bản, thư viện này thay thế toàn bộ danh mục các giải pháp tạm thời bằng hai cuộc gọi hàm.

Thư viện không phải là một viên đạn bạc. Nó không hỗ trợ các thuộc tính văn bản CSS ngoài thông số kỹ thuật phông chữ, có sự khác biệt nhỏ về độ chính xác subpixel và chưa hoạt động ở phía máy chủ. Nhưng đối với trường hợp sử dụng mục tiêu của nó; tính toán trước chiều cao văn bản cho các danh sách ảo hóa; không có gì khác có thể sánh được.

Sẵn sàng xây dựng giao diện người dùng nặng văn bản nhanh hơn? Bắt đầu bằng cách kiểm tra các điểm cuối API của bạn với Apidog để đảm bảo lớp dữ liệu của bạn vững chắc, sau đó đưa Pretext.js vào quy trình hiển thị của bạn.

button

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống