Chrome Dev Summit - สรุปประสิทธิภาพ

#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 รูปภาพไม่บล็อก