« 500 fois plus rapide » : cet algorithme révolutionnaire pourrait enfin résoudre le pire casse-tête des développeurs web

 Mesurer précisément la taille d’un texte sur le web a toujours été un défi technique majeur. Un nouvel algorithme imaginé par Cheng Lou pourrait bien changer la donne… et transformer en profondeur le développement front-end.

À première vue, afficher du texte semble trivial. Pourtant, c’est l’un des problèmes les plus complexes du web moderne.

- Un simple “caractère” peut cacher une réalité bien plus complexe :

• Emojis composés (👨‍👩‍👧‍👦)
• Drapeaux (🇫🇷)
• Variantes de peau
• Ligatures typographiques (fi, fl)
• Écritures non latines

- À cela s’ajoutent les règles linguistiques :

• Français / anglais → découpe par espaces
• Chinois / japonais → pas d’espaces
• Arabe → écriture RTL (droite → gauche)
• Certaines langues → règles de césure spécifiques

- Et enfin… le navigateur entre en scène.

 Le rôle (coûteux) du navigateur : DOM, CSS et ...

Pour afficher une page, le navigateur suit un pipeline complexe :

1. HTML → transformation en DOM
2. Application du CSS
3. Calcul du layout (positions, tailles, retours à la ligne)
4. Rendu à l’écran

- Le problème :
Dès qu’un développeur veut mesurer un texte, il déclenche souvent un recalcul → le fameux reflow.

-Résultat :

• Performances dégradées
• Interfaces moins fluides
• Code complexe et fragile

Les solutions actuelles (et leurs limites)

Jusqu’ici, deux approches existaient :

1. Mesurer via le DOM

✔ Simple
❌ Déclenche des reflows coûteux

2. Recréer le moteur de layout

✔ Contrôle total
❌ Complexité extrême (langues, glyphes, typographie…)

- Conclusion : aucun compromis satisfaisant.

La solution : un algorithme qui contourne le navigateur

C’est ici qu’intervient l’innovation de Cheng Lou.

Son projet, Pretext, propose une approche radicale :

-Sortir le calcul du texte du navigateur.

Comment ça fonctionne ?

1. Pré-calcul du texte
   • Mesure via canvas
   • Analyse des glyphes
2. Simulation du layout en TypeScript
   • Calcul des retours à la ligne
   • Détermination de la hauteur
   • Aucun accès au DOM

Résultat :

•  Pas de reflow
•  Calcul instantané
•  Contrôle total

Jusqu’à 500 fois plus rapide ?

Le développeur annonce des performances pouvant atteindre ×500.

Attention toutefois :

• Ce n’est pas une comparaison directe
• Le navigateur fait beaucoup plus (layout complet)
• Le gain vient surtout de l’évitement du DOM

En réalité, c’est un changement de paradigme :

On ne demande plus au navigateur → on calcule soi-même.

Des possibilités inédites pour le front-end

Cette approche ouvre la porte à des interfaces bien plus avancées :

Cas d’usage concrets :

• Bulles de chat parfaitement ajustées
• Layouts éditoriaux type magazine
• Texte autour de formes complexes
• Virtualisation massive de contenu
• ASCII art avec polices proportionnelles

-Bref : plus de liberté, moins de hacks CSS.

Les limites à ne pas ignorer

Malgré son potentiel, Pretext n’est pas magique :

Précision imparfaite

Les moteurs des navigateurs restent ultra sophistiqués.

Accessibilité

Si tout passe en canvas :

• Pas de sélection de texte
• Pas de lecture vocale native
• Navigation clavier complexe

Compatibilité

Différences selon :

• OS
• polices
• navigateurs

Vers une nouvelle ère du web ?

Pretext pourrait marquer un tournant :

-Redonner aux développeurs le contrôle du layout
-Réduire la dépendance au moteur du navigateur
-Accélérer les interfaces complexes

Mais une question reste ouverte :

Le web doit-il rester déclaratif… ou devenir de plus en plus programmatique ?

L’algorithme de Cheng Lou ne se contente pas d’améliorer les performances.

Il propose une vision différente du web :

• plus contrôlable
• plus prévisible
• potentiellement plus rapide

- S’il tient ses promesses, il pourrait bien redéfinir la manière dont nous concevons les interfaces utilisateur.