ความคิดเห็น: ไม่ว่าจะเป็นนักพัฒนาเบราว์เซอร์หรือผู้พัฒนาเว็บแอปพลิเคชันปกติพวกเขาทั้งหมดใช้ความพยายามร่วมกัน: เพื่อให้การท่องเว็บรู้สึกเร็วขึ้น มีเทคนิคที่รู้จักมากมายที่สามารถทำให้เว็บไซต์ของคุณเร็วขึ้น: ใช้ CSS Sprites ใช้เครื่องมือเพิ่มประสิทธิภาพรูปภาพใช้. htaccess เพื่อตั้งค่าข้อมูลส่วนหัวและเวลาแคชการบีบอัด JavaScript ใช้ CDN ฯลฯ
ฉันได้แนะนำเทคนิคการเพิ่มประสิทธิภาพความเร็วที่ใช้ในเว็บไซต์นี้ ใน HTML5 ฟีเจอร์ใหม่ได้เกิดขึ้นเพื่อเพิ่มประสิทธิภาพความเร็วของเว็บไซต์: หน้าทรัพยากร preload/pre-read (ลิงก์ prefetch)
หน้าทรัพยากร preload/pre-read (ลิงก์ prefetch) คืออะไร? คำอธิบายจาก MDN:
PAGE RESORICO PRELOADING (ลิงก์ prefetch) เป็นทักษะที่ได้รับจากเบราว์เซอร์ซึ่งได้รับการออกแบบมาเพื่อให้เบราว์เซอร์ดาวน์โหลดหรืออ่านทรัพยากรเอกสารบางอย่างในช่วงเวลาว่างและผู้ใช้จะเข้าถึงทรัพยากรเหล่านี้ในอนาคต หน้าเว็บสามารถตั้งค่าชุดคำแนะนำล่วงหน้าสำหรับเบราว์เซอร์ เมื่อเบราว์เซอร์โหลดหน้าปัจจุบันมันจะโหลดเอกสารที่ระบุไว้ในพื้นหลังอย่างเงียบ ๆ และเก็บไว้ในแคช เมื่อผู้ใช้เข้าถึงเอกสารที่โหลดไว้ล่วงหน้าเหล่านี้เบราว์เซอร์สามารถแยกออกจากแคชให้กับผู้ใช้ได้อย่างรวดเร็ว
พูดง่ายๆคือ: ให้เบราว์เซอร์โหลดทรัพยากรอื่น ๆ (หน้า, รูปภาพ, วิดีโอ, ฯลฯ ) ว่าผู้ใช้มีแนวโน้มที่จะเข้าถึงได้มากที่สุดหลังจากเข้าถึงหน้าปัจจุบัน และวิธีนี้ง่ายมาก!
HTML5 หน้าทรัพยากร preload (ลิงก์ prefetch) วิธีการเขียน
<!-โหลดหน้าทั้งหมด->
<link href = "http://www.vevb.com/misc/3d-album/"/> </p> <p> <!-โหลดรูปภาพล่วงหน้า->
<link href = "<a href =" http://www.vevb.com/wordpress/ "> </a>
wp-content/uploads/2014/04/b-334x193.jpg "/>
HTML5 หน้าทรัพยากร PRELOAD/PRE-Read (ลิงก์ prefetch) จะถูกนำมาใช้ผ่านแท็กลิงก์ แอตทริบิวต์ REL ถูกระบุเป็น prefetch และที่อยู่ที่จะโหลดในแอตทริบิวต์ HREF เบราว์เซอร์ Firefox ยังให้การสนับสนุนแอตทริบิวต์เพิ่มเติม:
<ลิงค์
title = "ออกแบบมาสำหรับ mozilla" href = "mozspecific.css" _fcksavedurl = "" mozspecific.css "" />
<link href = "2.html" />
Prefetch ยังสามารถใช้ภายใต้ทรัพยากรโปรโตคอล HTTPS
ภายใต้สถานการณ์ที่ควรมีการโหลดทรัพยากรหน้าล่วงหน้า
ทรัพยากรประเภทใดที่โหลดบนหน้าของคุณและเมื่อทุกอย่างขึ้นอยู่กับคุณ นี่คือคำแนะนำบางอย่าง:
1. เมื่อหน้ามีบริการที่มีลักษณะคล้ายสไลด์โหลดล่วงหน้า/อ่านล่วงหน้า 1-3 หน้าถัดไปและหน้า 1-3 ก่อนหน้า
2. โหลดรูปภาพเหล่านั้นที่เป็นเรื่องธรรมดาไปทั่วทั้งเว็บไซต์
3. โหลดหน้าถัดไปของผลการค้นหาบนเว็บไซต์
ห้ามการโหลดหน้าทรัพยากรหน้า (ลิงก์ prefetch)
มีตัวเลือกในเบราว์เซอร์ Firefox เพื่อห้ามการโหลดหน้าทรัพยากรหน้าใด ๆ (ลิงก์ prefetch) คุณสามารถตั้งค่าได้เช่นนี้:
1.USER_PREF (Network.prefetch-next, false);
2. ข้อควรระวังสำหรับการโหลดทรัพยากรหน้า (ลิงก์ prefetch)
นี่คือหมายเหตุบางส่วนเกี่ยวกับการโหลดทรัพยากรหน้า (ลิงก์ prefetch):
1. preload (ลิงก์ prefetch) ไม่สามารถทำงานข้ามโดเมนรวมถึงการดึงคุกกี้ข้ามโดเมน
2. การโหลดล่วงหน้า (ลิงก์ prefetch) จะทำให้เกิดมลพิษทางสถิติการเยี่ยมชมเว็บไซต์ของคุณเนื่องจากบางหน้าโหลดล่วงหน้าไปยังเบราว์เซอร์อาจไม่สามารถเยี่ยมชมได้โดยผู้ใช้
3. เบราว์เซอร์ Firefox ได้ให้การสนับสนุนเทคโนโลยี PRELOAD (ลิงก์ prefetch) นี้ตั้งแต่ปี 2546
การใช้เวลาว่างของเบราว์เซอร์ในการโหลดไฟล์ทรัพยากรเพิ่มเติมบางส่วนมันดูน่าตื่นเต้นและอันตราย คุณต้องการลองใช้เทคโนโลยีเหล่านี้หรือไม่?