บทความบทนำของ wulin.com (www.vevb.com): หลายคนถามว่า html5 คืออะไร? เราบอกว่าวิธีที่เราสามารถใช้ HTML5 ก่อนคือการเปลี่ยน Doctype ก่อนเพราะหลายหน้ายังคงอยู่ในรูปแบบดั้งเดิมในปัจจุบัน วิธี HTML5 เข้ากันได้กับเบราว์เซอร์ IE และสามารถใช้งานได้จาก IE6 ถึง IE10 และสามารถรองรับได้โดยเบราว์เซอร์ขั้นสูง
[หมายเหตุบรรณาธิการ] บทความต่อไปนี้เขียนโดยช่างเทคนิคไอทีชื่อจางลิมิงเผยแพร่บนเว็บเพจ InfoQ เวลานี้เขาวิเคราะห์ประสิทธิภาพของ HTML5 จาก 9 ด้านที่แตกต่างกันในข้อความเต็มซึ่งยังคงคุ้มค่าที่จะอ่านโดยนักพัฒนาที่เกี่ยวข้อง
จากมุมมองของประสิทธิภาพ HTML5 จะลดเอกสาร HTML เป็นครั้งแรกทำให้ง่ายขึ้น ครั้งแรกจากมุมมองของความสามารถในการอ่านของผู้ใช้มีหลายสิ่งหลายอย่างที่ไม่เข้าใจโดยผู้เริ่มต้นเป็นครั้งแรกที่จะเห็นสิ่งเหล่านี้และวิธีการประกาศ HTML5 นั้นเป็นมิตรกับผู้ใช้มากขึ้น ประการที่สองการประกาศการเข้ารหัสเอกสารนั้นง่ายมากถ้าอยู่ใน HTML5 หลายคนถามว่า HTML5 คืออะไร? เราบอกว่าวิธีที่เราสามารถใช้ HTML5 ก่อนคือการเปลี่ยน Doctype ก่อนเพราะหลายหน้ายังคงอยู่ในรูปแบบดั้งเดิมในปัจจุบัน วิธี HTML5 เข้ากันได้กับเบราว์เซอร์ IE และสามารถใช้งานได้จาก IE6 ถึง IE10 และสามารถรองรับได้โดยเบราว์เซอร์ขั้นสูง ดังนั้นวิธีที่ง่ายที่สุดในการยอมรับ HTML5 คือการเปลี่ยน Doctype
1. ฉลากที่ง่ายกว่า
สิ่งต่อไปอาจไม่ใช่เรื่องธรรมดามาก แต่เป็นสิ่งที่ฉันชอบโดยใช้วิธีฉลากที่ง่ายกว่า อย่างที่คุณสามารถบอกได้จากชื่อนี้ HTML5 นั้นสืบทอดมาจาก HTML4 HTML4 มีโหมดที่เข้มงวดและโหมดการเปลี่ยนแปลง HTML5 รองรับโหมดการเปลี่ยนแปลงนี้ซึ่งหมายความว่าคุณไม่สามารถปิดแท็กได้ อย่างไรก็ตามฉันไม่แนะนำแท็กทั้งหมดตัวอย่างเช่นแท็กตัวถังไม่ปิดซึ่งเราไม่แนะนำ แต่ P-label ที่ใช้กันมากที่สุดคือแท็กรายการ LI ทำไมคุณถึงพูดอย่างนั้น? ก่อนอื่นจากมุมมองภาพวิธีนี้ง่ายกว่าเล็กน้อย จากนั้นกุญแจสำคัญคือในระหว่างกระบวนการถ่ายโอนเอกสารจะมีเนื้อหาน้อยลง
การประกาศแอตทริบิวต์แท็ก HTML5 รองรับสามวิธี: วงเล็บเดี่ยววงเล็บคู่และวงเล็บที่ไม่ได้รับการรับรอง เพื่อลดขนาดของเอกสารฉันเลือกวิธีการที่ไม่มีคำพูดสองเท่าหรือราคาเดียว อย่างไรก็ตามควรสังเกตว่าสมมติว่าเป็นการประกาศของแอตทริบิวต์คลาสเนื่องจากแอตทริบิวต์อาจรวมถึงหลายคลาสและเมื่อหลายชั้นเรียนพวกเขาจะต้องปิดล้อมในวงเล็บ ในเรื่องนี้ให้ฉันแสดงให้คุณเห็นถึงการฝึกฝนของ Google Google เองมีหน้าเว็บที่ปฏิบัติอย่างสมบูรณ์ข้างต้นลดขนาดของเอกสารลง 20%ลดการถ่ายโอนเอกสาร HTML ลง 20% หากมีการฝึกฝนทั้งหมดมันสามารถลดลงระหว่าง 5% ถึง 20% นี่เป็นขั้นตอนแรกลดขนาดของเอกสาร HTML
2. การเพิ่มประสิทธิภาพรูปภาพ
ถัดไปเป็นเรื่องเกี่ยวกับการเพิ่มประสิทธิภาพของรูปภาพซึ่งเป็นองค์ประกอบที่รักและเกลียดชังเสมอ เพราะเมื่อมีรูปภาพมากเกินไปมันจะลากความเร็วในการโหลดของทั้งหน้าลงอย่างจริงจัง เกี่ยวกับวิธีการเพิ่มประสิทธิภาพของรูปภาพมีการแนะนำมากมายในหนังสือ "เว็บไซต์ประสิทธิภาพสูง" เพื่อสรุปมีสามประเด็นหลัก: การใช้เอลฟ์ปรับขนาดของรูปภาพให้เหมาะสมและใช้ข้อมูล URI ฉันจะไม่เข้าไปดูรายละเอียดที่นี่
อีกแนวคิดหนึ่งของการเพิ่มประสิทธิภาพภาพคือ: ไม่มีภาพ ละทิ้งรูปภาพและโอบกอด CSS3 ในขั้นต้นฉันต้องตั้งค่าภาพที่มีเอฟเฟกต์มุมโค้งมน แต่ตอนนี้ฉันใช้แบล็กเรดิอุสใน CSS3; ฉันเคยตั้งค่าเอฟเฟกต์เงา แต่ตอนนี้ฉันใช้ Box-Shadow ใน CSS3; ฉันเคยตั้งค่าภาพพื้นหลังการไล่ระดับสี แต่ตอนนี้ฉันใช้การไล่ระดับสีใน CSS3
3. ก่อนดึงข้อมูล
ถัดไปพูดคุยเกี่ยวกับการดึงข้อมูลล่วงหน้าซึ่งเป็นอีกวิธีหนึ่งในการเพิ่มประสิทธิภาพ แนวคิดการเพิ่มประสิทธิภาพในปัจจุบันของเราไม่มีอะไรมากไปกว่าไม่กี่คน หลายคนมาจากมุมมองของสิ่งที่น้อยลงเช่นขนาดเอกสารลดลงก่อนและขนาดภาพลดลง รูปภาพจำนวนมากกลายเป็นเอลฟ์เพื่อลดจำนวนคำขอส่ง สำหรับการดึงข้อมูลล่วงหน้ามันเป็นอีกวิธีหนึ่งในการคิด กำลังโหลดทรัพยากรก่อน เมื่อผู้ใช้ไปถึงจุดนั้นมันก็โหลดจริงดังนั้นมันจะเร็วขึ้นอย่างแน่นอน
มีสองส่วนสำหรับการดึงข้อมูลล่วงหน้า: หนึ่งคือการดึงทรัพยากรล่วงหน้าและอีกส่วนหนึ่งคือการแก้ปัญหาก่อนของ DNS
มีหลายจุดที่ควรทราบเมื่อทรัพยากรล่วงหน้า:
การโหลดล่วงหน้าจะดึงเฉพาะเมื่อเบราว์เซอร์ไม่ได้ใช้งาน แต่ไม่รับประกันว่าจะดึงมัน นี่เป็นจุดที่สำคัญมาก เพราะเบราว์เซอร์มีผู้ฟังทั่วโลกซึ่งเป็นอินเทอร์เฟซภายใน เมื่ออากาศเรียกดูไม่ได้ใช้งานมันจะดำเนินการเบราว์เซอร์เมื่อไม่ได้ใช้งาน แต่การโทรกลับที่ไม่ได้ใช้งานนี้อาจไม่ถูกเรียกใช้ดังนั้นจึงไม่รับประกันว่าจะทำการโหลดล่วงหน้า
Chrome ไม่รองรับการโหลดทรัพยากร HTTPS ล่วงหน้า ตัวอย่างเช่น Alipay เป็นหน้า HTTPS, Chrome จะไม่ดึงล่วงหน้า
แม้ว่าหน้าเว็บที่ถูกดึงออกมาไม่สามารถมองเห็นได้หลังจากที่มันมีอยู่ แต่ก็สามารถแยกวิเคราะห์ได้ตามปกติ หากฉันดึงหน้าเข้าสู่ระบบล่วงหน้าหน้าเข้าสู่ระบบมีทรัพยากรมากมายเช่นรูปภาพไฟล์ CSS และไฟล์ JS มันจะถูกแยกวิเคราะห์จากบนลงล่างตามปกติ ในระหว่างกระบวนการแยกวิเคราะห์หน้านี้ไม่ปรากฏ แต่มีอยู่จริง ใน HTML5 คุณสามารถรับสถานะหน้าปัจจุบันผ่าน document.visibilityState โดยปกติแล้วหน้าจะมีสองรัฐที่มองเห็นได้และมองไม่เห็น แต่ตอนนี้มีสถานะใหม่ที่เรียกว่าสถานะการเรนเดอร์ก่อน คุณสามารถตรวจสอบได้โดยตรงว่าหน้านั้นอยู่ในสถานะ PRERENDER หรือไม่โดย Document.VisibilityState เท่ากับ PRERENDER หรือไม่