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

Colt McAnlis

บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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