การแนะนำรายละเอียดเกี่ยวกับการโหลดหน้า HTML และกระบวนการแยกวิเคราะห์

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-13 12:00:04

ลำดับที่เบราว์เซอร์โหลดและแสดงผล HTML

1. คำสั่งของการดาวน์โหลด IE นั้นมาจากบนลงล่างและลำดับของการแสดงผลยังมาจากบนลงล่าง การดาวน์โหลดและการแสดงผลจะดำเนินการพร้อมกัน

2. เมื่อมีการดาวน์โหลดส่วนหนึ่งของหน้าส่วนด้านบนทั้งหมด (ไม่ได้ดาวน์โหลดองค์ประกอบที่เกี่ยวข้องทั้งหมด)

3. หากคุณพบไฟล์ฝังแท็กความหมายเชิงความหมาย (สคริปต์ JS, สไตล์ CSS) จากนั้นกระบวนการดาวน์โหลด IE จะเปิดใช้งานการเชื่อมต่อแยกต่างหากสำหรับการดาวน์โหลด

4. หลังจากการดาวน์โหลดแผ่นสไตล์เสร็จสมบูรณ์มันจะถูกแยกวิเคราะห์ด้วยแผ่นสไตล์ทั้งหมดที่ดาวน์โหลดมาก่อนหน้านี้ หลังจากการแยกวิเคราะห์เสร็จสิ้นองค์ประกอบก่อนหน้าทั้งหมด (รวมถึงองค์ประกอบที่ได้รับการแสดงผลมาก่อน) จะได้รับการแสดงซ้ำอีกครั้ง

5. หากมีนิยามใหม่ใน JS และ CSS ฟังก์ชั่นนิยามในภายหลังจะแทนที่ฟังก์ชันนิยามก่อนหน้า

กำลังโหลด JS

1. ไม่สามารถดาวน์โหลดและแยกวิเคราะห์ได้ในแบบขนาน (บล็อกการดาวน์โหลด)

2. เมื่อมีการอ้างอิง JS เบราว์เซอร์จะส่งคำขอ JS และจะรอการส่งคืนคำขอ เนื่องจากเบราว์เซอร์ต้องการโครงสร้างต้นไม้ DOM ที่มั่นคงจึงมีความเป็นไปได้สูงที่จะมี

รหัสจะเปลี่ยนโครงสร้างทรี DOM โดยตรงเช่นการใช้ document.write หรือ appendchild หรือแม้กระทั่งใช้ location.href สำหรับการกระโดดโดยตรง เพื่อป้องกันไม่ให้การซ่อมแซม JS เกิดขึ้นเบราว์เซอร์

ในการปรับเปลี่ยนต้นไม้ DOM จำเป็นต้องสร้างต้นไม้ DOM ใหม่ดังนั้นจึงจะบล็อกการดาวน์โหลดและการเรนเดอร์อื่น ๆ

วิธีเพิ่มความเร็วในการโหลดหน้า HTML

1. การลดน้ำหนักหน้า:

. น้ำหนักของหน้าเป็นปัจจัยที่สำคัญที่สุดที่มีผลต่อความเร็วในการโหลด

ข. ลบพื้นที่และความคิดเห็นที่ไม่จำเป็น

ค. ย้ายสคริปต์แบบอินไลน์และ CSS ไปยังไฟล์ภายนอก

d. คุณสามารถใช้ HTML Tidy เพื่อลดน้ำหนักสำหรับ HTML และคุณยังสามารถใช้เครื่องมือบีบอัดบางอย่างเพื่อลดน้ำหนักสำหรับ JavaScript

2. ลดจำนวนไฟล์:

. การลดจำนวนไฟล์ที่อ้างอิงในหน้าสามารถลดจำนวนการเชื่อมต่อ HTTP

ข. ไฟล์ JavaScript และ CSS จำนวนมากสามารถรวมเข้าด้วยกันและเป็นการดีที่สุดที่จะรวมไฟล์เหล่านั้น Caibangzi ได้รวม JavaScript ของพวกเขา ฟังก์ชั่นและ prototype.js ลงในไฟล์ base.js

3. ลดชื่อเคียวรีชื่อโดเมน:

. DNS Query และ Parse Domain Names ใช้เวลาดังนั้นเราจึงต้องลดการอ้างอิงถึง JavaScript ภายนอก, CSS, รูปภาพและทรัพยากรอื่น ๆ ยิ่งคุณใช้ชื่อโดเมนที่แตกต่างกันน้อยเท่าไหร่ก็ยิ่งดีเท่านั้น

4. แคชข้อมูลนำกลับมาใช้ใหม่:

. แคชข้อมูลนำกลับมาใช้ใหม่

5. เพิ่มประสิทธิภาพลำดับการโหลดขององค์ประกอบหน้า:

. โหลดเนื้อหาครั้งแรกที่แสดงบนหน้าและ JavaScript และ CSS ที่เกี่ยวข้องกับมันแล้วโหลดสิ่งที่เกี่ยวข้องกับ HTML เช่นที่ไม่ได้แสดงบนรูปภาพต้นฉบับแฟลชวิดีโอ ฯลฯ แล้วโหลด

6. ลดจำนวน JavaScript แบบอินไลน์:

. ตัวแยกวิเคราะห์เบราว์เซอร์จะสมมติว่า Inline JavaScript จะเปลี่ยนโครงสร้างหน้าดังนั้นการใช้ JavaScript แบบอินไลน์นั้นมีราคาแพง

ข. อย่าใช้ document.write (), วิธีการส่งออกเนื้อหาใช้วิธีการ W3C DOM ที่ทันสมัยเพื่อประมวลผลเนื้อหาหน้าเว็บสำหรับเบราว์เซอร์ที่ทันสมัย

7. ใช้ CSS ที่ทันสมัยและแท็กทางกฎหมาย:

. ใช้ CSS ที่ทันสมัยเพื่อลดฉลากและรูปภาพ ตัวอย่างเช่นการใช้ข้อความ CSS+ ที่ทันสมัยสามารถแทนที่รูปภาพแบบข้อความเท่านั้น

ข. ใช้แท็กทางกฎหมายเพื่อหลีกเลี่ยงการแก้ไขข้อผิดพลาดและการดำเนินการอื่น ๆ เมื่อเบราว์เซอร์แยกวิเคราะห์ HTML คุณยังสามารถใช้ HTML Tidy เพื่อลดน้ำหนักสำหรับ HTML

8. เนื้อหาของคุณ:

. อย่าใช้ตารางซ้อนกัน แต่โต๊ะที่ไม่ได้ถูกทอดทิ้งหรือ divs ย่อยสลายเค้าโครงของตารางตามชิ้นขนาดใหญ่ของตารางซ้อนกันเป็นตารางเล็ก ๆ หลายตารางดังนั้นคุณไม่ต้องรอจนกว่าเนื้อหาทั้งหมด (หรือตารางขนาดใหญ่) จะถูกโหลดก่อนที่จะแสดง

9. ระบุขนาดของภาพและตาราง:

. หากเบราว์เซอร์สามารถกำหนดขนาดของภาพหรือตารางได้ทันทีจะสามารถแสดงหน้าได้ทันทีโดยไม่ต้องทำการจัดเรียงเค้าโครงอีกครั้ง

ข. สิ่งนี้ไม่เพียง แต่จะเพิ่มความเร็วในการแสดงหน้าของหน้าเท่านั้น แต่ยังช่วยป้องกันการเปลี่ยนแปลงที่ไม่เหมาะสมในเค้าโครงหลังจากโหลดหน้าเว็บ

ค. รูปภาพใช้ความสูงและความกว้าง

การโหลดหน้าเว็บ HTML และกระบวนการแยกวิเคราะห์

1. ผู้ใช้เข้าสู่ URL (สมมติว่าเป็นหน้า HTML และเป็นครั้งแรกที่คุณเข้าถึง) เบราว์เซอร์ออกคำขอไปยังเซิร์ฟเวอร์และเซิร์ฟเวอร์ส่งคืนไฟล์ HTML

2. เบราว์เซอร์เริ่มโหลดรหัส HTML และพบว่ามีแท็ก <link> ในแท็ก <head> ที่อ้างอิงไฟล์ CSS ภายนอก

3. เบราว์เซอร์ออกคำขอสำหรับไฟล์ CSS และเซิร์ฟเวอร์ส่งคืนไฟล์ CSS

4. เบราว์เซอร์ยังคงโหลดส่วน <body> ส่วนหนึ่งของรหัสใน HTML และได้รับไฟล์ CSS ดังนั้นคุณสามารถเริ่มแสดงหน้าได้

5. เบราว์เซอร์พบแท็ก <Img> ในรหัสที่อ้างอิงภาพและทำการร้องขอไปยังเซิร์ฟเวอร์ ในเวลานี้เบราว์เซอร์จะไม่รอจนกว่าจะดาวน์โหลดรูปภาพ แต่จะแสดงรหัสต่อไปต่อไป

6. เซิร์ฟเวอร์ส่งคืนไฟล์ภาพ เนื่องจากภาพมีพื้นที่บางพื้นที่จึงส่งผลกระทบต่อการจัดเรียงของวรรคต่อไปดังนั้นเบราว์เซอร์จึงต้องย้อนกลับและแสดงส่วนนี้อีกครั้งของรหัส

7. เบราว์เซอร์พบแท็ก <script> ที่มีบรรทัดของรหัส JavaScript และเรียกใช้อย่างรวดเร็ว

8. สคริปต์ JavaScript ดำเนินการคำสั่งนี้ซึ่งสั่งให้เบราว์เซอร์ซ่อน <style> (style.display = ไม่มี) ในรหัส มันน่าเสียดายทันใดนั้นก็มีองค์ประกอบที่หายไปและเบราว์เซอร์ต้องแสดงส่วนนี้อีกส่วนหนึ่งของรหัส

9. ในที่สุดฉันก็รอการมาถึงของ </html> และเบราว์เซอร์ก็ร้องไห้ออกมา ...

10. เดี๋ยวก่อนมันยังไม่จบ ผู้ใช้คลิกปุ่ม Skinning ในอินเทอร์เฟซและ JavaScript ขอให้เบราว์เซอร์เปลี่ยนเส้นทาง CSS ของแท็ก <link>

11. เบราว์เซอร์รวบรวมทุกคนที่นี่ทุกคนบรรจุกระเป๋าของพวกเขาเราต้องทำอีกครั้ง ... เบราว์เซอร์ขอไฟล์ CSS ใหม่จากเซิร์ฟเวอร์และแสดงหน้าใหม่อีกครั้ง