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