ไม่ใช่แค่นิพจน์ทั่วไป: การปรับปรุงการแยกวิเคราะห์ค่า CSS ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Philip Pfaffe

Ergün Erdogmus

คุณสังเกตเห็นคุณสมบัติ CSS ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไหม หากเมื่อเร็วๆ นี้แท็บสไตล์ดูสะอาดตากว่าเดิม การอัปเดตเหล่านี้ระหว่าง Chrome 121 และ 128 เป็นผลมาจากการปรับปรุงวิธีที่เราแยกวิเคราะห์และนำเสนอค่า CSS อย่างเห็นได้ชัด ในบทความนี้ เราจะอธิบายรายละเอียดทางเทคนิคของการเปลี่ยนรูปแบบนี้ โดยเปลี่ยนจากระบบจับคู่นิพจน์ทั่วไปไปเป็นโปรแกรมแยกวิเคราะห์ที่มีประสิทธิภาพมากขึ้น

มาเปรียบเทียบเครื่องมือสำหรับนักพัฒนาเว็บในปัจจุบันกับเวอร์ชันก่อนหน้ากัน

ค่อนข้างแตกต่างใช่ไหม รายละเอียดของการเพิ่มประสิทธิภาพที่สำคัญมีดังนี้

• color-mix ตัวอย่างที่มีประโยชน์แสดงอาร์กิวเมนต์สี 2 รายการภายในฟังก์ชัน color-mix
• pink ตัวอย่างสีที่คลิกได้สำหรับสีที่มีชื่อ pink ให้คลิกเพื่อเปิดตัวเลือกสีเพื่อให้ปรับแต่งได้อย่างง่ายดาย
• var(--undefined, [fallback value]) ปรับปรุงการจัดการตัวแปรที่ไม่ได้กำหนด โดยตัวแปรที่ไม่ได้กำหนดเป็นสีเทาและค่าสำรองที่ใช้งานอยู่ (ในกรณีนี้คือสี HSL) ซึ่งแสดงพร้อมตัวอย่างสีที่คลิกได้
• hsl(…): ตัวอย่างสีที่คลิกได้อีกอย่างหนึ่งสำหรับฟังก์ชันสี hsl ช่วยให้เข้าถึงตัวเลือกสีได้อย่างรวดเร็ว
• 177deg: นาฬิกาวัดมุมที่คลิกได้ซึ่งช่วยให้คุณลากและแก้ไขค่ามุมได้แบบอินเทอร์แอกทีฟ
• var(--saturation, …): ลิงก์ที่คลิกได้ซึ่งนำไปยังคำจำกัดความของพร็อพเพอร์ตี้ที่กำหนดเอง ซึ่งช่วยให้ง่ายต่อการข้ามไปยังการประกาศที่เกี่ยวข้อง

สิ่งที่เห็นต่างกันอย่างเห็นได้ชัด เพื่อให้บรรลุเป้าหมายนี้ เราต้องสอนให้เครื่องมือสำหรับนักพัฒนาเว็บเข้าใจค่าพร็อพเพอร์ตี้ CSS ได้ดีกว่าเดิมมาก

หากไม่มีตัวอย่างเหล่านี้แล้ว

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

นั่นเป็นเพราะระบบวิเคราะห์มูลค่าต่างๆ เพิ่มขึ้นเรื่อยๆ อย่างเป็นธรรมชาติตั้งแต่วันแรกของเครื่องมือสำหรับนักพัฒนาเว็บ อย่างไรก็ตาม ระบบนี้ยังไม่สามารถรองรับฟีเจอร์ใหม่ๆ ที่ยอดเยี่ยมล่าสุดที่ได้รับจาก CSS รวมถึงความซับซ้อนของภาษาที่เพิ่มขึ้นที่สอดคล้องกัน ระบบจำเป็นต้องมีการออกแบบใหม่อย่างเต็มรูปแบบเพื่อให้ก้าวทันวิวัฒนาการ และนั่นคือสิ่งที่เราทำ!

วิธีประมวลผลค่าพร็อพเพอร์ตี้ CSS

ในเครื่องมือสำหรับนักพัฒนาเว็บ กระบวนการแสดงผลและตกแต่งพร็อพเพอร์ตี้ในแท็บรูปแบบแบ่งออกเป็น 2 ระยะ ดังนี้

1. การวิเคราะห์โครงสร้าง ระยะแรกนี้จะวิเคราะห์การประกาศพร็อพเพอร์ตี้เพื่อระบุองค์ประกอบสําคัญและความสัมพันธ์ ตัวอย่างเช่น ในการประกาศ border: 1px solid red ระบบจะถือว่า 1px เป็นความยาว solid เป็นสตริง และ red เป็นสี
2. การแสดงภาพ จากการวิเคราะห์โครงสร้าง ระยะการแสดงผลจะเปลี่ยนคอมโพเนนต์เหล่านี้เป็นภาพแทนแบบ HTML ซึ่งจะช่วยเพิ่มความสมบูรณ์ให้กับข้อความของที่พักที่แสดงด้วยองค์ประกอบแบบอินเทอร์แอกทีฟและสัญลักษณ์ที่เป็นภาพ เช่น ค่าสี red จะแสดงผลด้วยไอคอนสีที่คลิกได้ ซึ่งเมื่อคลิกจะแสดงตัวเลือกสีเพื่อให้คุณแก้ไขได้ง่ายๆ

นิพจน์ทั่วไป

ก่อนหน้านี้ เราอาศัยนิพจน์ทั่วไป (regexes) ในการตัดค่าพร็อพเพอร์ตี้สำหรับการวิเคราะห์เชิงโครงสร้าง เราคงรายการนิพจน์ทั่วไปให้ตรงกับค่าบิตของค่าพร็อพเพอร์ตี้ที่เราพิจารณาตกแต่ง ตัวอย่างเช่น มีนิพจน์ที่ตรงกับสี ความยาว มุม นิพจน์ย่อยที่ซับซ้อนขึ้นของ CSS เช่น การเรียกฟังก์ชัน var ฯลฯ เราสแกนข้อความจากซ้ายไปขวาเพื่อทำการวิเคราะห์ค่า โดยมองหานิพจน์แรกจากรายการที่ตรงกับข้อความส่วนถัดไปอย่างต่อเนื่อง

แม้ว่าส่วนใหญ่แล้ว วิธีนี้จะทำงานได้ดี แต่จำนวนกรณีก็ยังคงไม่เพิ่มขึ้นอย่างต่อเนื่อง ตลอดหลายปีที่ผ่านมา เราได้รับรายงานข้อบกพร่องจำนวนหนึ่งที่การจับคู่ตอบสนองไม่ถูกต้องนัก ในขณะที่เราแก้ไขปัญหานั้น การแก้ไขบางอย่างก็ง่ายมาก แต่บางวิธีก็ทำได้ยากมาก เราต้องทบทวนแนวทางในการรักษาหนี้ทางเทคนิคให้อยู่นิ่งๆ มาดูปัญหาบางส่วนกัน

color-mix() ที่ตรงกัน

นิพจน์ทั่วไปที่เราใช้สำหรับฟังก์ชัน color-mix() เป็นดังนี้

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

ซึ่งตรงกับไวยากรณ์:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

ลองเรียกใช้ตัวอย่างต่อไปนี้เพื่อแสดงภาพรายการที่ตรงกัน

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

ตัวอย่างที่เข้าใจง่ายกว่าจะทำงานได้ดีอยู่แล้ว อย่างไรก็ตาม ในตัวอย่างที่ซับซ้อนมากขึ้น การจับคู่ของ <firstColor> คือ hsl(177deg var(--saturation และการจับคู่ <secondColor> คือ 100%) 50%)) ซึ่งไม่มีความหมายโดยสิ้นเชิง

เราทราบดีว่านี่เป็นปัญหา เพราะ CSS ในภาษาที่เป็นทางการก็ไม่ใช่ปกติ เราจึงรวมการจัดการพิเศษเพื่อจัดการกับอาร์กิวเมนต์ฟังก์ชันที่ซับซ้อนขึ้น เช่น ฟังก์ชัน var อย่างไรก็ตาม ดังที่คุณเห็นในภาพหน้าจอแรก นั่นยังใช้งานไม่ได้ในทุกกรณี

tan() ที่ตรงกัน

หนึ่งในข้อบกพร่องที่มีการรายงานที่ตลกขำขันคือ ฟังก์ชันตรีโกณมิติ tan() นิพจน์ทั่วไปที่เราใช้ในการจับคู่สีมีนิพจน์ย่อย \b[a-zA-Z]+\b(?!-) สำหรับสีที่มีชื่อที่ตรงกัน เช่น คีย์เวิร์ด red จากนั้นเราก็ตรวจสอบว่าส่วนที่ตรงกันนั้นเป็นสีที่มีชื่อจริงไหม แล้วลองทายดูสิว่า tan นั้นเป็นสีที่มีชื่อหรือไม่ เราจึงตีความนิพจน์ tan() ว่าเป็นสีผิด

var() ที่ตรงกัน

มาดูตัวอย่างอีกตัวอย่างหนึ่งกัน ฟังก์ชัน var() ที่มีฟังก์ชันสำรองซึ่งมีการอ้างอิง var() อื่นๆ คือ var(--non-existent, var(--margin-vertical))

นิพจน์ทั่วไปของเราสำหรับ var() จะตรงกับค่านี้ ยกเว้นการหยุดการจับคู่ที่วงเล็บปิดแรก ดังนั้นข้อความด้านบนจึงตรงกับ var(--non-existent, var(--margin-vertical) นี่เป็นข้อจำกัดของตำราเรียนเกี่ยวกับการจับคู่นิพจน์ทั่วไป โดยพื้นฐานแล้ว ภาษาที่ต้องใช้วงเล็บที่ตรงกันนั้นมักไม่ใช่ภาษาปกติ

การเปลี่ยนไปใช้โปรแกรมแยกวิเคราะห์ CSS

เมื่อการวิเคราะห์ข้อความโดยใช้นิพจน์ทั่วไปหยุดทำงาน (เนื่องจากภาษาที่วิเคราะห์ไม่ใช่ภาษาปกติ) จะมีขั้นตอนถัดไปตามรูปแบบบัญญัติ นั่นคือใช้โปรแกรมแยกวิเคราะห์สำหรับไวยากรณ์ที่มีประเภทสูงขึ้น สำหรับ CSS นั่นหมายถึงโปรแกรมแยกวิเคราะห์สำหรับภาษาที่ไม่มีบริบท อันที่จริงแล้ว มีระบบโปรแกรมแยกวิเคราะห์ดังกล่าวอยู่แล้วใน Codebase ของเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งก็คือ Lezer ของ CodeMirror ซึ่งเป็นรากฐานของการไฮไลต์ไวยากรณ์ใน CodeMirror ซึ่งเป็นโปรแกรมแก้ไขที่คุณพบในแผงแหล่งที่มา เป็นต้น โปรแกรมแยกวิเคราะห์ CSS ของ Lezer ช่วยให้เราสร้างแผนผังไวยากรณ์ (ไม่ใช่นามธรรม) สำหรับกฎ CSS และพร้อมที่จะใช้งาน ชัยชนะ

ยกเว้นในกรณีแรกแล้ว เราพบว่าไม่สามารถย้ายข้อมูลจากการจับคู่ตามนิพจน์ทั่วไปไปเป็นการจับคู่ตามโปรแกรมแยกวิเคราะห์โดยตรงได้ โดยทั้ง 2 แนวทางนี้ทำงานจากทิศทางที่ตรงข้ามกัน เมื่อจับคู่ค่ากับนิพจน์ทั่วไป เครื่องมือสำหรับนักพัฒนาเว็บจะสแกนอินพุตจากซ้ายไปขวาและพยายามหารายการที่ตรงกันแรกสุดจากรายการรูปแบบที่มีลำดับ ด้วยโครงสร้างไวยากรณ์ การจับคู่จะเริ่มต้นจากด้านล่างขึ้นบน เช่น การวิเคราะห์อาร์กิวเมนต์ของการเรียกก่อน ก่อนที่จะพยายามจับคู่การเรียกฟังก์ชัน เปรียบเสมือนการประเมินนิพจน์ทางคณิตศาสตร์ โดยเริ่มจากการพิจารณานิพจน์ที่อยู่ในวงเล็บ ต่อด้วยโอเปอเรเตอร์การคูณ และโอเปอเรเตอร์บวก ในการจัดเฟรมนี้ การจับคู่ตามนิพจน์ทั่วไปจะสอดคล้องกับการประเมินนิพจน์ทางคณิตศาสตร์จากซ้ายไปขวา เราไม่อยากเขียนทั้งระบบการจับคู่ใหม่ตั้งแต่ต้น เพราะตอนนี้มีคู่ตัวจับคู่และโหมดแสดงภาพ 15 คู่ที่มีโค้ดเป็นพันๆ บรรทัด ทำให้เราไม่อาจจัดส่งได้ในเกณฑ์เดียว

เราจึงคิดโซลูชันที่ช่วยให้เราทำการเปลี่ยนแปลงเพิ่มขึ้นได้ ซึ่งเราจะอธิบายต่อไปนี้อย่างละเอียด กล่าวโดยสรุปคือ เราใช้วิธีแบบ 2 เฟส แต่ในช่วงแรกเราจะพยายามจับคู่นิพจน์ย่อยจากด้านล่างขึ้นบน (จึงเสียหายตามการไหลเวียนของนิพจน์ทั่วไป) และในขั้นตอนที่ 2 เราจะแสดงผลจากด้านบน ในทั้ง 2 ระยะ เราสามารถใช้ตัวจับคู่และการแสดงภาพที่อิงตามนิพจน์ทั่วไปที่มีอยู่ได้ โดยไม่มีการเปลี่ยนแปลงในทางปฏิบัติ เราจึงย้ายข้อมูลได้ทีละอย่าง

ระยะที่ 1: การจับคู่จากล่างขึ้นบน

สำหรับเฟสแรกนั้นมากหรือน้อย แต่จะทำตามที่ระบุในหน้าปกเพลงเท่านั้น เราเลื่อนดูต้นไม้ตามลำดับจากล่างขึ้นบน และพยายามจับคู่นิพจน์ย่อยที่โหนดต้นไม้ไวยากรณ์แต่ละโหนดที่เราเข้าชม หากต้องการจับคู่นิพจน์ย่อยที่เฉพาะเจาะจง ตัวจับคู่สามารถใช้นิพจน์ทั่วไปเหมือนที่ใช้ในระบบที่มีอยู่ ตั้งแต่เวอร์ชัน 128 เป็นต้นมา เรายังคงมีอยู่ในบางกรณี เช่น สำหรับความยาวการจับคู่ หรือเครื่องมือจับคู่จะวิเคราะห์โครงสร้างของแผนผังย่อยที่รูทที่โหนดปัจจุบันก็ได้ ซึ่งช่วยให้สามารถตรวจจับข้อผิดพลาดทางไวยากรณ์และบันทึกข้อมูลเชิงโครงสร้างไปพร้อมๆ กัน

พิจารณาตัวอย่างแผนผังไวยากรณ์จากด้านบน

สำหรับโครงสร้างนี้ เครื่องมือจับคู่ของเราจะมีผลตามลำดับต่อไปนี้

1. hsl(177degvar(--saturation, 100%) 50%): ก่อนอื่น เราค้นพบอาร์กิวเมนต์แรกของการเรียกฟังก์ชัน hsl ซึ่งก็คือมุมโทนสี เราจับคู่กับเครื่องมือจับคู่มุมเพื่อที่เราจะได้ตกแต่งค่ามุมด้วยไอคอนมุม
2. hsl(177degvar(--saturation, 100%)50%): อย่างที่ 2 เราค้นพบการเรียกฟังก์ชัน var ที่มีตัวจับคู่ตัวแปร สำหรับการโทรในลักษณะดังกล่าว หลักๆ แล้วเราต้องการทำ 2 อย่างคือ
   • ค้นหาการประกาศของตัวแปรและคํานวณค่าของตัวแปร จากนั้นเพิ่มลิงก์และป๊อปอัปไปยังชื่อตัวแปรเพื่อเชื่อมต่อตามลำดับ
   • ตกแต่งการโทรด้วยไอคอนสี ถ้าค่าที่คำนวณเป็นสี มีอีกเรื่องที่ 3 ที่เราจะพูดถึงในภายหลัง
3. hsl(177deg var(--saturation, 100%) 50%): สุดท้าย เราจะจับคู่นิพจน์การเรียกใช้สำหรับฟังก์ชัน hsl เพื่อตกแต่งด้วยไอคอนสี

นอกจากการค้นหานิพจน์ย่อยที่เราต้องการตกแต่งแล้ว ยังมีฟีเจอร์ที่ 2 ที่เรากำลังใช้งานอยู่โดยเป็นส่วนหนึ่งของกระบวนการจับคู่ โปรดทราบว่าในขั้นตอนที่ 2 เราบอกว่าเราจะค้นหาค่าที่คำนวณไว้สำหรับชื่อตัวแปรหนึ่ง อันที่จริง เราก้าวไปอีกขั้นและกระจายผลลัพธ์ไปยังต้นไม้ ไม่ใช่แค่ตัวแปร แต่รวมถึงค่าสำรองด้วย รับประกันได้เลยว่าเมื่อเข้าชมโหนดฟังก์ชัน var จะมีการเข้าชมโหนดย่อยของโหนดดังกล่าวก่อน เราจึงรู้ผลลัพธ์ของฟังก์ชัน var ที่อาจปรากฏในค่าสำรอง เราจึงสามารถแทนที่ฟังก์ชัน var ด้วยผลลัพธ์ได้ทันทีได้อย่างง่ายดายและมีค่าใช้จ่ายเพียงเล็กน้อย ทำให้เราตอบคําถามเล็กๆ น้อยๆ ได้ เช่น "ผลลัพธ์ของ var นี้ทำให้เกิดสี" อย่างที่ทำในขั้นตอนที่ 2 ไหม

ระยะที่ 2: การแสดงผลจากด้านบน

สำหรับเฟสที่ 2 เราจะกลับทิศทาง นำผลการจับคู่จากเฟส 1 มาแสดงผลต้นไม้เป็น HTML โดยข้ามผ่านตามลำดับจากบนลงล่าง สำหรับโหนดที่เข้าชมแต่ละรายการ เราจะตรวจสอบว่าโหนดนั้นตรงกันหรือไม่ และหากใช่ ให้เรียกใช้โหมดแสดงภาพที่ตรงกันของเครื่องมือจับคู่ เราหลีกเลี่ยงความจำเป็นในการจัดการโหนดที่มีเพียงข้อความ (เช่น NumberLiteral "50%") โดยรวมตัวจับคู่และโหมดแสดงภาพเริ่มต้นสำหรับโหนดข้อความ โหมดแสดงภาพจะแสดงเพียงโหนด HTML เมื่อนำมารวมกันแล้วจะแสดงผลค่าพร็อพเพอร์ตี้รวมถึงการตกแต่ง

สำหรับตัวอย่างต้นไม้ ลำดับในการแสดงค่าพร็อพเพอร์ตี้มีดังนี้

1. ไปที่การเรียกใช้ฟังก์ชัน hsl เนื่องจากตรงกันทั้งหมด ดังนั้นให้เรียกใช้โหมดแสดงภาพฟังก์ชันสี โดยมี 2 สิ่งต่อไปนี้
   • คำนวณค่าสีจริงโดยใช้กลไกการแทนที่ทันทีสำหรับอาร์กิวเมนต์ var แล้ววาดไอคอนสี
   • แสดงผลรายการย่อยของ CallExpression ซ้ำๆ วิธีนี้จะดูแลการแสดงภาพชื่อฟังก์ชัน วงเล็บ และคอมมา ซึ่งเป็นแค่ข้อความเท่านั้น
2. ไปที่อาร์กิวเมนต์แรกของการเรียก hsl เนื่องจากตรงกัน ดังนั้นให้เรียกโหมดแสดงภาพมุม ซึ่งจะวาดไอคอนมุมและข้อความของมุม
3. ไปที่อาร์กิวเมนต์ที่ 2 ซึ่งเป็นการเรียก var ตรงกันทั้งหมด ดังนั้นให้เรียก var renderer ซึ่งแสดงผลดังนี้
   • ข้อความ var( ที่ด้านหน้า
   • ชื่อตัวแปรและตกแต่งด้วยลิงก์ไปยังคำจำกัดความของตัวแปร หรือใส่ข้อความสีเทาเพื่อระบุว่าไม่ได้กำหนด รวมทั้งเพิ่มหน้าต่างป๊อปโอเวอร์ให้กับตัวแปรเพื่อแสดงข้อมูลเกี่ยวกับค่าของตัวแปร
   • คอมมาแล้วแสดงผลค่าสำรองแบบวนซ้ำ
   • วงเล็บปิด
4. ไปที่อาร์กิวเมนต์สุดท้ายของการเรียกใช้ hsl ข้อความไม่ตรงกัน โปรดส่งออกเนื้อหาข้อความ

คุณสังเกตเห็นไหมว่าในอัลกอริทึมนี้ การแสดงผลจะควบคุมวิธีแสดงผลโหนดย่อยของโหนดที่ตรงกันได้อย่างสมบูรณ์ การแสดงภาพเด็กซ้ำๆ เป็นการดำเนินการเชิงรุก เคล็ดลับนี้ทำให้สามารถย้ายข้อมูลแบบเป็นขั้นตอนจากการแสดงผลตามนิพจน์ทั่วไปไปยังการแสดงผลตามไวยากรณ์ต้นไม้ สำหรับโหนดที่จับคู่ด้วยนิพจน์ทั่วไปเดิม ตัวแสดงผลที่เกี่ยวข้องสามารถใช้รูปแบบเดิมได้ ในคำศัพท์แผนผังไวยากรณ์ มันจะทำหน้าที่แสดงภาพต้นไม้ทั้งหมดและผลลัพธ์ (โหนด HTML) สามารถเสียบเข้ากับกระบวนการแสดงผลโดยรอบได้เป็นอย่างดี วิธีนี้ช่วยให้เรามีตัวเลือกในการย้ายตัวจับคู่และโหมดแสดงภาพเป็นคู่กัน และสลับออกทีละรายการ

ฟีเจอร์ที่ยอดเยี่ยมอีกอย่างหนึ่งของโหมดแสดงภาพที่ควบคุมการแสดงผลของโหนดย่อยของโหนดที่ตรงกันคือ โหมดนี้ช่วยให้เราสามารถให้เหตุผลเกี่ยวกับทรัพยากร Dependency ระหว่างไอคอนที่เรากำลังเพิ่มได้ ในตัวอย่างข้างต้น สีที่ฟังก์ชัน hsl สร้างจะขึ้นอยู่กับค่าโทนสีของผลิตภัณฑ์อย่างชัดเจน ซึ่งหมายความว่าสีที่แสดงโดยไอคอนสีจะขึ้นอยู่กับมุมที่แสดงโดยไอคอนมุม หากผู้ใช้เปิดเครื่องมือแก้ไขมุมผ่านไอคอนดังกล่าวและแก้ไขมุม เราจึงอัปเดตสีของไอคอนสีแบบเรียลไทม์ได้โดยทำดังนี้

ดังที่คุณเห็นในตัวอย่างด้านบน เราใช้กลไกนี้ในการจับคู่ไอคอนแบบอื่นๆ ด้วยเช่นกัน เช่น สำหรับ color-mix() และช่องสี 2 ช่องสี หรือฟังก์ชัน var ที่แสดงเป็นสีสำรอง

ผลกระทบต่อประสิทธิภาพ

เมื่อเจาะลึกปัญหานี้เพื่อปรับปรุงความเสถียรและแก้ไขปัญหาที่เกิดเป็นเวลานาน เราคาดหวังว่าประสิทธิภาพจะถดถอยลงเนื่องจากเราเริ่มใช้โปรแกรมแยกวิเคราะห์ที่สมบูรณ์ เพื่อทำการทดสอบ เราได้สร้างการเปรียบเทียบที่แสดงผลการประกาศพร็อพเพอร์ตี้ประมาณ 3, 500 รายการ และสร้างโปรไฟล์ทั้งเวอร์ชันที่อิงตามนิพจน์ทั่วไปและตามโปรแกรมแยกวิเคราะห์ที่มีการควบคุม 6 เท่าในเครื่อง M1

อย่างที่คาดไว้ วิธีการแบบแยกวิเคราะห์นี้ช้ากว่าการใช้นิพจน์ทั่วไป 27% สําหรับกรณีดังกล่าว วิธีการที่ใช้นิพจน์ทั่วไปใช้เวลา 11 วินาทีในการแสดงผล และวิธีที่ใช้โปรแกรมแยกวิเคราะห์ใช้เวลา 15 วินาทีในการแสดงผล

เมื่อพิจารณาถึงความสําเร็จที่เราได้รับจากแนวทางใหม่นี้ แล้วก็ตัดสินใจที่จะเดินหน้าต่อไป

กิตติกรรมประกาศ

ขอแสดงความขอบคุณอย่างสุดซึ้งต่อ Sofia Emelianova และ Jecelyn Yeen ที่ให้ความช่วยเหลืออันมีค่ายิ่งสำหรับการแก้ไขโพสต์นี้

ดาวน์โหลดเวอร์ชันตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้

ติดต่อทีม Chrome DevTools

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ

• ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตที่ @ChromeDevTools
• แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ