ผู้ใช้จะสังเกตเห็นได้หากเว็บไซต์และแอปทำงานได้ไม่ดี ดังนั้นการเพิ่มประสิทธิภาพการแสดงผลจึงเป็นสิ่งสำคัญ
ผู้ใช้เว็บในปัจจุบันคาดหวังว่าหน้าเว็บที่เข้าชมจะมีการโต้ตอบและราบรื่น ซึ่งเป็นจุดที่คุณต้องทุ่มเทเวลาและความพยายามมากขึ้นเรื่อยๆ หน้าเว็บไม่เพียงแต่ควรโหลดอย่างรวดเร็วเท่านั้น แต่ยังต้องตอบสนองต่ออินพุตของผู้ใช้อย่างรวดเร็วตลอดวงจรด้วย ซึ่งประสบการณ์ของผู้ใช้ในด้านนี้คือสิ่งที่เมตริก Interaction to Next Paint (INP) วัดค่า INP ที่ดีหมายความว่าหน้าเว็บตอบสนองต่อความต้องการของผู้ใช้อย่างสม่ำเสมอและเชื่อถือได้
แม้ว่าองค์ประกอบหลักที่ทำให้หน้าเว็บดูรวดเร็วจะเกี่ยวข้องกับปริมาณ JavaScript ที่คุณเรียกใช้เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้ แต่สิ่งที่ผู้ใช้คาดหวังคือการเปลี่ยนแปลงที่มองเห็นได้ในอินเทอร์เฟซผู้ใช้ การเปลี่ยนแปลงภาพในอินเทอร์เฟซผู้ใช้เป็นผลมาจากการทำงานหลายประเภท ซึ่งมักเรียกรวมกันว่าการแสดงผล และงานนี้ต้องเกิดขึ้นโดยเร็วที่สุดเพื่อให้ผู้ใช้รู้สึกว่าประสบการณ์การใช้งานนั้นรวดเร็วและเชื่อถือได้
หากต้องการเขียนหน้าเว็บที่ตอบสนองต่อการโต้ตอบของผู้ใช้อย่างรวดเร็ว คุณต้องเข้าใจวิธีที่เบราว์เซอร์จัดการ HTML, JavaScript และ CSS และตรวจสอบว่าโค้ดที่คุณเขียน รวมถึงโค้ดของบุคคลที่สามอื่นๆ ที่คุณรวมไว้ ทำงานอย่างมีประสิทธิภาพมากที่สุด
หมายเหตุเกี่ยวกับอัตราการรีเฟรชของอุปกรณ์
อุปกรณ์ส่วนใหญ่ในปัจจุบันจะรีเฟรชหน้าจอ 60 ครั้งต่อวินาที การรีเฟรชแต่ละครั้งจะสร้างเอาต์พุตภาพที่คุณเห็น และมักเรียกกันว่าเฟรม วิดีโอต่อไปนี้จะสาธิตแนวคิดเกี่ยวกับเฟรม
แม้ว่าหน้าจอของอุปกรณ์จะรีเฟรชในอัตราที่สม่ำเสมอเสมอ แต่แอปพลิเคชันที่ทำงานบนอุปกรณ์อาจไม่จำเป็นต้องสร้างเฟรมได้เพียงพอที่จะตรงกับอัตราการรีเฟรชนั้นเสมอไป ตัวอย่างเช่น หากมีภาพเคลื่อนไหวหรือการเปลี่ยนภาพทำงานอยู่ เบราว์เซอร์จะต้องจับคู่อัตราการรีเฟรชของอุปกรณ์เพื่อสร้างเฟรม 1 เฟรมสำหรับการรีเฟรชหน้าจอแต่ละครั้ง
เมื่อพิจารณาว่าจอแสดงผลทั่วไปจะรีเฟรช 60 ครั้งต่อวินาที การคำนวณอย่างรวดเร็วจะแสดงให้เห็นว่าเบราว์เซอร์มีเวลา 16.66 มิลลิวินาทีในการสร้างแต่ละเฟรม แต่ในความเป็นจริง เบราว์เซอร์มีค่าใช้จ่ายเพิ่มเติมสำหรับแต่ละเฟรม ดังนั้นงานทั้งหมดของคุณจึงต้องเสร็จสิ้นภายใน 10 มิลลิวินาที เมื่อคุณไม่สามารถทำตามงบประมาณนี้ได้ อัตราเฟรมจะลดลง และเนื้อหาของหน้าจะสั่นบนหน้าจอ ปรากฏการณ์นี้มักเรียกว่า Jank
อย่างไรก็ตาม เป้าหมายจะเปลี่ยนไปตามประเภทงานที่คุณพยายามทำ การบรรลุเกณฑ์ 10 มิลลิวินาทีเป็นสิ่งสำคัญสำหรับภาพเคลื่อนไหว ซึ่งออบเจ็กต์บนหน้าจอจะได้รับการประมาณค่าในช่วงเฟรมต่างๆ ระหว่าง 2 จุด เมื่อพูดถึงการเปลี่ยนแปลงที่แยกกันในอินเทอร์เฟซผู้ใช้ กล่าวคือ การเปลี่ยนจากสถานะหนึ่งไปยังอีกสถานะหนึ่งโดยไม่มีการเคลื่อนไหวใดๆ คั่นกลาง ขอแนะนำให้คุณทำการเปลี่ยนแปลงดังกล่าวในกรอบเวลาที่ผู้ใช้รู้สึกว่าเกิดขึ้นทันที ในกรณีเช่นนี้ มักจะมีการอ้างอิงตัวเลข 100 มิลลิวินาที แต่เกณฑ์ "ดี" ของเมตริก INP คือ 200 มิลลิวินาทีหรือต่ำกว่า เพื่อรองรับอุปกรณ์ที่หลากหลายมากขึ้นซึ่งมีความสามารถแตกต่างกัน
ไม่ว่าเป้าหมายของคุณคืออะไร ไม่ว่าจะเป็นการสร้างเฟรมจำนวนมากที่ภาพเคลื่อนไหวต้องการเพื่อหลีกเลี่ยงความกระตุก หรือเพียงแค่สร้างการเปลี่ยนแปลงภาพที่แยกกันในอินเทอร์เฟซผู้ใช้ให้เร็วที่สุด การทำความเข้าใจวิธีการทำงานของไปป์ไลน์พิกเซลของเบราว์เซอร์เป็นสิ่งสำคัญต่องานของคุณ
ไปป์ไลน์พิกเซล
มี 5 ด้านหลักๆ ที่คุณต้องทราบและคำนึงถึงในการทำงานในฐานะนักพัฒนาเว็บ คุณสามารถควบคุมทั้ง 5 ส่วนนี้ได้มากที่สุด และแต่ละส่วนแสดงถึงจุดสำคัญในไปป์ไลน์พิกเซลต่อหน้าจอ ดังนี้
- JavaScript: โดยทั่วไปแล้ว JavaScript จะใช้เพื่อจัดการงานที่จะส่งผลให้เกิดการเปลี่ยนแปลงภาพในอินเทอร์เฟซผู้ใช้ เช่น ฟังก์ชัน
animateของ jQuery, การจัดเรียงชุดข้อมูล หรือการเพิ่มองค์ประกอบ DOM ลงในหน้าเว็บ อย่างไรก็ตาม JavaScript ไม่จำเป็นอย่างยิ่งในการทริกเกอร์การเปลี่ยนแปลงภาพ เนื่องจากภาพเคลื่อนไหว CSS, การเปลี่ยน CSS และ Web Animations API สามารถทำให้เนื้อหาของหน้าเคลื่อนไหวได้ - การคำนวณสไตล์: กระบวนการพิจารณาว่ากฎ CSS ใดใช้กับองค์ประกอบ HTML ใดโดยอิงตามตัวเลือกที่ตรงกัน เช่น
.headlineเป็นตัวอย่างของตัวเลือก CSS ที่ใช้กับองค์ประกอบ HTML ใดก็ได้ ที่มีค่าแอตทริบิวต์classซึ่งมีคลาสheadlineจากนั้น เมื่อทราบกฎแล้ว ระบบจะนำกฎไปใช้และคำนวณสไตล์สุดท้ายสำหรับแต่ละองค์ประกอบ - เลย์เอาต์: เมื่อเบราว์เซอร์ทราบว่ากฎใดใช้กับองค์ประกอบหนึ่งๆ ได้ ก็จะเริ่มคำนวณเรขาคณิตของหน้า เช่น องค์ประกอบใช้พื้นที่เท่าใด และปรากฏที่ใดบนหน้าจอ โมเดลเลย์เอาต์ของเว็บหมายความว่า
องค์ประกอบหนึ่งอาจส่งผลต่อองค์ประกอบอื่นๆ ตัวอย่างเช่น ความกว้างขององค์ประกอบ
<body>มักจะส่งผลต่อขนาดขององค์ประกอบย่อยทั้งหมดในโครงสร้าง ดังนั้นกระบวนการนี้จึงอาจเกี่ยวข้องกับเบราว์เซอร์ค่อนข้างมาก - การวาด: การวาดคือกระบวนการเติมพิกเซล ซึ่งเกี่ยวข้องกับการวาดข้อความ สี รูปภาพ เส้นขอบ เงา และลักษณะภาพทุกอย่างขององค์ประกอบหลังจากคำนวณเลย์เอาต์ในหน้าเว็บแล้ว โดยปกติแล้ว การวาดจะทำบนพื้นผิวหลายๆ ชั้น ซึ่งมักเรียกว่าเลเยอร์
- คอมโพสิต: เนื่องจากส่วนต่างๆ ของหน้าอาจวาดลงบนหลายเลเยอร์ จึงต้องนำไปใช้กับหน้าจอตามลำดับที่ถูกต้องเพื่อให้หน้าแสดงผลตามที่คาดไว้ ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับองค์ประกอบที่ซ้อนทับกัน เนื่องจากข้อผิดพลาดอาจส่งผลให้องค์ประกอบหนึ่งปรากฏเหนืออีกองค์ประกอบหนึ่งอย่างไม่ถูกต้อง
แต่ละส่วนของไปป์ไลน์พิกเซลเหล่านี้แสดงถึงโอกาสที่จะทำให้เกิดความกระตุกในภาพเคลื่อนไหว หรือทำให้การวาดเฟรมล่าช้า แม้จะมีการเปลี่ยนแปลงภาพที่ไม่ต่อเนื่องในอินเทอร์เฟซผู้ใช้ก็ตาม ดังนั้น คุณจึงต้องเข้าใจอย่างถ่องแท้ว่าโค้ดของคุณทริกเกอร์ส่วนใดของไปป์ไลน์ และตรวจสอบว่าคุณสามารถจำกัดการเปลี่ยนแปลงให้เหลือเฉพาะส่วนของไปป์ไลน์พิกเซลที่จำเป็นต่อการแสดงผลได้หรือไม่
คุณอาจเคยได้ยินคำว่า "แรสเตอร์ไรซ์" ที่ใช้ร่วมกับ "เพนต์" เนื่องจากการทาสีประกอบด้วยงาน 2 อย่าง ได้แก่
- การสร้างรายการคำสั่งประมวลผล
- กำลังเติมพิกเซล
การดำเนินการหลังเรียกว่า "การแรสเตอร์" ดังนั้นเมื่อใดก็ตามที่คุณเห็นบันทึกการวาดในเครื่องมือสำหรับนักพัฒนาเว็บ คุณควรคิดว่าบันทึกดังกล่าวรวมการแรสเตอร์ด้วย ในสถาปัตยกรรมบางอย่าง การสร้างรายการคำสั่งประมวลผลและการแรสเตอร์จะทำในชุดข้อความที่ต่างกัน แต่คุณในฐานะนักพัฒนาแอปจะควบคุมไม่ได้
คุณไม่จำเป็นต้องแตะทุกส่วนของไปป์ไลน์ในทุกเฟรมเสมอไป จริงๆ แล้วมี 3 วิธีที่ไปป์ไลน์มักจะทำงานสำหรับเฟรมหนึ่งๆ เมื่อคุณทำการเปลี่ยนแปลงภาพ ไม่ว่าจะด้วย JavaScript, CSS หรือ Web Animations API
1. JS / CSS > สไตล์ > เลย์เอาต์ > การวาด > การจัดองค์ประกอบ
หากคุณเปลี่ยนพร็อพเพอร์ตี้ "เลย์เอาต์" เช่น พร็อพเพอร์ตี้ที่เปลี่ยนเรขาคณิตขององค์ประกอบ เช่น ความกว้าง ความสูง หรือตำแหน่ง (เช่น พร็อพเพอร์ตี้ CSS left หรือ top) เบราว์เซอร์จะต้องตรวจสอบองค์ประกอบอื่นๆ ทั้งหมดและ "จัดเรียงใหม่" หน้าเว็บ พื้นที่ที่ได้รับผลกระทบจะต้องได้รับการลงสีใหม่ และองค์ประกอบที่ลงสีขั้นสุดท้ายจะต้องนำมาประกอบเข้าด้วยกันอีกครั้ง
2. JS / CSS > สไตล์ > การวาด > การจัดองค์ประกอบ
หากคุณเปลี่ยนพร็อพเพอร์ตี้ "วาดเท่านั้น" สำหรับองค์ประกอบใน CSS เช่น พร็อพเพอร์ตี้อย่าง background-image, color หรือ box-shadow ขั้นตอนเลย์เอาต์ก็ไม่จำเป็นสำหรับการอัปเดตภาพในหน้าเว็บ การข้ามขั้นตอนเลย์เอาต์ (หากเป็นไปได้) จะช่วยหลีกเลี่ยงงานเลย์เอาต์ที่อาจมีค่าใช้จ่ายสูง ซึ่งอาจทำให้เกิดเวลาในการตอบสนองที่สำคัญในการสร้างเฟรมถัดไป
3. JS/CSS > สไตล์ > องค์ประกอบ
หากคุณเปลี่ยนพร็อพเพอร์ตี้ที่ไม่ต้องใช้เลย์เอาต์หรือการวาด เบราว์เซอร์จะข้ามไปยังขั้นตอนการจัดองค์ประกอบได้โดยตรง วิธีนี้เป็นวิธีที่ประหยัดและเหมาะสมที่สุดผ่านไปป์ไลน์พิกเซลสำหรับจุดที่มีแรงกดดันสูงในวงจรของหน้าเว็บ เช่น ภาพเคลื่อนไหวหรือการเลื่อน เกร็ดน่ารู้: Chromium เพิ่มประสิทธิภาพการเลื่อนหน้าเว็บเพื่อให้เกิดขึ้นเฉพาะในเทรด Compositor เท่านั้นหากเป็นไปได้ ซึ่งหมายความว่าแม้ว่าหน้าเว็บจะไม่ตอบสนอง คุณก็ยังเลื่อนหน้าเว็บและดูส่วนต่างๆ ของหน้าเว็บที่แสดงบนหน้าจอก่อนหน้านี้ได้
ประสิทธิภาพของเว็บคือศิลปะในการหลีกเลี่ยงงาน ขณะเดียวกันก็เพิ่มประสิทธิภาพของงานที่จำเป็นให้มากที่สุดเท่าที่จะเป็นไปได้ ในหลายๆ กรณี การทำงานร่วมกับเบราว์เซอร์ ไม่ใช่การต่อต้านเบราว์เซอร์ โปรดทราบว่างานที่แสดงก่อนหน้านี้ในไปป์ไลน์จะแตกต่างกันในแง่ของต้นทุนการประมวลผล โดยงานบางอย่างจะมีต้นทุนสูงกว่างานอื่นๆ โดยเนื้อแท้
มาเจาะลึกส่วนต่างๆ ของไปป์ไลน์กัน เราจะมาดูปัญหาที่พบบ่อย รวมถึงวิธีวิเคราะห์และแก้ไขปัญหาเหล่านั้น
การเพิ่มประสิทธิภาพการแสดงผลของเบราว์เซอร์
ประสิทธิภาพเป็นสิ่งสำคัญสำหรับผู้ใช้ และในการสร้างประสบการณ์ที่ดีแก่ผู้ใช้ นักพัฒนาเว็บจำเป็นต้องสร้างเว็บไซต์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้อย่างรวดเร็วและแสดงผลได้อย่างราบรื่น Paul Lewis ผู้เชี่ยวชาญด้านประสิทธิภาพพร้อมช่วยคุณกำจัดอาการกระตุกและสร้างเว็บแอปที่รักษาประสิทธิภาพไว้ที่ 60 เฟรมต่อวินาที เมื่อจบหลักสูตรนี้ คุณจะมีเครื่องมือที่จำเป็นในการทำโปรไฟล์แอปและระบุสาเหตุที่ทำให้ประสิทธิภาพการแสดงผลต่ำกว่ามาตรฐาน นอกจากนี้ คุณยังจะได้สำรวจไปป์ไลน์การแสดงผลของเบราว์เซอร์และค้นพบรูปแบบที่ช่วยให้สร้างเว็บไซต์ที่รวดเร็วซึ่งผู้ใช้จะรู้สึกพึงพอใจได้ง่ายขึ้น
หลักสูตรนี้เป็นหลักสูตรฟรีที่เปิดสอนผ่าน Udacity และคุณสามารถเรียนได้ทุกเมื่อ