คำนำ
ไม่ว่ารหัส JavaScript ปัจจุบันจะถูกฝังอยู่หรือในไฟล์ลิงค์ภายนอกการดาวน์โหลดและการแสดงผลของหน้าจะต้องหยุดและรอให้สคริปต์ดำเนินการ ยิ่งกระบวนการดำเนินการ JavaScript ใช้เวลานานเท่าไหร่เบราว์เซอร์ก็จะรอการตอบสนองต่อการป้อนข้อมูลของผู้ใช้นานขึ้น เหตุผลที่เบราว์เซอร์บล็อกเมื่อดาวน์โหลดและเรียกใช้สคริปต์คือสคริปต์อาจเปลี่ยนเนมสเปซของหน้าหรือจาวาสคริปต์ซึ่งมีผลต่อเนื้อหาของหน้าต่อมา ตัวอย่างทั่วไปคือการใช้ document.write() ในหน้าเช่นรายการ 1
แสดงรายการ 1 JavaScript Code Embedded ตัวอย่าง
<html> <head> <title> ตัวอย่างต้นทาง </title> </head> <body> <p> <script type = "text/javascript"> document.write ("วันนี้คือ" + (วันที่ใหม่ ()). todatestring ()); </script> </p> </body> </html>เมื่อเบราว์เซอร์พบแท็ก <script> หน้า HTML ปัจจุบันไม่มีวิธีที่จะรู้ว่า JavaScript จะเพิ่มเนื้อหาลงในแท็ก <p> แนะนำองค์ประกอบอื่น ๆ หรือแม้แต่ลบแท็ก ดังนั้นในเวลานี้เบราว์เซอร์จะหยุดการประมวลผลหน้าดำเนินการรหัส JavaScript ก่อนจากนั้นจึงแยกวิเคราะห์และแสดงหน้าต่อไป สิ่งเดียวกันนี้เกิดขึ้นเมื่อโหลดจาวาสคริปต์โดยใช้คุณสมบัติ SRC เบราว์เซอร์จะต้องใช้เวลาในการดาวน์โหลดรหัสในไฟล์ลิงค์ภายนอกก่อนจากนั้นแยกวิเคราะห์และดำเนินการ ในระหว่างกระบวนการนี้การเรนเดอร์หน้าและการโต้ตอบของผู้ใช้จะถูกบล็อกอย่างสมบูรณ์
ตำแหน่งสคริปต์
ข้อมูลจำเพาะ HTML 4 ระบุว่าสามารถวางแท็ก <Script> ในเอกสาร <head> หรือ <body> ของเอกสาร HTML และได้รับอนุญาตให้ปรากฏหลายครั้ง โดยทั่วไปแล้วนักพัฒนาเว็บจะคุ้นเคยกับการโหลดลิงค์ภายนอก JavaScript ใน <head> จากนั้นใช้แท็ก <link> เพื่อโหลดไฟล์ลิงค์ภายนอกหรือข้อมูลหน้าอื่น ๆ ตัวอย่างเช่นรายการ 2
รายการ 2 ตัวอย่างของตำแหน่งสคริปต์ที่ไม่มีประสิทธิภาพ
<html> <head> <title> ตัวอย่างต้นทาง </title> <script type = "text/javaScript" src = "script1.js"> </script> <script type = "text/javascript" src = "script2.js"> </script type = "text/javascript src = "script3.js"> </script> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head> <body> <p> Hello World! </p> </body> </html>
อย่างไรก็ตามวิธีการทั่วไปนี้ซ่อนปัญหาประสิทธิภาพที่ร้ายแรง ในตัวอย่างในรายการ 2 เมื่อเบราว์เซอร์แยกวิเคราะห์แท็ก <script> (บรรทัด 4) เบราว์เซอร์จะหยุดแยกวิเคราะห์เนื้อหาที่ตามมาและจัดลำดับความสำคัญในการดาวน์โหลดไฟล์สคริปต์และเรียกใช้รหัสในนั้นซึ่งหมายความว่าไม่สามารถโหลดไฟล์สไตล์ที่ตามมาได้ เนื่องจากแท็ก <body> ไม่สามารถโหลดได้หน้าจะไม่แสดงผลตามธรรมชาติ ดังนั้นหน้าจะว่างเปล่าจนกว่ารหัส JavaScript จะถูกเรียกใช้งานอย่างสมบูรณ์ รูปที่ 1 อธิบายกระบวนการดาวน์โหลดของสคริปต์และไฟล์สไตล์ระหว่างการโหลดหน้าเว็บ
รูปที่ 1 การโหลดและดำเนินการไฟล์ JavaScript ที่ปิดกั้นการดาวน์โหลดไฟล์อื่น ๆ
เราสามารถค้นหาปรากฏการณ์ที่น่าสนใจ: ไฟล์ JavaScript ตัวแรกเริ่มดาวน์โหลดในขณะที่บล็อกการดาวน์โหลดไฟล์อื่น ๆ ในหน้า นอกจากนี้ยังมีความล่าช้าก่อนที่การดาวน์โหลด script1.js จะเสร็จสมบูรณ์และ script2.js เริ่มดาวน์โหลดซึ่งเกิดขึ้นเป็นกระบวนการดำเนินการของไฟล์ script1.js แต่ละไฟล์จะต้องรอจนกว่าไฟล์ก่อนหน้าจะถูกดาวน์โหลดและดำเนินการก่อนที่จะเริ่มดาวน์โหลด ในระหว่างการดาวน์โหลดไฟล์เหล่านี้ทีละคนผู้ใช้จะเห็นหน้าว่าง
เริ่มต้นด้วย IE 8, Firefox 3.5, Safari 4 และ Chrome 2 ทั้งหมดอนุญาตให้ดาวน์โหลดไฟล์ JavaScript แบบขนาน นี่เป็นข่าวดีเพราะแท็ก <script> ไม่ได้บล็อกแท็ก <Script> อื่น ๆ เมื่อดาวน์โหลดทรัพยากรภายนอก น่าเสียดายที่กระบวนการดาวน์โหลด JavaScript จะยังคงบล็อกการดาวน์โหลดทรัพยากรอื่น ๆ เช่นไฟล์สไตล์และรูปภาพ แม้ว่ากระบวนการดาวน์โหลดสคริปต์จะไม่ส่งผลต่อกันและกัน แต่หน้ายังคงต้องรอให้รหัส JavaScript ทั้งหมดถูกดาวน์โหลดและดำเนินการก่อนที่จะดำเนินการต่อ ดังนั้นในขณะที่เบราว์เซอร์ล่าสุดปรับปรุงประสิทธิภาพโดยการอนุญาตให้ดาวน์โหลดแบบขนานปัญหายังไม่ได้รับการแก้ไขอย่างสมบูรณ์และการบล็อกสคริปต์ยังคงเป็นปัญหา
เนื่องจากสคริปต์บล็อกการดาวน์โหลดทรัพยากรอื่น ๆ บนหน้าจึงขอแนะนำให้วางแท็ก <Script> ทั้งหมดที่ด้านล่างของแท็ก <body> ให้มากที่สุดเท่าที่จะทำได้เพื่อลดผลกระทบในการดาวน์โหลดทั้งหน้า ตัวอย่างเช่นรายการ 3
รายการ 3 ตัวอย่างของการจัดวางรหัสที่แนะนำ
<html> <head> <title> ตัวอย่างต้นทาง </title> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head> <body> <p> Hello World! </p> <! type = "text/javascript" src = "script2.js"> </script> src = "script3.js"> </script> </body> </html>
รหัสนี้แสดงตำแหน่งที่แนะนำสำหรับการวางแท็ก <Script> ในเอกสาร HTML แม้ว่าการดาวน์โหลดสคริปต์บล็อกสคริปต์อื่น แต่ส่วนใหญ่ของหน้าถูกดาวน์โหลดและแสดงต่อผู้ใช้ดังนั้นการดาวน์โหลดหน้าเว็บจะไม่ช้าเกินไป นี่เป็นกฎแรกสำหรับการเพิ่มประสิทธิภาพ JavaScript: ใส่สคริปต์ที่ด้านล่าง
จัดระเบียบสคริปต์
เนื่องจากแท็ก <Script> แต่ละแท็กถูกบล็อกเมื่อดาวน์โหลดหน้าเริ่มต้นลดจำนวนแท็ก <Script> ที่รวมอยู่ในหน้าช่วยปรับปรุงสถานการณ์นี้ นี่ไม่เพียง แต่สำหรับสคริปต์ลิงค์ภายนอกเท่านั้น แต่ยังรวมถึงจำนวนสคริปต์แบบฝังด้วย เมื่อใดก็ตามที่เบราว์เซอร์พบแท็ก <script> ในระหว่างการแยกวิเคราะห์หน้า HTML มันจะทำให้เกิดความล่าช้าบางอย่างเนื่องจากการดำเนินการของสคริปต์ดังนั้นการลดเวลาหน่วงจะช่วยปรับปรุงประสิทธิภาพโดยรวมของหน้าอย่างมีนัยสำคัญ
ปัญหานี้แตกต่างกันเล็กน้อยเมื่อจัดการกับไฟล์ JavaScript ภายนอก ด้วยค่าใช้จ่ายเพิ่มเติมเกี่ยวกับประสิทธิภาพของคำขอ HTTP การดาวน์โหลดไฟล์ 100KB เดียวจะเร็วกว่าการดาวน์โหลดไฟล์ 5 20KB 5 ไฟล์ นั่นคือการลดจำนวนสคริปต์ลิงค์ภายนอกในหน้าจะปรับปรุงประสิทธิภาพ
โดยปกติแล้วเว็บไซต์หรือแอปพลิเคชันขนาดใหญ่จำเป็นต้องพึ่งพาไฟล์ JavaScript หลายไฟล์ คุณสามารถรวมไฟล์หลายไฟล์เป็นไฟล์เดียวเพื่อให้คุณต้องอ้างอิงแท็ก <script> เพื่อลดการใช้ประสิทธิภาพ การรวมไฟล์สามารถทำได้ผ่านเครื่องมือบรรจุภัณฑ์ออฟไลน์หรือบริการออนไลน์แบบเรียลไทม์
ควรสังเกตว่าการวางสคริปต์ที่ฝังตัวหลังจากอ้างถึงแผ่นสไตล์ลิงค์ภายนอกจะทำให้หน้าเว็บบล็อกและรอให้แผ่นสไตล์ดาวน์โหลด สิ่งนี้ทำเพื่อให้แน่ใจว่าสคริปต์แบบฝังจะได้รับข้อมูลสไตล์ที่แม่นยำที่สุดเมื่อดำเนินการ ดังนั้นจึงขอแนะนำไม่ให้ติดตามสคริปต์แบบฝังทันทีหลังจากแท็ก <link>
สคริปต์ที่ไม่ปิดกั้น
การลดขนาดไฟล์ JavaScript และการ จำกัด คำขอ HTTP นั้นไม่สามารถทำได้บนเว็บแอปพลิเคชันที่มีคุณสมบัติมากมายหรือเว็บไซต์ขนาดใหญ่ ยิ่งคุณลักษณะของเว็บแอปพลิเคชันมากเท่าใดก็ยิ่งต้องการรหัส JavaScript มากขึ้นเท่านั้น แม้ว่าการดาวน์โหลดไฟล์ JavaScript ที่มีขนาดใหญ่กว่าจะสร้างคำขอ HTTP เพียงครั้งเดียว แต่จะล็อคเบราว์เซอร์เป็นเวลานาน เพื่อหลีกเลี่ยงสิ่งนี้จำเป็นต้องค่อยๆโหลดไฟล์ JavaScript ลงในหน้าผ่านเทคนิคเฉพาะบางอย่างดังนั้นในระดับหนึ่งมันไม่ได้ปิดกั้นเบราว์เซอร์
สคริปต์ลับเพื่อปลดล็อคสคริปต์คือรหัส JavaScript จะถูกโหลดหลังจากโหลดหน้าเว็บเท่านั้น ซึ่งหมายถึงการดาวน์โหลดสคริปต์หลังจากเหตุการณ์ ONLOAD ของวัตถุหน้าต่างถูกยิง มีหลายวิธีในการบรรลุผลนี้
ชะลอการโหลดสคริปต์
HTML 4 กำหนดแอตทริบิวต์เพิ่มเติมสำหรับแท็ก <Script>: DEFER แอตทริบิวต์การเลื่อนเวลาระบุว่าสคริปต์ที่มีอยู่ในองค์ประกอบนี้ไม่ได้แก้ไข DOM ดังนั้นรหัสสามารถล่าช้าได้อย่างปลอดภัย แอตทริบิวต์การเลื่อนเวลาได้รับการสนับสนุนโดยเบราว์เซอร์ IE 4 และ Firefox 3.5 ในภายหลังเท่านั้นดังนั้นจึงไม่ใช่โซลูชันข้ามเบราว์เซอร์ในอุดมคติ ในเบราว์เซอร์อื่นแอตทริบิวต์การเลื่อนเวลาจะถูกละเว้นโดยตรงดังนั้นแท็ก <Script> จะถูกประมวลผลในวิธีเริ่มต้นซึ่งหมายความว่าจะทำให้เกิดการอุดตัน อย่างไรก็ตามนี่ยังคงเป็นโซลูชันที่มีประโยชน์หากเบราว์เซอร์เป้าหมายของคุณรองรับ รายการ 4 เป็นตัวอย่าง
รายการ 4 ตัวอย่างของวิธีการใช้แอตทริบิวต์การเลื่อนเวลา
<script type = "text/javascript" src = "script1.js" defer> </script>
แท็ก <script> พร้อมแอตทริบิวต์การเลื่อนเวลาสามารถวางได้ทุกที่ในเอกสาร ไฟล์ JavaScript ที่เกี่ยวข้องจะเริ่มดาวน์โหลดเมื่อหน้าถูกแยกวิเคราะห์ไปยังแท็ก <Script> แต่จะไม่ถูกเรียกใช้จนกว่าจะโหลด DOM นั่นคือเหตุการณ์ ONLOAD จะถูกยิง เมื่อดาวน์โหลดไฟล์ JavaScript ที่มีแอตทริบิวต์เลื่อนออกไปจะไม่บล็อกกระบวนการอื่น ๆ ในเบราว์เซอร์ดังนั้นไฟล์ดังกล่าวสามารถดาวน์โหลดได้ควบคู่ไปกับไฟล์ทรัพยากรอื่น ๆ
องค์ประกอบ <script> ใด ๆ ที่มีแอตทริบิวต์การเลื่อนเวลาจะไม่ถูกเรียกใช้จนกว่าจะมีการโหลด DOM ไม่ว่าจะเป็นสคริปต์แบบฝังหรือภายนอก ตัวอย่างในรายการ 5 แสดงว่าแอตทริบิวต์การเลื่อนเวลามีผลต่อพฤติกรรมของสคริปต์อย่างไร:
รายการ 5 เอฟเฟกต์ของแอตทริบิวต์การเลื่อนเวลาที่มีต่อพฤติกรรมสคริปต์
<html> <head> <title> ตัวอย่างสคริปต์เลื่อนตัวอย่าง </title> </head> <body> <script type = "text/javascript" การแจ้งเตือน> การแจ้งเตือน ("defer"); </script> <script type = "text/javascript"> Alert ("script"); </script> <script type = "text/javascript"> window.onload = function () {alert ("โหลด"); - </script> </body> </html>รหัสนี้จะปรากฏขึ้นสามกล่องโต้ตอบระหว่างการประมวลผลหน้า ลำดับป๊อปอัพของเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์การเลื่อนเวลาคือ: "เลื่อน", "สคริปต์" และ "โหลด" บนเบราว์เซอร์ที่รองรับแอตทริบิวต์การเลื่อนเวลาคำสั่งป๊อปอัพคือ: "สคริปต์", "เลื่อนเวลา" และ "โหลด" โปรดทราบว่าองค์ประกอบ <script> ที่มีแอตทริบิวต์การเลื่อนเวลาไม่ได้ดำเนินการหลังจากรายการที่สอง แต่เรียกว่าก่อนที่เหตุการณ์ ONLOAD จะถูกทริกเกอร์
หากเบราว์เซอร์เป้าหมายของคุณมีเฉพาะ Internet Explorer และ Firefox 3.5 สคริปต์ที่เลื่อนออกไปนั้นมีประโยชน์อย่างแน่นอน หากคุณต้องการสนับสนุนเบราว์เซอร์หลายตัวในโดเมนมีวิธีที่สอดคล้องกันมากขึ้นในการใช้งาน
HTML 5 กำหนดแอตทริบิวต์ขยายใหม่สำหรับแท็ก <Script>: ASYNC ฟังก์ชั่นของมันเหมือนกับการเลื่อนเวลาและสามารถโหลดและเรียกใช้สคริปต์แบบอะซิงโครนัสโดยไม่ต้องปิดกั้นการโหลดหน้าเว็บเนื่องจากการโหลดสคริปต์ อย่างไรก็ตามสิ่งหนึ่งที่ควรทราบคือในกรณีของ Async สคริปต์ JavaScript จะถูกดำเนินการเมื่อพวกเขาดาวน์โหลดดังนั้นจึงเป็นไปได้มากที่พวกเขาจะไม่ถูกดำเนินการตามลำดับเดิม หากมีการพึ่งพาก่อนและหลังสคริปต์ JavaScript ก็มีแนวโน้มว่าข้อผิดพลาดจะเกิดขึ้นโดยใช้ Async
องค์ประกอบสคริปต์แบบไดนามิก
โมเดลวัตถุเอกสาร (DOM) ช่วยให้คุณสร้างเนื้อหาเอกสารเกือบทั้งหมดของ HTML แบบไดนามิกโดยใช้ JavaScript องค์ประกอบ <script> เช่นเดียวกับองค์ประกอบอื่น ๆ ของหน้าสามารถสร้างได้ง่ายมากด้วยฟังก์ชั่น DOM มาตรฐาน:
รายการ 6 สร้าง <Script> องค์ประกอบที่มีฟังก์ชั่น DOM มาตรฐาน
var script = document.createElement ("สคริปต์"); script.type = "text/javascript"; script.src = "script1.js"; document.getElementByTagname ("head") [0] .AppendChild (สคริปต์);องค์ประกอบ <Script> ใหม่โหลดไฟล์ต้นฉบับ script1.js ดาวน์โหลดไฟล์นี้ทันทีหลังจากเพิ่มองค์ประกอบลงในหน้า จุดสำคัญของเทคโนโลยีนี้คือไม่ว่าการดาวน์โหลดจะเริ่มต้นที่ใดการดาวน์โหลดและการรันของไฟล์จะไม่บล็อกการประมวลผลหน้าอื่น คุณสามารถวางรหัสเหล่านี้ในส่วน <head> โดยไม่ส่งผลกระทบต่อรหัสหน้าสำหรับส่วนที่เหลือ (ยกเว้นการเชื่อมต่อ HTTP ที่ใช้ในการดาวน์โหลดไฟล์)
เมื่อไฟล์ถูกดาวน์โหลดโดยใช้โหนดสคริปต์แบบไดนามิกรหัสที่ส่งคืนมักจะถูกเรียกใช้งานทันที (ยกเว้น Firefox และ Opera พวกเขาจะรอโหนดสคริปต์แบบไดนามิกก่อนหน้าทั้งหมดทั้งหมดเพื่อดำเนินการเสร็จสมบูรณ์) กลไกนี้ใช้งานได้ดีเมื่อสคริปต์เป็นประเภท "วิ่งด้วยตนเอง" แต่ถ้าสคริปต์มีเพียงอินเทอร์เฟซสำหรับการเรียกใช้สคริปต์อื่น ๆ บนหน้าเว็บมันจะทำให้เกิดปัญหา ในกรณีนี้คุณต้องติดตามว่าการดาวน์โหลดสคริปต์เสร็จสมบูรณ์หรือไม่และพร้อมหรือไม่ คุณสามารถใช้โหนด <Script> แบบไดนามิกเพื่อออกเหตุการณ์เพื่อรับข้อมูลที่เกี่ยวข้อง
Firefox, Opera, Chorme และ Safari 3+ จะออกเหตุการณ์ OnLoad หลังจากการรับโหนด <Script> เสร็จสิ้น คุณสามารถฟังกิจกรรมนี้เพื่อรับการแจ้งเตือนที่จัดทำโดยสคริปต์:
แสดงรายการ 7 การโหลดสคริปต์ JavaScript โดยการฟังเหตุการณ์ OnLoad
var script = document.createElement ("script") script.type = "text/javascript"; // firefox, opera, chrome, safari 3+script.onload = function () {alert ("สคริปต์โหลด!");}; script.src = "script1.js"Internet Explorer สนับสนุนการใช้งานอื่นที่ปล่อยกิจกรรม ReadyStateChange องค์ประกอบ <script> มีคุณสมบัติ ReadyState ที่มีการเปลี่ยนแปลงค่าเป็นกระบวนการดาวน์โหลดไฟล์ภายนอก มีห้าค่าสำหรับ ReadeState:
1. "uninitialized": สถานะเริ่มต้น
2. "กำลังโหลด": การดาวน์โหลดเริ่มต้น
3. "โหลด": ดาวน์โหลดเสร็จสมบูรณ์
4. "อินเทอร์แอคทีฟ": การดาวน์โหลดเสร็จสมบูรณ์ แต่ยังไม่พร้อมใช้งาน
5. "เสร็จสมบูรณ์": ข้อมูลทั้งหมดพร้อมแล้ว
เอกสาร Microsoft กล่าวว่าในช่วงวงจรชีวิตขององค์ประกอบ <Script> ค่าของ ReadeState เหล่านี้อาจไม่ปรากฏขึ้น แต่ไม่ได้ระบุว่าจะใช้ค่าใดเสมอ ในทางปฏิบัติสิ่งที่เราสนใจมากที่สุดคือรัฐ "โหลด" และ "สมบูรณ์" Internet Explorer ไม่ได้มีสถานะสุดท้ายที่แสดงโดยค่า ReadeState ทั้งสองนี้ บางครั้งองค์ประกอบ <script> จะได้รับ "ตัวโหลด" แต่ไม่เคย "เสร็จสมบูรณ์" แต่ในบางกรณี "เสร็จสมบูรณ์" จะปรากฏขึ้นและ "โหลด" ไม่สามารถใช้งานได้ วิธีที่ปลอดภัยที่สุดคือการตรวจสอบทั้งสองรัฐในเหตุการณ์ ReadyStateChange และเมื่อหนึ่งในรัฐปรากฏขึ้นให้ลบการจัดการเหตุการณ์ ReadyStateChange (ตรวจสอบให้แน่ใจว่าเหตุการณ์จะไม่ถูกประมวลผลสองครั้ง):
แสดงรายการ 8 การโหลดสคริปต์ JavaScript โดยการตรวจสอบสถานะ ReadeState
var script = document.createElement ("script") script.type = "text/javascript"; // internet explorerscript.onreadyStateChange = function () {ถ้า (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") การแจ้งเตือน ("สคริปต์โหลด"); }}; script.src = "script1.js"; document.getElementByTagname ("head") [0] .AppendChild (สคริปต์);ในกรณีส่วนใหญ่คุณต้องการเรียกใช้ฟังก์ชันเพื่อใช้การโหลดแบบไดนามิกของไฟล์ JavaScript ฟังก์ชั่นต่อไปนี้ห่อหุ้มฟังก์ชั่นที่จำเป็นโดยการใช้งานมาตรฐานและการใช้งานเช่น:
รายการ 9 encapsulation โดยฟังก์ชั่น
ฟังก์ชั่น loadscript (url, callback) {var script = document.createElement ("script") script.type = "text/javascript"; if (script.readyState) {// ie script.onreadyStateChange = function () {ถ้า (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") {script.onreadyStateChange = null; การโทรกลับ (); - } else {// อื่น ๆ script.onload = function () {callback (); - } script.src = url; document.getElementByTagname ("head") [0] .AppendChild (สคริปต์);}ฟังก์ชั่นนี้ได้รับสองพารามิเตอร์: URL ของไฟล์ JavaScript และฟังก์ชันการเรียกกลับที่ถูกเรียกใช้เมื่อการรับ JavaScript เสร็จสิ้น การตรวจสอบแอตทริบิวต์ใช้เพื่อกำหนดเหตุการณ์ที่จะตรวจสอบ ในขั้นตอนสุดท้ายให้ตั้งค่าคุณสมบัติ SRC และเพิ่มองค์ประกอบ <script> ลงในหน้า ฟังก์ชั่น loadscript () นี้ใช้ดังนี้:
รายการ 10 วิธีใช้ฟังก์ชัน loadscript ()
loadscript ("script1.js", function () {alert ("ไฟล์ถูกโหลด!");});คุณสามารถโหลดไฟล์ JavaScript จำนวนมากบนหน้า แต่ระวังว่าเบราว์เซอร์ไม่รับประกันลำดับที่โหลดไฟล์ ในบรรดาเบราว์เซอร์ที่สำคัญทั้งหมด Firefox และ Opera ตรวจสอบให้แน่ใจว่ามีการดำเนินการสคริปต์ตามลำดับที่คุณระบุ เบราว์เซอร์อื่น ๆ จะดาวน์โหลดและเรียกใช้ไฟล์รหัสที่แตกต่างกันในลำดับที่เซิร์ฟเวอร์ส่งคืน คุณสามารถต่อการดาวน์โหลดการดำเนินการร่วมกันเพื่อให้แน่ใจว่าคำสั่งซื้อของพวกเขาดังนี้:
รายการ 11 โหลดสคริปต์ JavaScript หลายตัวผ่านฟังก์ชัน loadscript ()
loadscript ("script1.js", function () {loadscript ("script2.js", function () {loadscript ("script3.js", function () {alert ("ไฟล์ทั้งหมดถูกโหลด!");});});}); -รหัสนี้รอให้ script1.js พร้อมใช้งานก่อนที่จะเริ่มโหลด script2.js จากนั้นเริ่มโหลด script3.js หลังจาก script2.js พร้อมใช้งาน แม้ว่าวิธีนี้จะเป็นไปได้ แต่ก็ยังค่อนข้างลำบากหากมีไฟล์มากมายให้ดาวน์โหลดและดำเนินการ หากลำดับของหลายไฟล์มีความสำคัญมากวิธีที่ดีกว่าคือการเชื่อมต่อไฟล์เข้ากับไฟล์เดียวในลำดับที่ถูกต้อง ไฟล์แบบสแตนด์อโลนสามารถดาวน์โหลดรหัสทั้งหมดได้ในครั้งเดียว (เนื่องจากสิ่งนี้เสร็จสิ้นแบบอะซิงโครนัสไม่มีการสูญเสียในการใช้ไฟล์ขนาดใหญ่)
การโหลดสคริปต์แบบไดนามิกเป็นรูปแบบที่ใช้กันมากที่สุดในการดาวน์โหลด JavaScript ที่ไม่ปิดกั้นเนื่องจากสามารถข้ามเบราว์เซอร์และใช้งานง่าย
การใช้วัตถุ XMLHTTPREQUEST (XHR)
เทคนิคนี้จะสร้างวัตถุ XHR ก่อนจากนั้นดาวน์โหลดไฟล์ JavaScript แล้วฉีดรหัส JavaScript ลงในหน้าด้วยองค์ประกอบ <Script> แบบไดนามิก รายการ 12 เป็นตัวอย่างง่ายๆ:
แสดงรายการ 12 การโหลดสคริปต์ JavaScript ผ่านวัตถุ XHR
var xhr = ใหม่ xmlhttprequest (); xhr.open ("รับ", "script1.js", true); xhr.onreadystatechange = function () {ถ้า (xhr.readystate == 4) {ถ้า (xhr.status> = 200 && document.createElement ("สคริปต์"); script.type = "text/javascript"; script.text = xhr.responsetext; document.body.appendchild (สคริปต์); }}}; xhr.send (null);รหัสนี้ส่งคำขอ GET ไปยังเซิร์ฟเวอร์เพื่อรับไฟล์ script1.js ตัวจัดการเหตุการณ์ onreadystatechange ตรวจสอบว่า ReadyState เป็น 4 หรือไม่จากนั้นตรวจสอบว่ารหัสสถานะ HTTP นั้นถูกต้องหรือไม่ (2xx หมายถึงการตอบสนองที่ถูกต้อง 304 หมายถึงการตอบกลับแคช) หากได้รับการตอบกลับที่ถูกต้ององค์ประกอบ <Script> ใหม่จะถูกสร้างขึ้นและแอตทริบิวต์ข้อความถูกตั้งค่าเป็นสตริง ResponsETEXT ที่ได้รับจากเซิร์ฟเวอร์ การทำเช่นนี้จะสร้างองค์ประกอบ <script> ด้วยรหัสอินไลน์ เมื่อมีการเพิ่มองค์ประกอบ <Script> ใหม่ลงในเอกสารแล้วรหัสจะถูกเรียกใช้งานและพร้อมใช้งาน
ข้อได้เปรียบหลักของวิธีการนี้คือคุณสามารถดาวน์โหลดรหัส JavaScript ที่ไม่ได้ดำเนินการทันที เนื่องจากรหัสส่งคืนนอกแท็ก <script> (กล่าวอีกนัยหนึ่งมันจึงไม่อยู่ภายใต้แท็ก <script>) มันจะไม่ถูกเรียกใช้งานโดยอัตโนมัติหลังจากดาวน์โหลดซึ่งช่วยให้คุณเลื่อนการดำเนินการจนกว่าทุกอย่างจะพร้อม ข้อดีอีกประการหนึ่งคือรหัสเดียวกันไม่ได้โยนข้อยกเว้นในเบราว์เซอร์ที่ทันสมัยทั้งหมด
ข้อ จำกัด หลักของวิธีนี้คือไฟล์ JavaScript จะต้องอยู่ในโดเมนเดียวกับหน้าและไม่สามารถดาวน์โหลดได้จาก CDN (CDN หมายถึง "เครือข่ายการส่งเนื้อหา" ดังนั้นเว็บเพจขนาดใหญ่มักจะไม่ใช้เทคโนโลยีการฉีดสคริปต์ XHR
เพิ่มฟังก์ชั่นบางอย่างที่คุณมักใช้
ฟังก์ชั่น loadjs (url, callback, charset) {var head = document.getElementByTagname ("head") [0]; var script = document.createElement ("สคริปต์"); if (!! charset) script.charset = "utf-8"; script.src = url; script.onload = script.onreadyStateChange = function () {var f = script.readyState; if (f && f! = "โหลด" && f! = "เสร็จสมบูรณ์") ส่งคืน; script.onload = script.onreadyStateChange = null; head.removeChild (สคริปต์) ถ้า (โทรกลับ) {callback () || การโทรกลับ}; - head.appendchild (สคริปต์);} // JS ฟังก์ชั่นการโหลดแบบซิงโครนัส getScripts (i, linkarray, fn) {env || getenv (); var script = document.createElement ('script'); script.type = 'text/javascript'; script.src = linkarray [i]; var head = document.head || document.getElementsByTagname ('head') [0]; head.appendchild (สคริปต์); if (env.ie && 'OnReadyStateChange' ในสคริปต์ &&! ('draggable' ในสคริปต์)) {// ie เบราว์เซอร์โหลด script.onreadyStateChange = function () {ถ้า (/loadEdEdOcomplete/.test(Script.ReadyState)) if (i === linkarray.length-1) {ถ้า (fn) {fn (); }} else {getScripts (++ i, linkarray, fn); - } else {script.onload = function () {if (i === linkarray.length-1) {ถ้า (fn) {fn (); }} else {getScripts (++ i, linkarray, fn); - }} // js มีการโหลดการพึ่งพา getScripts (0, ['http://caibaojian.com/demo/base.js', 'http://caibaojian.com/demo/reset.js']สรุป
มีหลายวิธีในการลดผลกระทบด้านประสิทธิภาพของ JavaScript:
การวางแท็ก <Script> ทั้งหมดที่ด้านล่างของหน้านั่นคือก่อนที่จะปิดแท็กสิ่งนี้ทำให้มั่นใจได้ว่าหน้านั้นได้รับการแสดงผลก่อนที่สคริปต์จะถูกดำเนินการ
ผสานสคริปต์ให้มากที่สุด แท็ก <Script> ที่น้อยลงในหน้านั้นเร็วเท่าไหร่มันก็จะโหลดได้เร็วขึ้นและเร็วเท่าไหร่ก็จะตอบสนองได้เร็วขึ้น สิ่งนี้เป็นจริงสำหรับสคริปต์ภายนอกและสคริปต์แบบฝัง
ใช้สคริปต์ JavaScript ที่ยังไม่ถูกบล็อกเพื่อดาวน์โหลด:
ใช้แอตทริบิวต์การเลื่อนเวลาของแท็ก <script> (ใช้ได้เฉพาะสำหรับ IE และ Firefox 3.5 หรือสูงกว่า);
ใช้องค์ประกอบ <Script> ที่สร้างขึ้นแบบไดนามิกเพื่อดาวน์โหลดและเรียกใช้รหัส
ใช้วัตถุ XHR เพื่อดาวน์โหลดรหัส JavaScript และฉีดลงในหน้า
กลยุทธ์ข้างต้นสามารถปรับปรุงประสิทธิภาพที่แท้จริงของเว็บไซต์และแอปพลิเคชันที่ต้องการจาวาสคริปต์จำนวนมาก
ข้างต้นเป็นเนื้อหาเต็มรูปแบบของการเพิ่มประสิทธิภาพการเพิ่มประสิทธิภาพของ JavaScript Performance และการดำเนินการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน