#perfmatters: เทคนิคการใช้เครื่องมือสำหรับนินจาการแสดง
การเรียนรู้เกี่ยวกับเครื่องมือการพัฒนาของคุณคือกุญแจสำคัญในการเป็นผู้เชี่ยวชาญด้านประสิทธิภาพ Colt ยกระดับประสิทธิภาพหลัก 3 อย่าง ได้แก่ เครือข่าย การประมวลผล และการแสดงภาพ ซึ่งทัวร์ชมปัญหาสำคัญในแต่ละด้าน ตลอดจนเครื่องมือที่มีให้บริการสำหรับการค้นหาและขจัดปัญหาเหล่านี้
- ตอนนี้คุณสร้างโปรไฟล์ Chrome ใน Android ด้วยเครื่องมือสำหรับนักพัฒนาเว็บที่คุณรู้จักและชื่นชอบจากเดสก์ท็อปได้แล้ว
- การวนซ้ำเพื่อประสิทธิภาพการทำงานคือ รวบรวมข้อมูล บรรลุข้อมูลเชิงลึก ดำเนินการ
- ให้ความสำคัญกับชิ้นงานที่อยู่ในเส้นทางการแสดงผลวิกฤติสำหรับหน้าเว็บ
- หลีกเลี่ยงการทาสี มีราคาแพงมาก
- หลีกเลี่ยงการเลิกใช้งานหน่วยความจำและการเรียกใช้โค้ดในช่วงเวลาที่สำคัญในแอปของคุณ
#perfmatters: การเพิ่มประสิทธิภาพการทำงานของเครือข่าย
โดยทั่วไปแล้ว เครือข่ายและเวลาในการตอบสนองคิดเป็น 70% ของเวลาในการโหลดหน้าเว็บทั้งหมดของเว็บไซต์ ซึ่งตัวเลขนี้ถือว่าสูง แต่ก็หมายความว่าการปรับปรุงใดๆ ที่คุณทำต่อจะสร้างประโยชน์มากมายให้กับผู้ใช้ด้วย ในการพูดคุยนี้ Ilya ได้พูดถึงการเปลี่ยนแปลงล่าสุดใน Chrome ซึ่งจะช่วยปรับปรุงเวลาที่ใช้ในการโหลด รวมถึงการเปลี่ยนแปลงเล็กๆ น้อยๆ ที่คุณสามารถทำได้ในสภาพแวดล้อมเพื่อช่วยลดภาระการทำงานของเครือข่ายให้น้อยที่สุด
- Chrome M27 มีเครื่องจัดตารางเวลาทรัพยากรใหม่ที่ได้รับการปรับปรุง
- Chrome M28 ช่วยให้เว็บไซต์ SPDY (มีความสม่ำเสมอ) รวดเร็วขึ้น
- แคชแบบง่ายของ Chrome ได้รับการยกเครื่อง
- SPDY / HTTP/2.0 มีการปรับปรุงความเร็วในการโอนข้อมูลอย่างมาก มีโมดูล SPDY ที่สมบูรณ์ที่พร้อมใช้งานสำหรับ nginx, Apache และ Jetty (ขอบอกเพียง 3 อย่างเท่านั้น)
- QUIC เป็นโปรโตคอลทดลองใหม่และต่อยอดจาก UDP แม้จะเพิ่งเปิดตัวไปได้ไม่นาน แต่ก็ประสบความสำเร็จแล้วเช่นกัน
#perfmatters: การจัดวางและการแสดงภาพ 60fps
การทำ 60fps ในโปรเจ็กต์ของคุณมีความสัมพันธ์โดยตรงกับการมีส่วนร่วมของผู้ใช้และมีความสำคัญอย่างยิ่งต่อความสำเร็จ ในการพูดคุยครั้งนี้ แนทและทอมได้พูดคุยกันเกี่ยวกับไปป์ไลน์การแสดงผลของ Chrome สาเหตุที่พบบ่อยของการที่เฟรมตกหล่นและวิธีหลีกเลี่ยง
- เฟรมหนึ่งมีความยาว 16 มิลลิวินาที เครื่องมือนี้มี JavaScript, การคำนวณรูปแบบ, การลงสี และการประสาน
- การทาสีมีค่าใช้จ่ายสูงมาก Paint Storm คือจุดที่คุณมักจะทำสีราคาแพงซ้ำๆ โดยไม่จำเป็น
- เลเยอร์มีไว้เพื่อแคชองค์ประกอบที่ลงสี
- ตัวแฮนเดิลอินพุต (Listener การแตะและลูกกลิ้งเมาส์) อาจทำให้การตอบสนองไม่ทำงาน ให้หลีกเลี่ยงหากเป็นไปได้ แต่คุณไม่สามารถรักษาให้มีค่าน้อยที่สุด
#perfmatters: แอปพลิเคชันเว็บบนมือถือ Instant
เส้นทางการแสดงผลวิกฤติหมายถึงสิ่งใดก็ตาม (JavaScript, HTML, CSS, รูปภาพ) ที่เบราว์เซอร์ต้องการก่อนที่จะเริ่มวาดภาพหน้าเว็บได้ การให้ความสำคัญกับการแสดงเนื้อหาบนเส้นทางการแสดงผลวิกฤติถือเป็นสิ่งที่จำเป็นต้องทำ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ในอุปกรณ์ที่จำกัดเครือข่าย เช่น สมาร์ทโฟนบนเครือข่ายโทรศัพท์มือถือ Bryan ได้อธิบายวิธีที่ทีม Google ใช้ในกระบวนการค้นหาและจัดลําดับความสําคัญของชิ้นงานสําหรับเว็บไซต์ PageSpeed Insights จากเวลาที่ใช้ในการโหลด 20 วินาทีเหลือเพียง 1 วินาที
- นำ JavaScript และ CSS ที่บล็อกการแสดงผลออก
- ให้ความสำคัญกับเนื้อหาที่มองเห็นได้
- โหลดสคริปต์ไม่พร้อมกัน
- แสดงผลมุมมองเริ่มต้นจากฝั่งเซิร์ฟเวอร์เป็น HTML และเพิ่มด้วย JavaScript
- ลด CSS ที่บล็อกการแสดงผล แสดงรูปแบบที่จำเป็นต่อการแสดงวิวพอร์ตเริ่มต้นเท่านั้น แล้วแสดงส่วนที่เหลือ
- URI ข้อมูลขนาดใหญ่ที่แทรกอยู่ใน CSS ที่บล็อกการแสดงผลเป็นอันตรายต่อประสิทธิภาพในการแสดงผล บล็อกทรัพยากรที่ URL รูปภาพไม่บล็อก