บทคัดย่อ: ไม่ว่าจะอยู่ที่ทำงานหรือในการสัมภาษณ์ การเพิ่มประสิทธิภาพส่วนหน้าของเว็บเป็นสิ่งสำคัญมาก แล้วเราต้องเริ่มจากตรงไหน คุณสามารถปฏิบัติตาม 34 Catch-Rules ของ Yahoo สำหรับการเพิ่มประสิทธิภาพส่วนหน้าได้ แต่ตอนนี้เป็น 35 แล้ว จึงสามารถกล่าวได้ว่าเป็น Catch-35 ของ Yahoo สำหรับการเพิ่มประสิทธิภาพส่วนหน้า ได้รับการจำแนกประเภทซึ่งเป็นสิ่งที่ดี วิธีนี้ทำให้เรามีทิศทางที่ชัดเจนยิ่งขึ้นในการเพิ่มประสิทธิภาพ
ส่วนเนื้อหา 1. ลดจำนวนคำขอ HTTP ให้เหลือน้อยที่สุด80% ของเวลาตอบสนองของผู้ใช้ปลายทางถูกใช้ไปที่ส่วนหน้า และส่วนใหญ่เวลานั้นคือการดาวน์โหลดส่วนประกอบต่างๆ บนหน้า: รูปภาพ, สไตล์ชีท, สคริปต์, Flash ฯลฯ การลดจำนวนส่วนประกอบจะลดจำนวนคำขอ HTTP ที่ส่งโดยเพจอย่างหลีกเลี่ยงไม่ได้ นี่คือกุญแจสำคัญในการทำให้เพจของคุณเร็วขึ้น
วิธีหนึ่งในการลดจำนวนส่วนประกอบของเพจคือทำให้การออกแบบเพจง่ายขึ้น แต่มีวิธีสร้างเพจที่ซับซ้อนพร้อมทั้งเร่งเวลาตอบสนองหรือไม่? มีวิธีที่จะกินเค้กของคุณและกินมันด้วยเช่นกัน
การรวมไฟล์ จะช่วยลดจำนวนคำขอโดยการรวมสคริปต์ทั้งหมดไว้ในไฟล์เดียว แน่นอนว่า คุณยังสามารถรวม CSS ทั้งหมดเข้าด้วยกันได้ การรวมไฟล์อาจเป็นงานที่ยุ่งยากหากสคริปต์และสไตล์ของแต่ละหน้าแตกต่างกัน แต่การดำเนินการนี้โดยเป็นส่วนหนึ่งของกระบวนการเผยแพร่เว็บไซต์สามารถปรับปรุงเวลาตอบสนองได้อย่างแน่นอน CSS Sprites เป็นวิธีที่นิยมใช้เพื่อลดจำนวนคำขอรูปภาพ รวมภาพพื้นหลังทั้งหมดให้เป็นภาพเดียว จากนั้นใช้คุณสมบัติภาพพื้นหลัง CSS และตำแหน่งพื้นหลังเพื่อวางตำแหน่งส่วนที่จะแสดง การทำแผนที่รูปภาพ สามารถรวมภาพหลายภาพเป็นภาพเดียว ขนาดโดยรวมจะเท่ากัน แต่ลดจำนวนคำขอและเพิ่มความเร็วในการโหลดหน้าเว็บ การแมปรูปภาพจะมีประโยชน์ก็ต่อเมื่อรูปภาพนั้นต่อเนื่องกันบนเพจ เช่น แถบนำทาง กระบวนการกำหนดพิกัดสำหรับแผนที่รูปภาพนั้นน่าเบื่อและเกิดข้อผิดพลาดได้ง่าย และการใช้แผนที่รูปภาพสำหรับการนำทางไม่ใช่เรื่องง่าย จึงไม่แนะนำให้ใช้วิธีนี้ รูปภาพอินไลน์ (เข้ารหัส Base64) ใช้ data: รูปแบบ URL เพื่อฝังรูปภาพลงในเพจ วิธีนี้จะช่วยเพิ่มขนาดของไฟล์ HTML การใส่รูปภาพแบบอินไลน์ในสไตล์ชีต (แคช) เป็นแนวคิดที่ดีและช่วยหลีกเลี่ยงการทำให้หน้าเว็บมีน้ำหนักมากได้สำเร็จ อย่างไรก็ตาม เบราว์เซอร์กระแสหลักในปัจจุบันไม่รองรับรูปภาพอินไลน์อย่างดีการลดจำนวนคำขอ HTTP สำหรับหน้าเว็บเป็นจุดเริ่มต้น นี่เป็นแนวทางที่สำคัญในการปรับปรุงความเร็วของการเข้าชมเว็บไซต์ครั้งแรก
2. ลดการค้นหา DNSระบบชื่อโดเมนสร้างการจับคู่ระหว่างชื่อโฮสต์และที่อยู่ IP เหมือนกับการจับคู่ระหว่างชื่อและหมายเลขโทรศัพท์ในสมุดโทรศัพท์ เมื่อคุณป้อน www.yahoo.com ในเบราว์เซอร์ เบราว์เซอร์จะติดต่อกับตัวแก้ไข DNS เพื่อส่งคืนที่อยู่ IP ของเซิร์ฟเวอร์ DNS มีค่าใช้จ่าย โดยจะใช้เวลา 20 ถึง 120 มิลลิวินาทีในการค้นหาที่อยู่ IP สำหรับชื่อโฮสต์ที่กำหนด เบราว์เซอร์ไม่สามารถดาวน์โหลดสิ่งใดจากชื่อโฮสต์ได้จนกว่าการค้นหา DNS จะเสร็จสิ้น
การค้นหา DNS จะถูกแคชอย่างมีประสิทธิภาพมากขึ้น บนเซิร์ฟเวอร์แคชพิเศษโดย ISP ของผู้ใช้ (ผู้ให้บริการอินเทอร์เน็ต) หรือเครือข่ายท้องถิ่น แต่ยังสามารถแคชบนคอมพิวเตอร์ของผู้ใช้แต่ละรายได้เช่นกัน ข้อมูล DNS จะถูกจัดเก็บไว้ในแคช DNS ของระบบปฏิบัติการ (บริการไคลเอ็นต์ DNS บน Microsoft Windows) เบราว์เซอร์ส่วนใหญ่มีแคชของตัวเองที่ไม่ขึ้นอยู่กับระบบปฏิบัติการ ตราบใดที่เบราว์เซอร์เก็บบันทึกนี้ไว้ในแคช ก็จะไม่สอบถามระบบปฏิบัติการสำหรับ DNS
IE จะแคชการค้นหา DNS เป็นเวลา 30 นาทีตามค่าเริ่มต้น ตามที่เขียนไว้ในการตั้งค่ารีจิสทรี DnsCacheTimeout Firefox แคชเป็นเวลา 1 นาที ซึ่งสามารถตั้งค่าได้โดยใช้รายการการกำหนดค่า network.dnsCacheExpiration (Fasterfox เปลี่ยนเวลาแคชเป็น 1 ชั่วโมง PS Fasterfox เป็นปลั๊กอินเร่งความเร็วสำหรับ FF)
หากแคช DNS ของไคลเอ็นต์ว่างเปล่า (รวมถึงเบราว์เซอร์และระบบปฏิบัติการ) จำนวนการค้นหา DNS จะเท่ากับจำนวนชื่อโฮสต์ที่แตกต่างกันบนเพจ รวมถึง URL ของเพจ รูปภาพ ไฟล์สคริปต์ สไตล์ชีท วัตถุ Flash และอื่นๆ ชื่อโฮสต์ การลดชื่อโฮสต์ที่แตกต่างกันสามารถลดการค้นหา DNS ได้
การลดจำนวนชื่อโฮสต์ที่แตกต่างกันยังช่วยลดจำนวนส่วนประกอบที่เพจสามารถดาวน์โหลดพร้อมกันได้ การหลีกเลี่ยงการค้นหา DNS จะช่วยลดเวลาตอบสนอง ในขณะที่การลดจำนวนการดาวน์โหลดแบบขนานจะเพิ่มเวลาตอบสนอง กฎของฉันคือการกระจายส่วนประกอบต่างๆ ไปยังชื่อโฮสต์ 2 ถึง 4 ชื่อ ซึ่งเป็นการประนีประนอมระหว่างการลดการค้นหา DNS และอนุญาตให้มีการดาวน์โหลดพร้อมกันในระดับสูง
3. หลีกเลี่ยงการเปลี่ยนเส้นทางการเปลี่ยนเส้นทางใช้รหัสสถานะ 301 และ 302 นี่คือส่วนหัว HTTP ที่มีรหัสสถานะ 301:
HTTP/1.1 301 ย้ายอย่างถาวรตำแหน่ง: http://example.com/newuriContent-Type: text/html
เบราว์เซอร์จะข้ามไปยัง URL ที่ระบุในช่องตำแหน่งโดยอัตโนมัติ ข้อมูลทั้งหมดที่จำเป็นสำหรับการเปลี่ยนเส้นทางอยู่ในส่วนหัว HTTP และเนื้อหาการตอบกลับมักจะว่างเปล่า ในความเป็นจริง ส่วนหัว HTTP เพิ่มเติม เช่น Expires และ Cache-Control ยังแสดงถึงการเปลี่ยนเส้นทางด้วย มีวิธีอื่นๆ ในการเปลี่ยนเส้นทาง: รีเฟรชเมตาแท็กและ JavaScript แต่ถ้าคุณต้องทำการเปลี่ยนเส้นทาง วิธีที่ดีที่สุดคือใช้รหัสสถานะ HTTP มาตรฐาน 3xx เพื่อให้ปุ่มย้อนกลับสามารถทำงานได้อย่างถูกต้อง
โปรดทราบว่าการเปลี่ยนเส้นทางอาจทำให้ประสบการณ์ผู้ใช้ช้าลง การแทรกการเปลี่ยนเส้นทางระหว่างผู้ใช้กับเอกสาร HTML จะทำให้ทุกอย่างบนหน้าล่าช้า และส่วนประกอบจะไม่เริ่มดาวน์โหลดจนกว่าเอกสาร HTML จะถูกส่งไปยัง เบราว์เซอร์
มีการเปลี่ยนเส้นทางทั่วไปซึ่งสิ้นเปลืองทรัพยากรอย่างมาก และโดยทั่วไปแล้วนักพัฒนาเว็บจะไม่ทราบเรื่องนี้ และนั่นคือเวลาที่ URL ขาดเครื่องหมายทับที่ส่วนท้าย ตัวอย่างเช่น การข้ามไปที่ http://astrology.yahoo.com/astrology จะแสดงการตอบกลับ 301 ที่เปลี่ยนเส้นทางไปที่ http://astrology.yahoo.com/astrology/ (สังเกตเครื่องหมายทับต่อท้าย) ใน Apache คุณสามารถใช้คำแนะนำ Alias, mod_rewrite หรือ DirectorySlash เพื่อยกเลิกการเปลี่ยนเส้นทางที่ไม่จำเป็น
การใช้การเปลี่ยนเส้นทางโดยทั่วไปคือการเชื่อมต่อไซต์เก่ากับไซต์ใหม่ นอกจากนี้ยังสามารถเชื่อมต่อส่วนต่างๆ ของไซต์เดียวกันและดำเนินการบางอย่างตามสถานการณ์ที่แตกต่างกันของผู้ใช้ (ประเภทเบราว์เซอร์ ประเภทบัญชีผู้ใช้ ฯลฯ) . การเชื่อมต่อสองเว็บไซต์โดยใช้การเปลี่ยนเส้นทางเป็นวิธีที่ง่ายที่สุดและต้องใช้โค้ดเพิ่มเติมเพียงเล็กน้อยเท่านั้น แม้ว่าการใช้การเปลี่ยนเส้นทางในเวลาเหล่านี้จะช่วยลดความซับซ้อนในการพัฒนาสำหรับนักพัฒนา แต่ก็ลดประสบการณ์ผู้ใช้ลง อีกทางเลือกหนึ่งคือใช้ Alias และ mod_rewrite โดยที่โค้ดทั้งสองเส้นทางอยู่บนเซิร์ฟเวอร์เดียวกัน หากใช้การเปลี่ยนเส้นทางเนื่องจากชื่อโดเมนมีการเปลี่ยนแปลง คุณสามารถสร้าง CNAME (สร้างบันทึก DNS ที่ชี้ไปยังชื่อโดเมนอื่นเป็นนามแฝง) รวมกับคำสั่ง Alias หรือ mod_rewrite
4. ทำให้ Ajax สามารถแคชได้ข้อดีประการหนึ่งของ Ajax ก็คือสามารถให้ข้อเสนอแนะแก่ผู้ใช้ได้ทันที เนื่องจากสามารถขอข้อมูลแบบอะซิงโครนัสจากเซิร์ฟเวอร์แบ็กเอนด์ได้ อย่างไรก็ตาม เมื่อใช้ Ajax ก็ไม่รับประกันว่าผู้ใช้จะไม่รู้สึกเบื่อในขณะที่รอการตอบกลับ JavaScript และ XML แบบอะซิงโครนัสกลับมา ในหลาย ๆ แอปพลิเคชัน ความสามารถในการรอของผู้ใช้ขึ้นอยู่กับวิธีใช้ Ajax ตัวอย่างเช่น ในไคลเอนต์อีเมลบนเว็บ ผู้ใช้จะยังคงมุ่งเน้นไปที่ผลลัพธ์ที่ส่งกลับโดยคำขอ Ajax เพื่อค้นหาข้อความอีเมลที่ตรงกับเกณฑ์การค้นหาของพวกเขา สิ่งสำคัญคือต้องจำไว้ว่าอะซิงโครนัสไม่ได้หมายความว่าจะเกิดขึ้นทันที
เพื่อปรับปรุงประสิทธิภาพ การเพิ่มประสิทธิภาพการตอบสนอง Ajax เหล่านี้เป็นสิ่งสำคัญ วิธีที่สำคัญที่สุดในการปรับปรุงประสิทธิภาพของ Ajax คือการทำให้การตอบสนองแคชได้ ดังที่อธิบายไว้ในการเพิ่มส่วนหัว HTTP ที่หมดอายุหรือการควบคุมแคช กฎเพิ่มเติมต่อไปนี้ใช้กับ Ajax:
ลองดูตัวอย่างไคลเอนต์อีเมล Web 2.0 ที่ใช้ Ajax เพื่อดาวน์โหลดสมุดที่อยู่ของผู้ใช้สำหรับฟังก์ชันเติมข้อความอัตโนมัติ หากผู้ใช้ไม่ได้แก้ไขสมุดที่อยู่ของเธอตั้งแต่การใช้งานครั้งล่าสุด และการตอบสนอง Ajax สามารถแคชได้และมีส่วนหัว HTTP Expires หรือ Cache-Control ที่ยังไม่หมดอายุ สมุดที่อยู่ก่อนหน้าก็สามารถอ่านได้จากแคช เบราว์เซอร์จะต้องได้รับการแจ้งว่าควรใช้การตอบกลับสมุดที่อยู่แคชไว้ก่อนหน้านี้ต่อไปหรือขอใหม่ ซึ่งสามารถทำได้โดยการเพิ่มการประทับเวลาลงใน Ajax URL ของสมุดที่อยู่ซึ่งระบุเวลาแก้ไขล่าสุดของสมุดที่อยู่ของผู้ใช้ เช่น &t=1190241612 หากสมุดที่อยู่ไม่ได้รับการแก้ไขตั้งแต่การดาวน์โหลดครั้งล่าสุด และการประทับเวลายังคงไม่เปลี่ยนแปลง สมุดที่อยู่จะถูกอ่านโดยตรงจากแคชของเบราว์เซอร์ จึงหลีกเลี่ยงการไปกลับ HTTP เพิ่มเติม หากผู้ใช้แก้ไขสมุดที่อยู่ การประทับเวลายังช่วยให้แน่ใจว่า URL ใหม่จะไม่ตรงกับการตอบสนองที่แคชไว้ และเบราว์เซอร์จะขอรายการสมุดที่อยู่ใหม่
แม้ว่าการตอบสนองของ Ajax จะถูกสร้างขึ้นแบบไดนามิกและอาจใช้ได้เฉพาะกับผู้ใช้รายเดียวเท่านั้น แต่สามารถแคชได้ ซึ่งจะทำให้แอปพลิเคชัน Web 2.0 ของคุณเร็วขึ้น
5. การโหลดส่วนประกอบแบบ Lazy Loadingลองดูหน้าให้ละเอียดยิ่งขึ้นแล้วถามตัวเองว่า: สิ่งที่จำเป็นในการแสดงหน้าตั้งแต่แรกคืออะไร? ที่เหลือก็รอได้..
JavaScript เป็นตัวเลือกที่เหมาะสมที่สุดสำหรับการแยกก่อนและหลังเหตุการณ์ onload ตัวอย่างเช่น หากคุณมีโค้ด JavaScript และไลบรารีที่รองรับการลากและวางและภาพเคลื่อนไหว สิ่งเหล่านี้สามารถรอได้เนื่องจากองค์ประกอบการลากและวางเกิดขึ้นหลังจากที่เพจถูกแสดงผลครั้งแรก ส่วนอื่นๆ ที่สามารถโหลดแบบ Lazy Load ได้ ได้แก่ เนื้อหาที่ซ่อนอยู่ (เนื้อหาที่ปรากฏหลังจากการโต้ตอบ) และรูปภาพที่ยุบ
เครื่องมือสามารถช่วยลดภาระงานของคุณได้: YUI Image Loader สามารถโหลดรูปภาพที่ยุบแบบ Lazy Loader ได้ และยูทิลิตี้ YUI Get เป็นวิธีง่ายๆ ในการนำเข้า JS และ CSS หน้าแรกของ Yahoo!
วิธีที่ดีที่สุดคือปรับเป้าหมายด้านประสิทธิภาพให้สอดคล้องกับแนวทางปฏิบัติที่ดีที่สุดอื่นๆ ในการพัฒนาเว็บ เช่น การเพิ่มประสิทธิภาพแบบก้าวหน้า หากไคลเอ็นต์รองรับ JavaScript ประสบการณ์ผู้ใช้จะดีขึ้นได้ แต่คุณต้องแน่ใจว่าเพจทำงานอย่างถูกต้องเมื่อไม่รองรับ JavaScript ดังนั้น เมื่อคุณแน่ใจว่าเพจของคุณทำงานอย่างถูกต้องแล้ว คุณสามารถเพิ่มประสิทธิภาพด้วยสคริปต์โหลดแบบ Lazy Loading เพื่อรองรับเอฟเฟกต์พิเศษบางอย่าง เช่น การลากและวางและภาพเคลื่อนไหว
6. โหลดส่วนประกอบล่วงหน้า
การโหลดล่วงหน้าอาจดูเหมือนตรงกันข้ามกับการโหลดแบบ Lazy Loading แต่จริงๆ แล้วมีเป้าหมายที่แตกต่างออกไป เมื่อโหลดส่วนประกอบล่วงหน้า คุณจะสามารถใช้เวลาว่างของเบราว์เซอร์ได้อย่างเต็มที่เพื่อขอส่วนประกอบ (รูปภาพ สไตล์ และสคริปต์) ที่จะใช้ในอนาคต เมื่อผู้ใช้เข้าถึงหน้าถัดไป ส่วนประกอบส่วนใหญ่อยู่ในแคชแล้ว ดังนั้นเพจจะโหลดเร็วขึ้นจากมุมมองของผู้ใช้
ในการใช้งานจริง มีการโหลดล่วงหน้าประเภทต่างๆ ดังต่อไปนี้:
หน้าเว็บที่ซับซ้อนหมายถึงมีไบต์ในการดาวน์โหลดเพิ่มมากขึ้น และการเข้าถึง DOM ด้วย JavaScript จะช้าลง ตัวอย่างเช่น เมื่อคุณต้องการเพิ่มตัวจัดการเหตุการณ์ จะมีความแตกต่างระหว่างการวนซ้ำองค์ประกอบ 500 DOM บนเพจและองค์ประกอบ 5,000 DOM
องค์ประกอบ DOM จำนวนมากเป็นสัญญาณว่ามีมาร์กอัปที่ไม่เกี่ยวข้องบนหน้าเว็บที่ต้องล้างข้อมูล คุณใช้ตารางที่ซ้อนกันเพื่อจัดวางหรือไม่? หรือคุณเพิ่ม <div>s มากมายเพื่อแก้ไขปัญหาเลย์เอาต์? บางทีควรใช้มาร์กอัปความหมายที่ดีกว่า
ยูทิลิตี YUI CSS มีประโยชน์มากสำหรับเลย์เอาต์: grids.css ใช้สำหรับเลย์เอาต์โดยรวม และสามารถใช้ fonts.css และ reset.css เพื่อลบการจัดรูปแบบเริ่มต้นของเบราว์เซอร์ได้ นี่เป็นโอกาสที่ดีที่จะเริ่มล้างข้อมูลและคิดถึงมาร์กอัปของคุณ เช่น การใช้ <div> เมื่อสมเหตุสมผลตามความหมายเท่านั้น ไม่ใช่เพราะมันสร้างบรรทัดใหม่
ทดสอบจำนวนองค์ประกอบ DOM ได้ง่าย เพียงพิมพ์ลงในคอนโซล Firebug:
document.getElementsByTagName('*').ความยาวมีองค์ประกอบ DOM กี่องค์ประกอบที่มากเกินไป? คุณสามารถอ้างถึงหน้าอื่นที่มีการทำเครื่องหมายไว้อย่างดีได้ ตัวอย่างเช่น หน้าแรกของ Yahoo! เป็นหน้าที่ค่อนข้างยุ่ง แต่มีองค์ประกอบน้อยกว่า 700 รายการ (แท็ก HTML)
8. การแยกส่วนประกอบข้ามโดเมนการแยกส่วนประกอบสามารถเพิ่มการดาวน์โหลดแบบขนานได้สูงสุด แต่ตรวจสอบให้แน่ใจว่าคุณใช้โดเมนไม่เกิน 2-4 โดเมนเท่านั้น เนื่องจากมีโทษในการค้นหา DNS ตัวอย่างเช่น คุณสามารถปรับใช้เนื้อหา HTML และไดนามิกได้ที่ www.example.org และแยกส่วนประกอบแบบคงที่ออกเป็น static1.example.org และ static2.example.org
9. ใช้ iframe ให้น้อยที่สุดคุณสามารถใช้ iframe เพื่อแทรกเอกสาร HTML ลงในเอกสารหลักได้ สิ่งสำคัญคือต้องเข้าใจวิธีการทำงานของ iframe และใช้งานอย่างมีประสิทธิภาพ
ข้อดีของ <iframe>:
ข้อเสียของ <iframe>:
คำขอ HTTP มีราคาแพง ไม่จำเป็นต้องใช้คำขอ HTTP เพื่อรับการตอบสนองที่ไร้ประโยชน์ (เช่น 404 Not Found) จะทำให้ประสบการณ์ผู้ใช้ช้าลงเท่านั้นโดยไม่มีประโยชน์ใดๆ
บางไซต์ใช้ฟังก์ชัน 404 ที่เป็นประโยชน์ - คุณหมายถึง xxx หรือไม่ ซึ่งเป็นประโยชน์ต่อประสบการณ์ผู้ใช้ แต่ยังทำให้สิ้นเปลืองทรัพยากรเซิร์ฟเวอร์ด้วย (เช่น ฐานข้อมูล เป็นต้น) สิ่งที่แย่ที่สุดคือ JavaScript ภายนอกที่คุณลิงก์ไปมีข้อผิดพลาด และผลลัพธ์คือ 404 ขั้นแรก การดาวน์โหลดดังกล่าวจะบล็อกการดาวน์โหลดแบบขนาน ประการที่สอง เบราว์เซอร์จะพยายามแยกวิเคราะห์เนื้อหาการตอบสนอง 404 เนื่องจากเป็นโค้ด JavaScript และจำเป็นต้องค้นหาว่าส่วนใดบ้างที่มีอยู่
ส่วน CSS 11. หลีกเลี่ยงการใช้นิพจน์ CSSการใช้นิพจน์ CSS เพื่อตั้งค่าคุณสมบัติ CSS แบบไดนามิกเป็นวิธีที่ทรงพลังและอันตราย รองรับจาก IE5 แต่เลิกใช้แล้วจาก IE8 ตัวอย่างเช่น คุณสามารถใช้นิพจน์ CSS เพื่อตั้งค่าสีพื้นหลังให้สลับตามชั่วโมงได้:
สีพื้นหลัง: expression( (new Date()).getHours()%2 ? #B8D4FF : #F08A00 );12. เลือก <link> เพื่อละทิ้ง @import
มีการกล่าวถึงแนวทางปฏิบัติที่ดีที่สุดไว้ก่อนหน้านี้: เพื่อให้บรรลุการแสดงผลแบบโปรเกรสซีฟ ควรวาง CSS ไว้ที่ด้านบนสุด
การใช้ @import ใน IE มีผลเหมือนกับการใช้ <link> ที่ด้านล่างสุด ดังนั้นจึงไม่ควรใช้เลย
13. หลีกเลี่ยงการใช้ตัวกรองตัวกรอง AlphaImageLoader ที่เป็นกรรมสิทธิ์ของ IE สามารถใช้เพื่อแก้ไขปัญหาภาพ PNG โปร่งแสงในเวอร์ชันก่อน IE7 ในระหว่างกระบวนการโหลดรูปภาพ ตัวกรองนี้จะบล็อกการเรนเดอร์ หยุดเบราว์เซอร์ เพิ่มการใช้หน่วยความจำ และนำไปใช้กับแต่ละองค์ประกอบ ไม่ใช่แต่ละรูปภาพ ดังนั้นจะเกิดปัญหามากมาย
วิธีที่ดีที่สุดคืออย่าใช้ AlphaImageLoader และดาวน์เกรดไปใช้รูปภาพ PNG8 ที่ได้รับการสนับสนุนอย่างดีใน IE แทน หากคุณต้องใช้ AlphaImageLoader คุณควรใช้ขีดล่างแฮ็ค:_filter เพื่อหลีกเลี่ยงผลกระทบต่อผู้ใช้ IE7 และสูงกว่า
14. วางสไตล์ชีตไว้ที่ด้านบนเมื่อศึกษาประสิทธิภาพที่ Yahoo! เราพบว่าการวางสไตล์ชีตไว้ในส่วน HEAD ของเอกสารทำให้หน้าเว็บโหลดเร็วขึ้น เนื่องจากการวางสไตล์ชีตไว้ที่ส่วนหัวจะทำให้เพจค่อยๆ แสดงผลได้
วิศวกรส่วนหน้าที่มีความกังวลเกี่ยวกับประสิทธิภาพต้องการให้เพจแสดงผลแบบค่อยเป็นค่อยไป กล่าวอีกนัยหนึ่ง เราต้องการให้เบราว์เซอร์แสดงเนื้อหาที่มีอยู่โดยเร็วที่สุด ซึ่งมีความสำคัญอย่างยิ่งเมื่อมีเนื้อหาจำนวนมากบนหน้าเว็บ หรือเมื่อการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ช้ามาก ความสำคัญของการแสดงข้อเสนอแนะต่อผู้ใช้ (เช่น ตัวบ่งชี้ความคืบหน้า) ได้รับการศึกษาและจัดทำเป็นเอกสารไว้อย่างกว้างขวาง ในกรณีของเรา หน้า HTML คือตัวบ่งชี้ความคืบหน้า! เมื่อเบราว์เซอร์ค่อยๆ โหลดส่วนหัวของหน้า แถบนำทาง โลโก้ด้านบน ฯลฯ สิ่งเหล่านี้จะถูกใช้เป็นคำติชมจากผู้ใช้ที่กำลังรอให้โหลดหน้า ซึ่งสามารถปรับปรุงประสบการณ์ผู้ใช้โดยรวมได้
ส่วน js 15. ลบสคริปต์ที่ซ้ำกันหน้าที่มีไฟล์สคริปต์ซ้ำอาจส่งผลต่อประสิทธิภาพมากกว่าที่คุณคิด ในการทบทวนเว็บไซต์ 10 อันดับแรกในสหรัฐอเมริกา พบว่ามีเพียงสองเว็บไซต์ที่มีสคริปต์ที่ซ้ำกัน เหตุผลหลักสองประการที่เพิ่มโอกาสที่สคริปต์ที่ซ้ำกันจะปรากฏในหน้าเดียว: ขนาดทีมและจำนวนสคริปต์ ในกรณีนี้ สคริปต์ที่ซ้ำกันจะสร้างคำขอ HTTP ที่ไม่จำเป็น รันโค้ด JavaScript ที่ไม่มีประโยชน์ และส่งผลกระทบต่อประสิทธิภาพของเพจ
IE สร้างคำขอ HTTP ที่ไม่จำเป็น แต่ Firefox ไม่สร้าง ใน IE หากมีการแนะนำสคริปต์ภายนอกที่ไม่สามารถแคชได้สองครั้งในเพจ มันจะสร้างคำขอ HTTP สองคำขอเมื่อโหลดเพจ แม้ว่าสคริปต์จะสามารถแคชได้ แต่สคริปต์จะสร้างคำขอ HTTP เพิ่มเติมเมื่อผู้ใช้โหลดหน้าซ้ำ
นอกจากการสร้างคำขอ HTTP ที่ไม่มีความหมายแล้ว การประเมินสคริปต์หลายครั้งยังทำให้เสียเวลาอีกด้วย เพราะไม่ว่าสคริปต์จะสามารถแคชได้หรือไม่ก็ตาม โค้ด JavaScript ที่ซ้ำซ้อนจะถูกดำเนินการใน Firefox และ IE
วิธีหนึ่งในการหลีกเลี่ยงการนำเข้าสคริปต์เดียวกันสองครั้งโดยไม่ตั้งใจคือการใช้โมดูลการจัดการสคริปต์ในระบบเทมเพลต วิธีทั่วไปในการแนะนำสคริปต์คือการใช้แท็ก SCRIPT ในหน้า HTML:
<ประเภทสคริปต์=ข้อความ/จาวาสคริปต์ src=menu_1.0.17.js></script>16. ลดการเข้าถึง DOM ให้เหลือน้อยที่สุด
การเข้าถึงองค์ประกอบ DOM ด้วย JavaScript ช้ามาก ดังนั้นเพื่อให้หน้าเว็บตอบสนองมากขึ้น คุณควร:
บางครั้งรู้สึกเหมือนว่าเพจไม่ตอบสนองเพียงพอ เนื่องจากมีการเพิ่มตัวจัดการเหตุการณ์ที่ดำเนินการบ่อยเกินไปในองค์ประกอบต่างๆ ของแผนผัง DOM นี่คือเหตุผลที่แนะนำให้มอบสิทธิ์กิจกรรม หากมี 10 ปุ่มใน div คุณควรเพิ่มตัวจัดการเหตุการณ์เพียงตัวเดียวในคอนเทนเนอร์ div แทนที่จะเป็นหนึ่งตัวสำหรับแต่ละปุ่ม เหตุการณ์สามารถเกิดขึ้นได้ ดังนั้นคุณจึงสามารถจับภาพเหตุการณ์และรู้ว่าปุ่มใดเป็นที่มาของเหตุการณ์
18. วางสคริปต์ที่ด้านล่างสุดสคริปต์จะบล็อกการดาวน์โหลดแบบขนาน เอกสาร HTTP/1.1 อย่างเป็นทางการแนะนำว่าเบราว์เซอร์ไม่ควรดาวน์โหลดมากกว่าสององค์ประกอบพร้อมกันต่อชื่อโฮสต์ หากรูปภาพมาจากชื่อโฮสต์หลายชื่อ จำนวนการดาวน์โหลดแบบขนานสามารถเกินสองได้ หากกำลังดาวน์โหลดสคริปต์ เบราว์เซอร์จะไม่เริ่มงานดาวน์โหลดอื่นๆ แม้ว่าจะอยู่ภายใต้ชื่อโฮสต์อื่นก็ตาม
บางครั้งการย้ายสคริปต์ไปไว้ด้านล่างไม่ใช่เรื่องง่าย ตัวอย่างเช่น หากสคริปต์ถูกแทรกลงในเนื้อหาของหน้าโดยใช้ document.write จะไม่มีวิธีที่จะย้ายสคริปต์ลงไปอีก อาจมีปัญหาในการกำหนดขอบเขต ซึ่งโดยส่วนใหญ่สามารถแก้ไขได้
คำแนะนำทั่วไปคือการใช้สคริปต์แบบเลื่อนออกไป สคริปต์ที่มีแอตทริบิวต์ DEFER หมายความว่าสคริปต์เหล่านี้ไม่สามารถมี document.write และแจ้งให้เบราว์เซอร์แจ้งว่าสามารถแสดงผลต่อได้ ขออภัย Firefox ไม่รองรับแอตทริบิวต์ DEFER ใน IE สคริปต์อาจถูกเลื่อนออกไป แต่ไม่เป็นไปตามที่คาดไว้ หากสคริปต์สามารถเลื่อนออกไปได้ เราก็สามารถย้ายสคริปต์ไปที่ด้านล่างของเพจได้ และเพจจะโหลดเร็วขึ้น
จาวาสคริปต์, ซีเอส 19. เก็บ JavaScript และ CSS ไว้ข้างนอกหลักการด้านประสิทธิภาพหลายประการเกี่ยวข้องกับวิธีจัดการส่วนประกอบภายนอก อย่างไรก็ตาม ก่อนที่ข้อกังวลเหล่านี้จะเกิดขึ้น คุณควรถามคำถามพื้นฐานมากกว่านี้: ควรวาง JavaScript และ CSS ไว้ในไฟล์ภายนอกหรือเขียนลงในเพจโดยตรง
ที่จริงแล้ว การใช้ไฟล์ภายนอกสามารถทำให้เพจเร็วขึ้นได้ เนื่องจากไฟล์ JavaScript และ CSS จะถูกแคชไว้ในเบราว์เซอร์ JavaScript และ CSS แบบอินไลน์ในเอกสาร HTML จะถูกดาวน์โหลดซ้ำทุกครั้งที่มีการร้องขอเอกสาร HTML การทำเช่นนี้จะช่วยลดจำนวนคำขอ HTTP ที่จำเป็น แต่จะเพิ่มขนาดของเอกสาร HTML ในทางกลับกัน หาก JavaScript และ CSS อยู่ในไฟล์ภายนอกและเบราว์เซอร์แคชไว้ เราก็สามารถทำให้เอกสาร HTML เล็กลงได้โดยไม่ต้องเพิ่มจำนวนคำขอ HTTP
20. ย่อขนาด JavaScript และ CSSการบีบอัดจะลบอักขระที่ไม่จำเป็นออกจากโค้ดโดยเฉพาะเพื่อลดขนาดและปรับปรุงความเร็วในการโหลด การลดขนาดโค้ดหมายถึงการลบความคิดเห็นและอักขระช่องว่างที่ไม่จำเป็นทั้งหมด (ช่องว่าง บรรทัดใหม่ และแท็บ) การทำเช่นนี้ใน JavaScript สามารถปรับปรุงการตอบสนองได้เนื่องจากไฟล์ที่จะดาวน์โหลดมีขนาดเล็กลง เครื่องมือบีบอัดโค้ด JavaScript ที่ใช้บ่อยที่สุดสองตัวคือ JSMin และ YUI Compressor
การสร้างความสับสนคือมาตรการเพิ่มประสิทธิภาพซอร์สโค้ดที่เป็นตัวเลือกซึ่งซับซ้อนกว่าการบีบอัด ดังนั้นกระบวนการสร้างความสับสนจึงมีแนวโน้มที่จะทำให้เกิดข้อบกพร่องมากกว่าเช่นกัน ในการสำรวจเว็บไซต์สิบอันดับแรกในสหรัฐอเมริกา การบีบอัดสามารถลดขนาดลงได้ 21% และความยุ่งเหยิงสามารถลดขนาดลงได้ 25% แม้ว่าการทำให้งงงวยจะให้การลดลงในระดับที่สูงกว่า แต่ก็มีความเสี่ยงมากกว่าการบีบอัด
นอกจากการบีบอัดสคริปต์และสไตล์ภายนอกแล้ว ยังสามารถบีบอัดบล็อก <script> และ <style> แบบอินไลน์ได้อีกด้วย แม้ว่าจะเปิดใช้งานโมดูล gzip แล้ว การบีบอัดก่อนสามารถลดขนาดได้ 5% หรือมากกว่า JavaScript และ CSS ถูกใช้มากขึ้นเรื่อยๆ ดังนั้นการบีบอัดโค้ดจะมีผลดี
รูปภาพ 21. ปรับภาพให้เหมาะสมลองแปลงรูปแบบ GIF เป็นรูปแบบ PNG และดูว่าจะช่วยประหยัดพื้นที่หรือไม่ เรียกใช้ pngcrush (หรือเครื่องมือเพิ่มประสิทธิภาพ PNG อื่น ๆ) บนรูปภาพ PNG ทั้งหมด
22. เพิ่มประสิทธิภาพ CSS Spriteอย่าใช้รูปภาพที่มีขนาดใหญ่กว่าที่คุณต้องการเพียงเพราะคุณสามารถกำหนดความกว้างและความสูงในรูปแบบ HTML ได้ ถ้าจำเป็น
<img width=100 height=100 src=mycat.jpg โฮสต์: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 ไม่ได้รับการแก้ไข32. ใช้คำขอ GET สำหรับ Ajax
ทีมงาน Yahoo! Mailbox ค้นพบว่าเมื่อใช้ XMLHttpRequest คำขอ POST ของเบราว์เซอร์จะดำเนินการผ่านกระบวนการสองขั้นตอน: ส่งส่วนหัว HTTP ก่อน จากนั้นจึงส่งข้อมูล ดังนั้นจึงเป็นการดีที่สุดที่จะใช้คำขอ GET ซึ่งจำเป็นต้องส่งข้อความ TCP เท่านั้น (เว้นแต่จะมีคุกกี้มากเกินไป) ความยาว URL สูงสุดของ IE คือ 2K ดังนั้นหากข้อมูลที่จะส่งเกิน 2K จะไม่สามารถใช้ GET ได้
ผลข้างเคียงที่น่าสนใจของคำขอ POST คือไม่มีการส่งข้อมูลจริงๆ เช่น คำขอ GET ตามที่อธิบายไว้ในเอกสาร HTTP คำขอ GET ใช้เพื่อดึงข้อมูล ดังนั้นซีแมนทิกส์จึงมีไว้เพื่อการร้องขอข้อมูลโดยใช้คำขอ GET เท่านั้น ไม่ใช่สำหรับการส่งข้อมูลที่ต้องจัดเก็บไปยังเซิร์ฟเวอร์
33. ล้างบัฟเฟอร์ให้เร็วที่สุดเมื่อผู้ใช้ร้องขอเพจ เซิร์ฟเวอร์จะใช้เวลาประมาณ 200 ถึง 500 มิลลิวินาทีในการรวบรวมเพจ HTML ในระหว่างนั้นเบราว์เซอร์จะไม่ได้ใช้งานและรอให้ข้อมูลมาถึง มีฟังก์ชัน flush() ใน PHP ซึ่งช่วยให้คุณสามารถส่งส่วนหนึ่งของการตอบสนอง HTML ที่เตรียมไว้ไปยังเบราว์เซอร์ เพื่อให้เบราว์เซอร์สามารถเริ่มรับส่วนประกอบในขณะที่เตรียมส่วนที่เหลือในพื้นหลัง ประโยชน์ส่วนใหญ่จะสะท้อนให้เห็น ในพื้นหลังที่ยุ่งมากหรือส่วนหน้าที่สว่างมาก บนหน้า (ปล. ข้อดีจะสะท้อนให้เห็นได้ดีที่สุดเมื่อเวลาตอบสนองส่วนใหญ่อยู่ในพื้นหลัง)
ตำแหน่งที่เหมาะที่สุดในการล้างบัฟเฟอร์คืออยู่หลัง HEAD เนื่องจากส่วน HEAD ของ HTML มักจะสร้างได้ง่ายกว่าและอนุญาตให้มีการแนะนำไฟล์ CSS และ JavaScript ใดๆ ก็ได้ ทำให้เบราว์เซอร์สามารถเริ่มดึงส่วนประกอบต่างๆ แบบขนานในขณะที่พื้นหลังยังประมวลผลอยู่ .
ตัวอย่างเช่น:
... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->34. ใช้ CDN (เครือข่ายการจัดส่งเนื้อหา)
ระยะห่างทางกายภาพของผู้ใช้จากเซิร์ฟเวอร์ยังส่งผลต่อเวลาตอบสนองด้วย การปรับใช้เนื้อหาบนเซิร์ฟเวอร์ที่กระจายตัวทางภูมิศาสตร์หลายแห่งทำให้ผู้ใช้สามารถโหลดเพจได้เร็วขึ้น แต่จะทำอย่างไร?
ขั้นตอนแรกในการบรรลุเนื้อหาที่มีการกระจายทางภูมิศาสตร์คือ: อย่าพยายามออกแบบเว็บแอปพลิเคชันของคุณใหม่เพื่อรองรับโครงสร้างแบบกระจาย การเปลี่ยนแปลงโครงสร้างอาจรวมถึงงานที่น่ากังวล เช่น การซิงโครไนซ์สถานะเซสชันและการจำลองธุรกรรมฐานข้อมูลข้ามเซิร์ฟเวอร์ (การแปลอาจไม่ถูกต้อง) ทั้งนี้ขึ้นอยู่กับแอปพลิเคชัน ข้อเสนอเพื่อลดระยะห่างระหว่างผู้ใช้และเนื้อหาอาจมีความล่าช้าหรือเป็นไปไม่ได้เลยที่จะผ่านไปได้เนื่องจากความยากลำบากนี้
โปรดจำไว้ว่า 80% ถึง 90% ของเวลาตอบสนองของผู้ใช้ปลายทางถูกใช้ไปกับการดาวน์โหลดส่วนประกอบของหน้า เช่น รูปภาพ สไตล์ สคริปต์ แฟลช ฯลฯ นี่คือกฎทองของประสิทธิภาพ การกระจายเนื้อหาแบบคงที่ก่อนจะดีกว่าการออกแบบโครงสร้างแอปพลิเคชันใหม่ตั้งแต่ต้น สิ่งนี้ไม่เพียงช่วยลดเวลาตอบสนองลงอย่างมาก แต่ยังทำให้ง่ายต่อการแสดงให้เห็นถึงการมีส่วนร่วมของ CDN
เครือข่ายการจัดส่งเนื้อหา (CDN) คือกลุ่มของเว็บเซิร์ฟเวอร์ที่กระจัดกระจายไปตามที่ตั้งทางภูมิศาสตร์ต่างๆ เพื่อส่งเนื้อหาไปยังผู้ใช้ได้อย่างมีประสิทธิภาพมากขึ้น โดยทั่วไปแล้ว เซิร์ฟเวอร์ที่เลือกให้ส่งเนื้อหาจะขึ้นอยู่กับการวัดระยะทางของเครือข่าย ตัวอย่างเช่น: เลือกเซิร์ฟเวอร์ที่มีจำนวนฮ็อพน้อยที่สุดหรือเวลาตอบสนองเร็วที่สุด
35. เพิ่มส่วนหัว HTTP Expires หรือ Cache-Controlกฎนี้มีสองด้าน:
การออกแบบเว็บไซต์กำลังสมบูรณ์ยิ่งขึ้น ซึ่งหมายความว่าหน้าเว็บจะมีสคริปต์ รูปภาพ และ Flash มากขึ้น ผู้เยี่ยมชมไซต์รายใหม่อาจยังคงต้องส่งคำขอ HTTP สองสามรายการ แต่ด้วยการใช้วันหมดอายุ ส่วนประกอบจะสามารถแคชได้ ซึ่งจะช่วยหลีกเลี่ยงคำขอ HTTP ที่ไม่จำเป็นในระหว่างเซสชันการเรียกดูครั้งต่อ ๆ ไป โดยปกติแล้วส่วนหัว HTTP ที่หมดอายุจะใช้กับรูปภาพ แต่ควรใช้กับส่วนประกอบทั้งหมด รวมถึงสคริปต์ สไตล์ และส่วนประกอบ Flash
เบราว์เซอร์ (และพรอกซี) ใช้แคชเพื่อลดจำนวนและขนาดของคำขอ HTTP เพื่อให้หน้าเว็บโหลดเร็วขึ้น เว็บเซิร์ฟเวอร์ใช้ส่วนหัวการตอบสนอง HTTP ที่หมดอายุเพื่อแจ้งให้ไคลเอ็นต์ทราบว่าแต่ละองค์ประกอบของเพจควรถูกแคชไว้นานเท่าใด การใช้เวลาในอนาคตอันไกลโพ้นเป็นวันหมดอายุจะบอกเบราว์เซอร์ว่าการตอบสนองนี้จะไม่เปลี่ยนแปลงก่อนวันที่ 15 เมษายน 2010
หมดอายุ: พฤหัสบดี 15 เมษายน 2010 20:00:00 GMT
หากคุณใช้เซิร์ฟเวอร์ Apache ให้ใช้คำสั่ง ExpiresDefault เพื่อตั้งค่าวันที่หมดอายุโดยสัมพันธ์กับวันที่ปัจจุบัน ตัวอย่างต่อไปนี้กำหนดระยะเวลาที่ถูกต้อง 10 ปีนับจากเวลาที่ร้องขอ:
หมดอายุการเข้าถึงเริ่มต้นบวก 10 ปี
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network