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