ฉันยอมรับว่าฉันไม่ได้คิดถึงคำถามนี้บ่อยนัก... CSS ที่เราเขียนมีประสิทธิภาพเพียงใด และเบราว์เซอร์แสดงผลได้เร็วแค่ไหน
นี่คือสิ่งที่นักพัฒนาเบราว์เซอร์ควรกังวล (หน้าเว็บโหลดเร็วขึ้น และผู้ใช้จะมีความสุขมากขึ้น) Mozilla มีบทความ เกี่ยวกับแนวทางปฏิบัติที่ดีที่สุด แน่นอนว่า Google ก็มีความกังวลอย่างมากเกี่ยวกับปัญหานี้เช่นกัน และพวกเขาก็ยังมีบทความดังกล่าวด้วย: ปรับการแสดงผลเบราว์เซอร์ให้เหมาะสม
มาดูสิ่งที่พวกเขาสนับสนุนเป็นหลัก แล้วหารือเกี่ยวกับการปฏิบัติจริงของพวกเขา
จากขวาไปซ้าย
หลักการสำคัญของวิธีที่เบราว์เซอร์อ่านตัวเลือก CSS ของคุณก็คือให้อ่านจากขวาไปซ้าย ซึ่งหมายความว่าสำหรับตัวเลือกเช่น ul > li a[title="home"], a[title="home"] จะถูกอ่านก่อน ส่วนนี้มักจะเรียกว่า "ตัวเลือกคีย์" (หรือจะเรียกว่า "ตัวเลือกเป้าหมาย" ก็ได้ -_-!) ส่วนสุดท้ายของตัวเลือกก็คือป้ายกำกับที่เลือกเช่นกัน
ID นั้นมีประสิทธิภาพมากที่สุด ส่วน Universal นั้นช้าที่สุด
ตัวเลือกเป้าหมายมีสี่ตัวเลือก ได้แก่ ID คลาส แท็ก และอักขระสากล มาดูประสิทธิภาพตามลำดับกัน:
#main-navigation { } /* ID (เร็วที่สุด) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* คลาส */
ul li a.current { } /* คลาส *
ul { } /* แท็ก */
ul li a { } /* แท็ก */
* { } /* สากล (ช้าที่สุด) */
#content [title='home'] /* Universal */ จากนั้นเราจะรวมแนวคิดของตัวเลือกจากขวาไปซ้ายและตัวเลือกเป้าหมายเข้าด้วยกัน และเราจะรู้ได้ว่าตัวเลือกต่อไปนี้ไม่ได้มีประสิทธิภาพ:
#main-nav > li { } /* ดูเร็วแต่จริงๆ แล้วช้ามาก*/
แม้ว่าจะดูสับสนเล็กน้อย... เนื่องจาก ID นั้นมีประสิทธิภาพมากที่สุด เบราว์เซอร์จึงสามารถค้นหา li ด้วย ID ได้อย่างรวดเร็ว แต่ความจริงก็คือแท็ก li จะถูกอ่านก่อน
อย่าแก้ไขด้วยแท็ก
อย่าทำเช่นนี้จนคุณตาย:
ul#main-การนำทาง { }
บัตรประจำตัวมีเอกลักษณ์เฉพาะตัว ดังนั้นจึงไม่จำเป็นต้องตกแต่งด้วยแท็ก ซึ่งจะทำให้มีประสิทธิภาพน้อยลง
อย่าใช้มันเพื่อแก้ไขคลาสหากคุณสามารถหลีกเลี่ยงได้ class ไม่ได้มีเอกลักษณ์เฉพาะตัว ดังนั้นตามทฤษฎีแล้ว คุณสามารถใช้มันในแท็กต่างๆ ได้ หากคุณต้องการ คุณสามารถใช้แท็กเพื่อควบคุมสไตล์ต่างๆ ได้ ดังนั้นคุณอาจต้องแก้ไขแท็ก (เช่น li.first) แต่มีเพียงไม่กี่คนที่ทำเช่นนี้ ดังนั้นจึงไม่ต้องทำเช่นนั้น
ไม่มีอะไรจะเลวร้ายไปกว่าการใช้ตัวเลือกสืบทอด
เดวิดไฮแอท:
ตัวเลือกสืบทอดเป็นตัวเลือกที่แพงที่สุดใน CSS และมีราคาแพงมาก โดยเฉพาะเมื่อวางไว้หลังแท็กและสากล
เช่นเดียวกับสิ่งต่อไปนี้ มันเป็นมะเร็งของประสิทธิภาพโดยสิ้นเชิง:
html เนื้อความ ul li a { }
จะมีประสิทธิภาพมากกว่าสำหรับตัวเลือกที่จะแสดงผลมากกว่าตัวเลือกที่จะแสดงผล
ฉันไม่แน่ใจว่ามีหลักฐานที่ดีกว่านี้หรือไม่ เพราะหากคุณมีตัวเลือกจำนวนมากที่ไม่สามารถพบได้ในสไตล์ชีต CSS อาจดูแปลกประหลาด แต่สิ่งสำคัญคือต้องทราบว่า สิทธิ์ไปซ้าย เพื่อถอดความตัวเลือก เมื่อหาไม่เจอก็หยุดพยายาม แต่หากพบก็ต้องพยายามอธิบายให้มากขึ้น
ลองคิดดูว่าเหตุใดคุณจึงเขียนตัวเลือกเช่นนี้
ลองคิดดู:
#main-navigation li a { ตระกูลแบบอักษร: จอร์เจีย, Serif;
คุณอาจไม่จำเป็นต้องเริ่มต้นด้วยตัวเลือก (หากคุณเพียงต้องการเปลี่ยนแบบอักษร) นี่อาจมีประสิทธิภาพมากกว่า:
#main-navigation { ตระกูลแบบอักษร: จอร์เจีย, Serif;
การปฏิบัติจริง
สลักบทความ Mozilla ที่กล่าวถึงก่อนหน้านี้ด้วยหรือไม่ สิบปีแล้ว. ความจริงก็คือ: คอมพิวเตอร์ทำงานช้ากว่าสิบปีก่อน (ไม่ใช่ว่าฉันเข้าใจผิดหรือผู้เขียนต้องการบอกว่าเว็บในปัจจุบันมีความซับซ้อนมากขึ้นเรื่อย ๆ ) ฉันรู้สึกว่าสิ่งนี้ดูเหมือนจะได้รับการพิจารณาอย่างจริงจังมากขึ้นในตอนนั้น เมื่อสิบปีที่แล้ว ฉันเป็นเด็กหนุ่มหล่อวัย 21 ปี แน่นอนว่าฉันไม่คิดว่าจะรู้อะไรเกี่ยวกับ CSS ที่นั่นเลย ดังนั้นฉันจึงไม่สามารถบอกคุณเกี่ยวกับสถานการณ์ก่อนหน้านี้ได้...แต่ฉันคิดว่าเหตุผลที่ว่าทำไมปัญหาเรื่องประสิทธิภาพในการเรนเดอร์จึงไม่ได้รับการพิจารณาอย่างจริงจัง ก็เพราะมันไม่เคยเป็นปัญหาใหญ่เลย
ต่อไปนี้เป็นความคิดเห็นบางส่วนของฉัน: ไม่ว่าจะอย่างไรก็ตาม สิ่งที่กล่าวมาข้างต้นก็สมเหตุสมผล และคุณสามารถทำได้ตามวิธีการข้างต้น เนื่องจากไม่จำกัดการผลิต CSS ของคุณ แต่คุณไม่จำเป็นต้องดันทุรังเกินไป หากคุณเป็นคนที่ชอบความสมบูรณ์แบบและไม่เคยพิจารณาเรื่องนั้นมาก่อน ถึงเวลาแล้วที่จะทบทวนสไตล์บางส่วนที่คุณเขียนไว้ก่อนหน้านี้ เพื่อดูว่ายังมีสิ่งที่ต้องปรับปรุงอีกหรือไม่ หากคุณไม่พบว่าเว็บไซต์ของคุณแสดงผลช้าอย่างเห็นได้ชัด ก็อย่าไปสนใจมันมากเกินไป เพียงให้ความสนใจกับมันให้มากขึ้นในการทำงานในอนาคต
ใช้งานได้จริงอย่างรวดเร็วและเป็นศูนย์
เรารู้ว่า ID เป็นตัวเลือกที่มีประสิทธิภาพที่สุด เมื่อคุณต้องการเพิ่มความเร็วในการเรนเดอร์ให้สูงสุด คุณอาจกำหนดค่า ID สำหรับแต่ละแท็ก จากนั้นใช้ ID เหล่านี้ในการเขียนสไตล์ นั่นจะเร็วมากและไร้สาระมาก ผลลัพธ์ที่ได้คือความหมายแย่มากและยากต่อการดูแลรักษา คุณไม่ควรเห็นสิ่งนี้เกิดขึ้นแม้แต่ในแกนกลาง ฉันคิดว่านี่เป็นเครื่องเตือนใจว่าอย่าละทิ้งความหมายและการบำรุงรักษาสำหรับ CSS ที่มีประสิทธิภาพ
ขอขอบคุณ Jason Beaudoin ที่ส่งอีเมลถึงฉันเกี่ยวกับแนวคิดนี้ หากใครรู้เพิ่มเติมเกี่ยวกับสิ่งนี้ หรือหากคุณมีเคล็ดลับเพิ่มเติมที่คุณใช้ในแนวทางเดียวกันนี้ มาฟังกันดีกว่า
อย่างไรก็ตาม เนื่องจากไลบรารี JavaScript จำนวนมากใช้ตัวเลือก CSS สิ่งที่กล่าวถึงข้างต้นยังคงใช้งานได้ ตัวเลือก ID ยังคงเร็วที่สุด และตัวเลือกที่สืบทอดและสิ่งที่คล้ายกันจะช้ากว่า
PS : มาดูกันว่าใครจะกล้าใช้ตัวเลือกลูกหลานมากกว่า N ตัว - - นอกจากนี้ยังมีผู้ที่คัดค้านการใช้ ID ของฉันด้วย - - ว้าว ฮ่าๆ - -