ความคิดเห็น: HTML5 ได้เปิดตัวการมองเห็นหน้า API "พิเศษ" มาก เหตุผลที่มันเป็นพิเศษคือ API นี้มุ่งเน้นไปที่คุณสมบัติที่มีคนไม่กี่คนที่ให้ความสนใจ - ไม่ว่าจะเปิดใช้งานแท็กเบราว์เซอร์ (แท็บ)
จะต้องอธิบายที่นี่ว่า "การเปิดใช้งาน" นี้หมายถึงว่าแท็กกำลังเรียกดูโดยผู้ใช้หรือไม่ว่าจะเป็นแท็กปัจจุบันหรือไม่
ดังนั้นจุดประสงค์ของ API นี้คืออะไร? โดยปกติแล้วหน้าดั้งเดิมจำนวนมากจะยังคงทำงานต่อไปเมื่อผู้ใช้ไม่เปิดใช้งาน ตัวอย่างเช่นเมื่อผู้ใช้กำลังเรียกดูพอร์ทัลข่าวและหน้าเกม NBA ที่เขาเปิดก่อนจะยังคงรีเฟรชและรับผลลัพธ์ล่าสุดเว็บไซต์วิดีโอจะยังคงครอบครองแบนด์วิดท์และทรัพยากรโหลด ดังนั้นหากจำเป็นต้องใช้งานที่ไม่จำเป็นมากเกินไปจะมีการเสียทรัพยากรจำนวนมาก ดังนั้นสิ่งนี้ค่อนข้างมีประโยชน์:
1. โปรแกรมเว็บจะอัปเดตข้อมูลหน้าเว็บโดยอัตโนมัติทุกครั้งเพื่อให้แน่ใจว่าผู้ใช้จะได้รับข้อมูลที่เหมาะสม อย่างไรก็ตามเมื่อผู้ใช้กำลังเรียกดูหน้าอื่น ๆ ก็สามารถควบคุมการอัปเดตหยุดชั่วคราวได้
2. เมื่อเว็บไซต์วิดีโอเล่นวิดีโอออนไลน์มันจะโหลดวิดีโออย่างต่อเนื่องจนกว่าวิดีโอจะถูกโหลด อย่างไรก็ตามเมื่อผู้ใช้กำลังเรียกดูหน้าอื่น ๆ มันสามารถหยุดการโหลดทรัพยากรวิดีโอเพื่อบันทึกแบนด์วิดท์
3. มีสไลด์ขนาดใหญ่บนหน้าแรกของเว็บไซต์ที่เล่นโดยอัตโนมัติ เมื่อผู้ใช้เรียกดูหน้าอื่น ๆ การเล่นสามารถหยุดชั่วคราวได้
ดังนั้นผ่านการมองเห็นหน้าเราสามารถบรรลุผลประโยชน์อย่างน้อยหนึ่งรายการหรือมากกว่านั้น:
1. บันทึกทรัพยากรเซิร์ฟเวอร์ การสำรวจอาแจ็กซ์มักถูกเพิกเฉย ปิดคำขอนี้สามารถบันทึกทรัพยากรได้
2. บันทึกการใช้หน่วยความจำ
3. บันทึกการบริโภคแบนด์วิดท์
ดังนั้นการใช้การมองเห็นหน้าจะเป็นประโยชน์สำหรับทั้งผู้ใช้และเซิร์ฟเวอร์
ถัดไปขอแนะนำ API นี้อย่างเป็นทางการ การมองเห็นหน้าเพิ่มคุณสมบัติสองคุณสมบัติที่ซ่อนอยู่และมองเห็นได้ในวัตถุเอกสารของเบราว์เซอร์ หากเปิดใช้งานแท็กปัจจุบันค่าของเอกสารที่ได้รับการดูแลเป็นเท็จมิฉะนั้นจะเป็นจริง VisibilityState มี 4 ค่าที่เป็นไปได้:
1.Didden: เมื่อเบราว์เซอร์ย่อเล็กสุดสลับแท็กและล็อคหน้าจอคอมพิวเตอร์ค่าการมองเห็นสถานะจะถูกซ่อนไว้
2. มองเห็นได้: เมื่อเอกสารของบริบทระดับบนสุดของเบราว์เซอร์จะแสดงในหน้าจออย่างน้อยหนึ่งหน้าจอจะกลับมามองเห็นได้ เมื่อหน้าต่างเบราว์เซอร์ไม่ย่อเล็กสุด แต่เบราว์เซอร์ถูกบล็อกโดยแอปพลิเคชันอื่น ๆ ก็จะปรากฏให้เห็น
3.Prerender: ส่งคืนก่อนหน้านี้เมื่อเอกสารถูกโหลดนอกหน้าจอหรือมองไม่เห็น นี่เป็นคุณสมบัติที่ไม่จำเป็นและเบราว์เซอร์สามารถเลือกได้
4.UNLOADED: return unloaded เมื่อเอกสารกำลังจะถูกทิ้งไว้ (ยกเลิกการโหลด) และเบราว์เซอร์ยังสามารถเลือกคุณสมบัตินี้ได้
นอกจากนี้เหตุการณ์ VisibilityChange จะถูกเพิ่มลงในเอกสารซึ่งจะถูกเรียกใช้เมื่อการมองเห็นการเปลี่ยนแปลงของเอกสาร
โอเคหลังจากแนะนำคุณสมบัติให้ใส่ตัวอย่างการใช้งาน (คัดลอกรหัสและบันทึกลงในไฟล์ HTML สลับแท็กเพื่อทดสอบเอฟเฟกต์หลังจากเปิด)
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8" />
<title> ทดสอบ HTML5 หน้าการมองเห็น API </title>
</head>
<body> </p> <p> <div> </div>
<script>
ฟังก์ชัน BrowserKerNel () {
ผลลัพธ์ var;
['webkit', 'moz', 'o', 'ms']. foreach (ฟังก์ชั่น (คำนำหน้า) {</p> <p> ถ้า (เอกสารประเภทของเอกสาร [คำนำหน้า + 'ซ่อน']! = 'undefined') {
ผลลัพธ์ = คำนำหน้า;
-
-
ผลการกลับมา;
-
ฟังก์ชัน init () {
คำนำหน้า = browserkernel ();
var showtip = document.getElementById ('showtip');
document.addeventListener (คำนำหน้า + 'VisibilityChange', ฟังก์ชั่น onvisibilityChange (e) {
var tip = null;
if (เอกสาร [คำนำหน้า + 'VisibilityState'] == 'ซ่อน') เคล็ดลับ = '<p> ออกจากหน้า </p>';
อื่นถ้า (เอกสาร [คำนำหน้า + 'การมองเห็น state'] == 'มองเห็น') เคล็ดลับ = '<p> ป้อนหน้า </p>';
showtip.innerhtml = showtip.innerhtml + เคล็ดลับ;
-
-
window.onload = init ();
</script>
</body>
</html>
วัตถุประสงค์ของตัวอย่างนี้คือการตรวจสอบว่าการมองเห็นของการเปลี่ยนแปลงแท็กและสร้างพรอมต์เมื่อการมองเห็นของแท็กเปลี่ยนไปหรือไม่
เป็นที่น่าสังเกตว่าในปัจจุบันเบราว์เซอร์ยังคงสนับสนุนการมองเห็นหน้าผ่านคุณลักษณะส่วนตัว ดังนั้นเมื่อตรวจจับหรือใช้คุณสมบัติที่จัดทำโดยการมองเห็นหน้าคุณต้องเพิ่มคำนำหน้าส่วนตัวของเบราว์เซอร์ ตัวอย่างเช่นเมื่อตรวจจับคุณสมบัติการมองเห็นข้างต้นใน Chrome คุณต้องตรวจจับ document.webkitvisabilityState แทน document.visibilityState ดังนั้นการสาธิตจะตรวจจับประเภทเบราว์เซอร์ก่อนจากนั้นใช้ API การมองเห็นหน้าเว็บ