ไม่ใช่แค่นิพจน์ทั่วไป: การปรับปรุงการแยกวิเคราะห์ค่า 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) สามารถเสียบเข้ากับกระบวนการแสดงผลรอบๆ ได้อย่างราบรื่น ซึ่งทำให้เรามีตัวเลือกในการพอร์ตโปรแกรมจับคู่และโปรแกรมแสดงผลเป็นคู่ๆ และเปลี่ยนทีละรายการ

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

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

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

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

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

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

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

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

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

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

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

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