ไลบรารีวัดข้อความ JS ล้วน เพิ่มประสิทธิภาพ 200 เท่า ภายใน 3 วัน ดาวพุ่งเกิน 21.9K!

3 hours ago • โครงการโอเพนซอร์ส • 12 views

เมื่อเร็วๆ นี้ โครงการโอเพนซอร์สชื่อ Pretext ในชุมชน Front-end ได้รับความสนใจอย่างกว้างขวาง

โครงการนี้สร้างขึ้นโดย Cheng Lou อดีตนักพัฒนา React Core ซึ่งเคยเป็นผู้นำการพัฒนา react-motion ที่มีดาวถึง 21.9K ตัว Pretext ที่เปิดตัวในครั้งนี้ ได้รับดาวมากกว่า react-motion ภายในเวลาเพียง 3 วันหลังจากการเผยแพร่

ไลบรารีวัดข้อความ JS ล้วน เพิ่มประสิทธิภาพ 200 เท่า ภายใน 3 วัน ดาวพุ่งเกิน 21.9K!

โครงการได้รับความนิยมสูงบนแพลตฟอร์มโซเชียลมีเดียต่างประเทศ โพสต์ที่เกี่ยวข้องมีผู้เข้าชมมากกว่า 16 ล้านครั้ง และถูกกดไลค์กว่า 64,000 ครั้ง มีการสนทนาในกระทู้มากกว่า 68,000 ข้อความ ขณะนี้ ความนิยมนี้ได้แพร่กระจายไปยังชุมชนเทคโนโลยีในประเทศแล้ว

1. ข้อมูลเบื้องต้นเกี่ยวกับโครงการ

Pretext เป็นไลบรารีสำหรับวัดและจัดวางข้อความหลายบรรทัดที่พัฒนาด้วย JavaScript/TypeScript ล้วนๆ

เป้าหมายหลักคือ: คำนวณความสูงของการแสดงผลข้อความหลายบรรทัดที่ความกว้างที่กำหนดได้อย่างแม่นยำ โดยไม่ต้องสัมผัสกับ DOM

วิดีโอสาธิตด้านล่างแสดงเอฟเฟกต์บนเว็บที่ใช้ไลบรารีนี้ การจัดวางข้อความและการคาดการณ์ความสูงเป็นไปอย่างราบรื่นมาก

ที่อยู่โครงการ: https://github.com/chenglou/pretext

2. จุดเด่นหลัก

การจัดวางข้อความหลายบรรทัดอย่างแม่นยำในการพัฒนาเว็บเป็นปัญหาที่มีมานานเกือบสามสิบปี วิธีการดั้งเดิมอาศัย DOM API เช่น getBoundingClientRect หรือ offsetHeight ซึ่งการดำเนินการเหล่านี้จะทริกเกอร์การเรนเดอร์ใหม่ของเบราว์เซอร์ และมีค่าใช้จ่ายด้านประสิทธิภาพสูงมาก ในสถานการณ์ที่ต้องวัดความสูงข้อความบ่อยครั้ง เช่น รายการเลื่อนเสมือน (virtual scroll) อินเทอร์เฟซแชท การจัดวางแบบวอเตอร์ฟอลล์ (waterfall) ปัญหาด้านประสิทธิภาพจะเด่นชัดเป็นพิเศษ

Pretext ปัจจุบันได้รับดาวมากกว่า 34,000 ดาว มีขนาดเพียง 15 KB และการออกแบบมีความฉลาดลึกซึ้ง

สถาปัตยกรรมสองขั้นตอน เพิ่มประสิทธิภาพอย่างเห็นได้ชัด

Pretext แบ่งกระบวนการวัดออกเป็นสองขั้นตอน:
1. ขั้นตอนเตรียมการ prepare(text, font): ดำเนินการแบ่งคำ (tokenization) ประมวลผลข้อความสองทิศทาง (bidi) และใช้ Canvas measureText เพื่อวัดความกว้างของแต่ละส่วนข้อความและเก็บไว้ในแคช ขั้นตอนนี้ค่อนข้างหนัก การประมวลผลข้อความ 500 ส่วนใช้เวลาประมาณ 19 มิลลิวินาที
2. ขั้นตอนการจัดวาง layout(prepared, maxWidth, lineHeight): ดำเนินการคำนวณทางคณิตศาสตร์ล้วนๆ ตามความกว้างที่เก็บไว้ในแคช เพื่อกำหนดความสูงรวมหลังจากขึ้นบรรทัดใหม่ ขั้นตอนนี้เบามาก ข้อความ 500 ส่วนใช้เวลาเพียง 0.09 มิลลิวินาที

จุดเด่นสำคัญ: เมื่อความกว้างของคอนเทนเนอร์เปลี่ยน จำเป็นต้องดำเนินการเฉพาะขั้นตอนที่สองใหม่เท่านั้น เนื่องจากแคชจากขั้นตอนเตรียมการยังคงใช้ได้ การคำนวณความสูงใหม่สามารถทำได้ผ่านการคำนวณทางคณิตศาสตร์เท่านั้น ทำให้ประสิทธิภาพดีกว่าการวัดด้วย DOM แบบดั้งเดิม มากกว่า 200 เท่า

รองรับภาษาทั้งหมดและความแม่นยำ 100%

ไลบรารีนี้ไม่เพียงรองรับภาษาอังกฤษ แต่ยังสามารถประมวลผลภาษาที่ซับซ้อน เช่น ภาษาจีน ญี่ปุ่น เกาหลี ได้อย่างถูกต้อง การทดสอบบนเบราว์เซอร์หลักสามตัว ได้แก่ Chrome, Safari และ Firefox มีความแม่นยำถึง 7680/7680 นั่นคือ 100% การทำให้การวัดและการจัดวางข้อความทุกภาษาเป็นไปอย่างแม่นยำนั้นยากมาก นี่เป็นหนึ่งในเหตุผลที่โครงการได้รับความสนใจอย่างรวดเร็วหลังการเผยแพร่

3. สถานการณ์การใช้งาน

สถานการณ์ที่หนึ่ง: การคาดการณ์ความสูงข้อความ

สามารถรับความสูงข้อความที่แม่นยำได้โดยไม่ต้องจัดการกับ DOM เหมาะสำหรับ:
– รายการเลื่อนเสมือน (virtual scroll)
– การจัดวางแบบวอเตอร์ฟอลล์ (waterfall)
– ความกว้างที่ปรับได้อัตโนมัติ (shrink-wrap) ของฟองแชท
– การป้องกันการเลื่อนของเลย์เอาต์ (CLS)

สถานการณ์ที่สอง: การจัดวางข้อความทีละบรรทัดด้วยตนเอง

สามารถรับพิกัดและเนื้อหาที่แม่นยำของแต่ละบรรทัดข้อความ จากนั้นจึงเรนเดอร์ลงบน Canvas, SVG หรือ WebGL ด้วยวิธีนี้สามารถสร้างเอฟเฟกต์ขั้นสูงได้ เช่น:
– ข้อความไหลเลี่ยงสิ่งกีดขวาง
– ศิลปะ ASCII แบบควันของเหลว
– ข้อความหลบเลี่ยงเมื่อกล้องติดตามใบหน้า
– การจัดเรียงข้อความเปลี่ยนไปเมื่อลูกบอลชนกันตามหลักฟิสิกส์
– เกมมาริโอเวอร์ชัน ASCII

ตัวอย่างที่ยอดเยี่ยมของการพัฒนาด้วยความช่วยเหลือของ AI

นักพัฒนา Cheng Lou ใช้เครื่องมือเขียนโปรแกรม AI อย่าง Claude Code และ Codex อย่างมากในการพัฒนาโครงการ เขาให้ AI เปรียบเทียบผลลัพธ์การเรนเดอร์จริงของเบราว์เซอร์ภายใต้ความกว้างของคอนเทนเนอร์หลายสิบแบบ และแก้ไขความแตกต่างโดยอัตโนมัติ วิธีการนี้ถูกพูดคุยกันอย่างกว้างขวางบน Hacker News และถือเป็น ตัวอย่างที่สมบูรณ์แบบของการเขียนโปรแกรมด้วยความช่วยเหลือของ AI Simon Willison ก็เขียนบทความแนะนำเป็นพิเศษ โดยชื่นชาวิธีการทดสอบที่ใช้หนังสือ “The Great Gatsby” ทั้งเล่มในการเปรียบเทียบข้ามเบราว์เซอร์

4. เริ่มต้นใช้งานอย่างรวดเร็ว

การติดตั้ง

bash npm install @chenglou/pretext
หรือใช้ bun:
bash bun add @chenglou/pretext

การใช้งานพื้นฐาน: การคาดการณ์ความสูงข้อความ

javascript
import { prepare, layout } from ‘@chenglou/pretext’

const prepared = prepare(‘AGI 春天到了. بدأت الرحلة 🚀’, ’16px Inter’)
const { height, lineCount } = layout(prepared, textWidth, 20)
// height คือความสูงที่แม่นยำเป็นพิกเซล โดยไม่สัมผัส DOM ตลอดกระบวนการ

การใช้งานขั้นสูง: การจัดวางข้อความทีละบรรทัดด้วยตนเอง

javascript
import { prepareWithSegments, layoutWithLines } from ‘@chenglou/pretext’

const prepared = prepareWithSegments(‘一些文本’, ’18px “Helvetica Neue”‘)
const { lines } = layoutWithLines(prepared, 320, 26)

for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i].text, 0, i * 26)
}

รัน Demo ในเครื่อง

bash git clone https://github.com/chenglou/pretext.git cd pretext bun install bun start
จากนั้นเข้าชม http://127.0.0.1:3000/demos ในเบราว์เซอร์เพื่อดูตัวอย่าง

5. สรุป

Pretext ให้ความสามารถในการ คาดการณ์ความสูงข้อความโดยไม่ต้องพึ่งพา DOM สำหรับสถานการณ์ทั่วไป เช่น การเลื่อนเสมือน วอเตอร์ฟอลล์ อินเทอร์เฟซแชท ในอดีตนักพัฒนาต้องเลือกระหว่างยอมรับต้นทุนประสิทธิภาพในการวัด หรือใช้ค่าประมาณเพื่อประนีประนอม ตอนนี้ โซลูชันที่มี ขนาด 15 KB, ไม่มี dependencies, ความแม่นยำ 100% ได้ปรากฏตัวแล้ว สามารถนำไปรวมใช้ได้โดยตรง เพื่อเพิ่มประสิทธิภาพและประสบการณ์การใช้งานของแอปพลิเคชันที่เกี่ยวข้องอย่างมีนัยสำคัญ