เวลาการแสดงผล CSS และน้ำหนักในการแสดงผลหน้าเว็บ

Colt McAnlis

เกริ่นนำ

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

คำถามเชิงปรัชญา

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

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

  • สร้างชุดหน้า HTML แต่ละหน้า โดยให้แต่ละชุดมีองค์ประกอบ DOM เดียว และการเรียงสับเปลี่ยนบางพร็อพเพอร์ตี้ของ CSS ที่แนบอยู่
  • เรียกใช้สคริปต์การทำงานอัตโนมัติที่จะดำเนินการต่อไปนี้ในแต่ละหน้า
  • ตัดช่วงเวลาทั้งหมดออกไป แล้วตื่นตาไปกับตัวเลขต่างๆ (ส่วนนี้สำคัญ...)

ในการตั้งค่านี้ เราจะสร้างชุดหน้าเว็บ HTML ซึ่งแต่ละหน้าจะมีการเรียงสับเปลี่ยนคุณสมบัติและค่า CSS ที่ไม่ซ้ำกัน ตัวอย่างเช่น ไฟล์ HTML 2 ไฟล์มีดังนี้

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

และอีกข้อหนึ่งที่ซับซ้อนกว่า

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

ด้านล่างนี้เป็นตัวแปรของตัวอย่างสุดท้ายที่เราเปลี่ยนเฉพาะค่าการไล่ระดับสีแบบรัศมีเท่านั้น

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

จากนั้นแต่ละหน้าจะโหลดลงในอินสแตนซ์ที่ใหม่ของ Chrome (เพื่อให้แน่ใจว่าช่วงเวลาจะไม่อคติโดยสถานะที่ไม่มีการอัปเดตเมื่อโหลดหน้าเว็บซ้ำ) และจะนำ Skia Picture (*.SKP) มาใช้เพื่อประเมินคำสั่ง Skia ที่ใช้ในการระบายสีหน้าเว็บ เมื่อสร้างไฟล์ SKP สำหรับไฟล์ HTML แต่ละไฟล์แล้ว เราจะเรียกใช้ไฟล์อีกกลุ่มหนึ่งเพื่อพุชไฟล์ *.SKP ผ่านแอปพลิเคชัน Skia Comparison (สร้างจากซอร์สโค้ดของ Skia) ซึ่งประหยัดเวลาโดยเฉลี่ยในการแสดงผลหน้าเว็บนั้น

การประเมินข้อมูล

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

ระยะเวลาของการเรียงสับเปลี่ยนทั้งหมดในการทดสอบ

แท่งแนวตั้งแต่ละแท่งแสดงเวลาการแสดงผลของหน้าเว็บที่มีชุดค่าผสมของคุณสมบัติ CSS รายการเดียว (ขยายเป็น 100x ค่าสเกลจริงของกราฟนี้คือ 0,1.56 มิลลิวินาที) มีบรรทัดที่สวยงามมากมาย แต่ในรูปแบบนี้ถือว่าไม่มีประโยชน์ เราต้องขุดค้นข้อมูลเพื่อค้นหาแนวโน้มที่เป็นประโยชน์

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

เวลาที่ใช้ในการระบายสีองค์ประกอบที่มีพร็อพเพอร์ตี้ CSS เพียง 1 รายการ

ประการที่สอง และสิ่งที่น่าสนใจกว่าคือการรวมพร็อพเพอร์ตี้ CSS อาจทำให้มีเวลาการแสดงผลมากกว่าผลรวมของส่วนต่างๆ จากมุมมองของผู้สังเกตการณ์ ถือว่านี่เป็นเรื่องแปลกๆ ที่เราคาดหวังว่า A+B = C ไม่ใช่ 2.2C ตัวอย่างการเพิ่ม box-shadow และ border-radius-stroke คือ

ระยะเวลาของการเรียงสับเปลี่ยนทั้งหมดในการทดสอบ

สิ่งที่น่าสนใจในเรื่องนี้คือ คุณสมบัตินี้ไม่ใช่แค่พร็อพเพอร์ตี้ box-shadow เท่านั้น แต่ยังรวมถึงการเรียงสับเปลี่ยนค่าที่เฉพาะเจาะจงดังกล่าวด้วย ตัวอย่างด้านล่างแสดงการจัดกลุ่ม box-shadow : 50% และ border-radius ที่มีรูปแบบค่า

ระยะเวลาของการเรียงสับเปลี่ยนทั้งหมดในการทดสอบ

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

หาน้ำหนักในการแสดงผลหน้าเว็บ

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

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

ความคิดขั้นสุดท้าย

สิ่งที่น่าสนใจที่สุดอย่างหนึ่งเกี่ยวกับการทดลองนี้ คือช่วงเวลาจะเปลี่ยนแปลงอย่างต่อเนื่องตาม Chrome แต่ละเวอร์ชัน (หวังว่าจะได้ทำงานเร็วขึ้น ;) ซอฟต์แวร์เบราว์เซอร์เป็นพื้นที่ที่เปลี่ยนแปลงอยู่ตลอดเวลา วันนี้ช้าหรือเร็ว พรุ่งนี้อาจเร็วก็ได้ คุณสามารถนำออกจากบทความนี้เพื่อหลีกเลี่ยงการใส่ box-shadow: 1px 2px 3px 4px ลงในองค์ประกอบที่มี border-radius:5 อยู่แล้ว อย่างไรก็ตาม ประโยชน์ที่ได้คือพร็อพเพอร์ตี้ CSS ส่งผลต่อเวลาในการลงสีหน้าเว็บโดยตรง

รายการอ้างอิง