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

Colt McAnlis

บทนำ

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

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

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

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

  • สร้างชุดหน้า HTML แต่ละหน้า โดยแต่ละหน้าจะมีองค์ประกอบ DOM รายการเดียวและพร็อพเพอร์ตี้ CSS บางรายการที่แนบมา
  • เรียกใช้สคริปต์การทำงานอัตโนมัติซึ่งจะทําสิ่งต่อไปนี้สําหรับแต่ละหน้า
    • เปิด Chrome
    • โหลดหน้าเว็บ
    • สร้าง Skia Picture สำหรับหน้าเว็บ
    • เรียกใช้รูปภาพ Skia แต่ละรูปที่ถ่ายผ่าน Skia Benchmark เพื่อดูเวลา
  • แสดงข้อมูลเวลาทั้งหมดและประหลาดใจกับตัวเลข (ส่วนนี้สำคัญ…)

ด้วยการตั้งค่านี้ เราจะสร้างชุดของหน้า 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>

ด้านล่างนี้คือตัวอย่างที่เปลี่ยนแปลงจากตัวอย่างล่าสุด ซึ่งเราเปลี่ยนเฉพาะค่า radial-gradient

<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 (*.SKP) ไปใช้ประเมินว่าใช้คําสั่ง Skia ใดในการวาดหน้าเว็บ เมื่อสร้างไฟล์ SKP สำหรับไฟล์ HTML แต่ละไฟล์แล้ว เราจะเรียกใช้กลุ่มอื่นเพื่อพุชไฟล์ *.SKP ผ่านแอปพลิเคชันการเปรียบเทียบของ Skia (สร้างจากซอร์สโค้ด Skia) ซึ่งลดเวลาเฉลี่ยที่ใช้ในการแสดงผลหน้านั้น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สรุปความคิดรอบสุดท้าย

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

ข้อมูลอ้างอิง