ภาพรวม
ก่อนที่เบราว์เซอร์จะแสดงผลหน้าเว็บได้ เบราว์เซอร์จะต้องสร้างแผนผัง DOM โดยการแยกวิเคราะห์มาร์กอัป HTML ในระหว่างขั้นตอนนี้ ทุกครั้งที่โปรแกรมแยกวิเคราะห์พบสคริปต์ โปรแกรมจะหยุดและเริ่มเรียกใช้ ก่อนที่จะสามารถแยกวิเคราะห์ HTML ต่อได้ ในกรณีที่เป็นสคริปต์ภายนอก โปรแกรมแยกวิเคราะห์จะ ถูกบังคับให้รอดาวน์โหลดทรัพยากร ซึ่งอาจทำให้เกิดการส่งข้อมูลไปกลับของเครือข่ายอย่างน้อย 1 ครั้งและ เลื่อนเวลาในการแสดงผลหน้าเว็บครั้งแรก โปรดดู การเพิ่มการโต้ตอบด้วย JavaScript เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับผลกระทบที่ JavaScript มีต่อ เส้นทางการแสดงผลคำแนะนำ
คุณควรหลีกเลี่ยงและลดการใช้ JavaScript ในการบล็อก โดยเฉพาะสคริปต์ภายนอกที่ ต้องดึงข้อมูลก่อนที่จะสามารถดำเนินการได้ สคริปต์ที่จำเป็นสำหรับการแสดงผลเนื้อหาของหน้า อาจแทรกในบรรทัดเพื่อหลีกเลี่ยงคำขอเครือข่ายเพิ่มเติม แต่เนื้อหาที่แทรกในบรรทัดต้องมีขนาดเล็ก และต้องดำเนินการอย่างรวดเร็วเพื่อประสิทธิภาพที่ดี สคริปต์ที่ไม่สำคัญอย่างยิ่งในการเริ่มต้น การแสดงผลควรทำเป็นแบบไม่พร้อมกันหรือเลื่อนออกไปจนกว่าจะแสดงผลครั้งแรก โปรดทราบ เพื่อปรับปรุงเวลาที่ใช้ในการโหลด คุณต้อง เพิ่มประสิทธิภาพการแสดงโฆษณา CSSJavaScript ในบรรทัด
สคริปต์การบล็อกภายนอกจะบังคับให้เบราว์เซอร์รอให้มีการดึงข้อมูล JavaScript ซึ่งอาจเพิ่มการรับส่งเครือข่ายอย่างน้อยหนึ่งรอบก่อนที่จะสามารถแสดงผลหน้าเว็บได้ หากผู้ใช้ภายนอก สคริปต์มีขนาดเล็ก คุณสามารถแทรกเนื้อหาของสคริปต์ลงในเอกสาร HTML ได้โดยตรง และหลีกเลี่ยง เวลาในการตอบสนองของคำขอเครือข่าย ตัวอย่างเช่น ถ้าเอกสาร HTML มีลักษณะดังนี้<html> <head> <script type="text/javascript" src="small.js"></script> </head> <body> <div> Hello, world! </div> </body> </html>
small.js
มีลักษณะดังนี้
/* contents of a small JavaScript file */
<html> <head> <script type="text/javascript"> /* contents of a small JavaScript file */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
small.js
ภายนอกออก และอนุญาตให้
เพื่อให้แสดงผลครั้งแรกได้เร็วขึ้น อย่างไรก็ตาม โปรดทราบว่าในบรรทัดยังเพิ่ม
ขนาดของเอกสาร HTML และเนื้อหาสคริปต์เดียวกันอาจต้องแทรกในบรรทัด
หลายหน้า ด้วยเหตุนี้ คุณจึงควรแทรกสคริปต์ขนาดเล็กในหน้าเท่านั้นเพื่อประสิทธิภาพที่ดีที่สุด
ทำให้ JavaScript เป็นแบบอะซิงโครนัส
โดยค่าเริ่มต้น JavaScript จะบล็อกการสร้าง DOM ซึ่งส่งผลให้เกิดความล่าช้าในการแสดงผลครั้งแรก ถึง ป้องกันไม่ให้ JavaScript บล็อกโปรแกรมแยกวิเคราะห์ที่เราขอแนะนำให้ใช้ HTMLasync
ในสคริปต์ภายนอก เช่น
<script async src="my.js">
document.write
สคริปต์ที่ขึ้นอยู่กับลำดับการดำเนินการหรือต้องการเข้าถึงหรือแก้ไข
คุณอาจต้องเขียน DOM หรือ CSSOM ของหน้าเว็บใหม่เพื่อรองรับข้อจำกัดเหล่านี้
เลื่อนการโหลด JavaScript
การโหลดและเรียกใช้สคริปต์ที่ไม่จำเป็นในการแสดงผลหน้าเริ่มต้นอาจ เลื่อนเวลาไปจนกว่าการแสดงผลครั้งแรกหรือส่วนสำคัญอื่นๆ ของหน้าจะเสร็จสิ้น กำลังโหลด การทำเช่นนี้ช่วยลดการช่วงชิงทรัพยากรและปรับปรุงประสิทธิภาพได้คำถามที่พบบ่อย
- แล้วถ้าฉันใช้ไลบรารี JavaScript เช่น jQuery ล่ะ
- ไลบรารี JavaScript จำนวนมาก เช่น JQuery ใช้สำหรับปรับปรุงหน้าเว็บเพื่อเพิ่ม ความสามารถในการโต้ตอบ ภาพเคลื่อนไหว และเอฟเฟกต์อื่นๆ เพิ่มเติม แต่ส่วนใหญ่ สามารถเพิ่มพฤติกรรมได้อย่างปลอดภัยหลังจากที่แสดงผลเนื้อหาครึ่งหน้าบน ตรวจสอบการทำให้ JavaScript เป็นแบบไม่พร้อมกันหรือเลื่อนการโหลด
- จะเกิดอะไรขึ้นหากฉันใช้เฟรมเวิร์ก JavaScript เพื่อสร้างหน้าเว็บ
- หากเนื้อหาของหน้าสร้างขึ้นโดย JavaScript ฝั่งไคลเอ็นต์ คุณควรตรวจสอบโมดูล JavaScript ที่เกี่ยวข้องเพื่อหลีกเลี่ยงการเพิ่ม การส่งข้อมูลไปกลับของเครือข่าย ในทำนองเดียวกัน การใช้ประโยชน์จากการแสดงผลฝั่งเซิร์ฟเวอร์ ปรับปรุงประสิทธิภาพการโหลดหน้าเว็บหน้าแรก: แสดงผลเทมเพลต JavaScript บนเซิร์ฟเวอร์เพื่อแสดง แสดงผลครั้งแรกอย่างรวดเร็ว จากนั้นจึงใช้เทมเพลตฝั่งไคลเอ็นต์เมื่อมีการโหลดหน้าเว็บ สำหรับข้อมูลเพิ่มเติม ข้อมูลเกี่ยวกับการแสดงผลฝั่งเซิร์ฟเวอร์ โปรดดู http://youtu.be/VKTWdaupft0?t=14m28s.
ความคิดเห็น
หน้านี้มีประโยชน์ไหม