ประสิทธิภาพการแสดงผล

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

ผู้ใช้เว็บในปัจจุบันคาดหวังว่าหน้าเว็บที่เข้าชมจะมีการโต้ตอบและมีความลื่นไหล คุณจึงใช้เวลาและความพยายามลงอย่างมาก หน้าเว็บไม่ควรเพียงแค่โหลดอย่างรวดเร็ว แต่ยังตอบสนองต่อข้อมูลจากผู้ใช้อย่างรวดเร็วตลอดทั้งวงจร อันที่จริงแล้ว แง่มุมนี้ของประสบการณ์ของผู้ใช้ เป็นสิ่งที่เมตริก Interaction to Next Paint (INP) ใช้ในการวัด INP ที่ดีหมายความว่าหน้าเว็บตอบสนองต่อความต้องการของผู้ใช้ได้สม่ำเสมอและเชื่อถือได้

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

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

หมายเหตุเกี่ยวกับอัตราการรีเฟรชของอุปกรณ์

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

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

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

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

เนื่องจากจอแสดงผลทั่วไปจะรีเฟรช 60 ครั้งต่อวินาที การคำนวณสั้นๆ จะเผยให้เห็นว่าเบราว์เซอร์มีเวลา 16.66 มิลลิวินาทีในการสร้างแต่ละเฟรม แต่ในความเป็นจริง เบราว์เซอร์จะมีโอเวอร์เฮดของตัวเองสำหรับแต่ละเฟรม ดังนั้นงานทั้งหมดจะต้องเสร็จสมบูรณ์ภายใน 10 มิลลิวินาที เมื่อคุณใช้จ่ายไม่เกินงบประมาณนี้ อัตราเฟรมจะลดลงและเนื้อหาในหน้าจะเลื่อนบนหน้าจอ ปรากฏการณ์นี้มักเรียกว่า jank

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

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

ไปป์ไลน์พิกเซล

มีเรื่องหลัก 5 ประการที่คุณจำเป็นต้องทราบและใส่ใจในการทำงานในฐานะนักพัฒนาเว็บ ส่วน 5 ส่วนต่อไปนี้คือส่วนที่คุณควบคุมได้มากที่สุด และแต่ละส่วนคือจุดสำคัญในไปป์ไลน์แบบพิกเซล

ไปป์ไลน์พิกเซลเต็มรูปแบบที่มี 5 ขั้นตอน ได้แก่ JavaScript, สไตล์, เลย์เอาต์, สี และองค์ประกอบผสม
ภาพแสดงไปป์ไลน์พิกเซลแบบเต็ม
  • JavaScript: โดยทั่วไป JavaScript จะใช้ในการจัดการงานที่จะส่งผลให้เกิดการเปลี่ยนแปลงที่มองเห็นได้ในอินเทอร์เฟซผู้ใช้ เช่น อาจเป็นฟังก์ชัน animate ของ jQuery, การจัดเรียงชุดข้อมูล หรือเพิ่มองค์ประกอบ DOM ลงในหน้าเว็บ JavaScript ไม่จำเป็นต่อการทริกเกอร์การเปลี่ยนแปลงภาพแต่อย่างใด: ภาพเคลื่อนไหวของ CSS, การเปลี่ยน CSS และ Web Animations API สามารถทำให้เนื้อหาของหน้าเคลื่อนไหวได้
  • การคำนวณรูปแบบ: นี่คือกระบวนการพิจารณาว่ากฎ CSS ใดมีผลกับองค์ประกอบ HTML ใดโดยอิงจากตัวเลือกการจับคู่ เช่น .headline เป็นตัวอย่างของตัวเลือก CSS ที่ใช้กับองค์ประกอบ HTML ที่มีค่าแอตทริบิวต์ class ซึ่งมีคลาสเป็น headline จากตรงนี้ เมื่อทราบกฎแล้ว ก็จะถูกนำมาใช้ และจะคำนวณรูปแบบสุดท้ายสำหรับแต่ละองค์ประกอบ
  • การออกแบบ: เมื่อเบราว์เซอร์ทราบว่ากฎใดมีผลกับองค์ประกอบหนึ่ง ก็จะเริ่มคำนวณเรขาคณิตของหน้าเว็บได้ เช่น องค์ประกอบพื้นที่ที่ใช้ไปมากน้อยเท่าใด และตำแหน่งที่จะปรากฏบนหน้าจอ รูปแบบเลย์เอาต์ของเว็บ หมายความว่ามีองค์ประกอบหนึ่งที่ส่งผลต่อรายการอื่นๆ ได้ เช่น ความกว้างขององค์ประกอบ <body> มักส่งผลต่อขนาดองค์ประกอบย่อยไปจนถึงขนาดที่เพิ่มขึ้นและต่ำของโครงสร้าง ดังนั้นเบราว์เซอร์จึงอาจมีขั้นตอนค่อนข้างมาก
  • สี: การวาดภาพคือขั้นตอนการเติมพิกเซล โดยจะรวมถึงการเขียนข้อความ สี รูปภาพ เส้นขอบ เงา และทุกมุมมองขององค์ประกอบหลังจากคำนวณเลย์เอาต์ในหน้าเว็บแล้ว โดยปกติการวาดภาพจะลงบนพื้นผิวหลายๆ ด้าน หรือที่เรียกว่าเลเยอร์
  • ผสม: เนื่องจากส่วนต่างๆ ของหน้าเว็บอาจวาดทับหลายเลเยอร์ จึงจำเป็นต้องนำไปใช้กับหน้าจอในลำดับที่ถูกต้องเพื่อให้หน้าแสดงผลตามที่คาดไว้ ซึ่งมีความสำคัญอย่างยิ่งสำหรับองค์ประกอบที่ทับซ้อนกัน เนื่องจากความผิดพลาดอาจส่งผลให้องค์ประกอบหนึ่งปรากฏทับบนอีกองค์ประกอบหนึ่งอย่างไม่ถูกต้อง

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

คุณอาจเคยได้ยินคำว่า "แรสเตอร์" ที่ใช้กับ "paint" เพราะการวาดภาพนั้นจริงๆ แล้วเป็น 2 งาน

  1. กำลังสร้างรายการการเรียก
  2. การเติมพิกเซล

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

คุณไม่จำเป็นต้องแตะทุกส่วนของไปป์ไลน์ในทุกเฟรม อันที่จริง มี 3 วิธีที่เล่นไปป์ไลน์ตามปกติสำหรับเฟรมที่ระบุเมื่อคุณทำการเปลี่ยนแปลงภาพ ไม่ว่าจะด้วย JavaScript, CSS หรือ Web Animations API

1. JS / CSS > รูปแบบ > เลย์เอาต์ > สี > ผสม

ไปป์ไลน์พิกเซลแบบเต็ม โดยไม่มีการละเว้นขั้นตอนใดๆ

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

2. JS / CSS > รูปแบบ > สี > ผสม

ไปป์ไลน์พิกเซลที่ไม่มีขั้นตอนเลย์เอาต์

หากคุณเปลี่ยนคุณสมบัติ "paint-only" ขององค์ประกอบใน CSS เช่น พร็อพเพอร์ตี้ เช่น background-image, color หรือ box-shadow คุณไม่จำเป็นต้องอัปเดตภาพในหน้าเว็บ การละเว้นขั้นตอนเลย์เอาต์ในกรณีที่เป็นไปได้ จะช่วยหลีกเลี่ยงงานด้านเลย์เอาต์ที่มีค่าใช้จ่ายสูง ซึ่งอาจส่งผลให้เกิดความล่าช้าอย่างมากในการสร้างเฟรมถัดไป

3. JS / CSS > รูปแบบ > ผสม

ไปป์ไลน์พิกเซลที่ไม่มีเลย์เอาต์และขั้นตอนการระบายสี

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

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

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

การเพิ่มประสิทธิภาพการแสดงผลของเบราว์เซอร์

ภาพหน้าจอของหลักสูตร Udacity

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

หลักสูตรนี้เป็นหลักสูตรฟรีที่ Udacity และคุณสามารถเรียนได้ทุกเมื่อ