ด้วยการมาถึงของยุค WEB2.0 การพัฒนาที่ไม่เคยมีมาก่อนได้ถูกนำเข้าสู่เครือข่าย ประสบการณ์ผู้ใช้ส่วนหน้ามีความสำคัญมากขึ้นเรื่อยๆ เพื่อชดเชยข้อบกพร่องบางประการของการโต้ตอบของผู้ใช้ที่ไม่ดีในโครงสร้าง B/S อย่างไรก็ตาม สิ่งนี้จะนำมาซึ่งปัญหา ซึ่งก็คือ มันจะเพิ่มแรงกดดันต่อลูกค้า ตัวอย่างเช่น การใช้โค้ด JS จำนวนมาก ทุกคนจะรู้ว่าโค้ด JS ทำงานบนไคลเอนต์จะส่งผลต่อประสิทธิภาพการแยกวิเคราะห์ของหน้าเว็บทั้งหมดในเบราว์เซอร์ ซึ่งอาจบ่งบอกถึงการเพิ่มขึ้นของการรับส่งข้อมูลไคลเอนต์ด้วย ดังนั้นไม่ว่าจะเป็น จากมุมมองของโหลดเซิร์ฟเวอร์หรือมุมมองของผู้ใช้ เพราะเป็นสิ่งสำคัญอย่างยิ่งในการปรับโค้ดไคลเอนต์ให้เหมาะสม! บทความนี้จะอธิบายวิธีการเพิ่มประสิทธิภาพส่วนหน้าของเว็บเป็นหลักจากทั้งภายในและภายนอก ฉันหวังว่ามันจะสามารถให้ประสบการณ์และแรงบันดาลใจแก่ผู้อ่านได้
ขั้นแรก มาดูข้อมูลการเข้าชม http ของ http://yahoo.com ผ่านแผนภูมิสถิติของ Yahoo:
เราพบว่าตั้งแต่คำขอเซิร์ฟเวอร์แรกจนถึงหน้าเว็บที่ถูกโหลดโดยสมบูรณ์บนไคลเอนต์ การอ่านโค้ด HTML คิดเป็น 5% ของเวลาตอบสนองทั้งหมดเท่านั้น ผลลัพธ์นี้ใช้กับเว็บไซต์ส่วนใหญ่ในสหรัฐอเมริกาที่สุ่มตัวอย่าง สิบอันดับแรกของเว็บไซต์มีเพียงเว็บไซต์เดียวที่มีมากกว่า 5% แต่น้อยกว่า 20% ส่วนที่เหลืออีก 80% ใช้สำหรับอ่านเนื้อหาอื่น ๆ ของหน้าเว็บ กล่าวคือ ส่วนหน้า (ข้อความต้นฉบับอยู่ด้านหน้า) -end ความหมายไม่รวม html โค้ดที่เหลืออาจเป็นรูปภาพ สคริปต์ แฟลช วีดีโอ ต่างๆ ก็ได้) นี่คือเหตุผลสำคัญว่าทำไมเราควรมุ่งเน้นไปที่สิ่งเหล่านี้เพื่อปรับปรุงความเร็วในการแสดงผล
มีสามเหตุผลหลักว่าทำไมคุณควรเริ่มต้นด้วยส่วนหน้า :
1. นอกเหนือจากโค้ด เรามีสามวิธีดังต่อไปนี้:
1. ใช้เทคโนโลยี CDN
สำหรับวิธีการเฉพาะคุณสามารถ Google ได้ (หลักการทั่วไปดูเหมือนจะเป็นการกำหนดตำแหน่งของผู้เยี่ยมชมและเข้าถึงเนื้อหาเพื่อเลือกเซิร์ฟเวอร์ที่ใกล้ที่สุดเพื่อจัดการกับคำขอของผู้ใช้)
2. เพิ่มส่วนหัวที่หมดอายุมานาน
หมดอายุ: พฤหัสบดี 15 เมษายน 2010 20:00:00 GMT
เบราว์เซอร์จะใช้แคชเพื่อลดจำนวนคำขอ http เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ หากมีการเพิ่มเวลาหมดอายุที่ยาวนานลงในส่วนหัวของหน้า เบราว์เซอร์จะแคชองค์ประกอบในหน้าเว็บเสมอ
อย่างไรก็ตามสิ่งนี้จะนำมาซึ่งปัญหานั่นคือหากสิ่งต่าง ๆ บนเพจเปลี่ยนไปจะต้องเปลี่ยนชื่อมิฉะนั้นไคลเอนต์จะไม่รีเฟรชอย่างจริงจัง ในกลุ่มงาน Yahoo จะใช้หมายเลขเวอร์ชันเช่น yahoo_2 0.6.js
3.การบีบอัด Gzip
Gzip เป็นวิธีการบีบอัดที่ได้รับความนิยมและมีประสิทธิภาพมากที่สุดในปัจจุบัน ได้รับการพัฒนาโดย GNU และได้มาตรฐานโดย RFC1952
(Gzip บีบอัดรูปภาพ, CSS, สคริปต์ ฯลฯ บนฝั่งเซิร์ฟเวอร์แล้วส่งไปยังเบราว์เซอร์ของลูกค้าเพื่อขยายขนาด ซึ่งอาจทำให้ความเร็วในการส่งเพิ่มขึ้นได้ แต่แรงกดดันต่อเซิร์ฟเวอร์จะเพิ่มขึ้น โดยทั่วไปจะเหมาะสมกว่า เพื่อบีบอัดองค์ประกอบบางอย่าง