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

Philip Pfaffe
GitHub
Ergün Erdogmus
Ergün Erdogmus
X

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

เรามาเปรียบเทียบ DevTools เวอร์ชันปัจจุบันกับเวอร์ชันก่อนหน้ากัน

ด้านบน: Chrome เวอร์ชันล่าสุด ด้านล่าง: Chrome 121

ความแตกต่างนี้ชัดเจนเลยใช่ไหม รายละเอียดของการปรับปรุงที่สำคัญมีดังนี้

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

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

ตัวอย่างเพลงเหล่านี้มีให้ฟังแล้วไม่ใช่เหรอ

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

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

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

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

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

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

ก่อนหน้านี้เราใช้นิพจน์ทั่วไป (นิพจน์ทั่วไป) เพื่อแยกวิเคราะห์ค่าพร็อพเพอร์ตี้สําหรับการวิเคราะห์โครงสร้าง เราดูแลรักษารายการนิพจน์ทั่วไปเพื่อจับคู่กับข้อมูลบางส่วนของค่าพร็อพเพอร์ตี้ที่เราพิจารณาว่าควรตกแต่ง เช่น มีนิพจน์ที่ตรงกับสี ความยาว มุม 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 ขั้นตอนนี้หมายถึงการใช้โปรแกรมแยกวิเคราะห์สําหรับภาษาที่ไม่มีบริบท อันที่จริงแล้ว ระบบแยกวิเคราะห์ดังกล่าวมีอยู่แล้วในโค้ดเบสของ DevTools นั่นคือ Lezer ของ CodeMirror ซึ่งเป็นรากฐานของฟีเจอร์ต่างๆ เช่น การไฮไลต์ไวยากรณ์ใน CodeMirror ซึ่งเป็นเครื่องมือแก้ไขที่คุณเห็นในแผงแหล่งที่มา โปรแกรมแยกวิเคราะห์ CSS ของ Lezer ช่วยให้เราสร้างต้นไม้ไวยากรณ์ (ไม่ใช่นามธรรม) สำหรับกฎ CSS และพร้อมให้เราใช้งาน ชัยชนะ

ต้นไม้ไวยากรณ์สำหรับค่าพร็อพเพอร์ตี้ `hsl(177deg var(--saturation, 100%) 50%)` ซึ่งเป็นเวอร์ชันที่เรียบง่ายของผลลัพธ์ที่เกิดจากโปรแกรมแยกวิเคราะห์ Lezer โดยไม่มีโหนดไวยากรณ์สำหรับคอมมาและวงเล็บ

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

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

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

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

ลองดูตัวอย่างต้นไม้ไวยากรณ์จากด้านบน

ระยะที่ 1: การจับคู่จากล่างขึ้นบนในต้นไม้ไวยากรณ์

สำหรับต้นไม้นี้ ตัวจับคู่จะใช้ตามลําดับต่อไปนี้

  1. hsl(177degvar(--saturation, 100%) 50%): ก่อนอื่น เราค้นพบอาร์กิวเมนต์แรกของการเรียกฟังก์ชัน hsl ซึ่งเป็นมุมสี เราจับคู่กับตัวจับคู่มุมเพื่อให้ตกแต่งค่ามุมด้วยไอคอนมุมได้
  2. hsl(177degvar(--saturation, 100%)50%): ประการที่ 2 เราพบการเรียกฟังก์ชัน var ที่มีตัวจับคู่ 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 ซึ่งเมื่อนำมารวมกันจะสร้างการแสดงค่าพร็อพเพอร์ตี้ รวมถึงการตกแต่ง

ระยะที่ 2: การแสดงผลจากบนลงล่างบนต้นไม้ไวยากรณ์

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

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

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

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

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

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

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

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

เราพิจารณาถึงผลลัพธ์ที่ได้จากแนวทางใหม่นี้ จึงตัดสินใจที่จะเดินหน้าต่อ

ขอขอบคุณ

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

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

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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