ท่ามกลางข้อเสนอแนะ (i) ของ JavaScript เกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บไซต์มีคำแนะนำหลายประการสำหรับการปรับปรุงประสิทธิภาพของเว็บไซต์จากคำขอ HTTP ไปจนถึงการแสดงผลหน้า บทความนี้เป็นบทสรุปจากมุมมองของการแสดง JavaScript หลังจากเรียนรู้หนังสือเล่มอื่นโดย Steve Sounders "คู่มือขั้นสูงเกี่ยวกับการสร้างเว็บไซต์ประสิทธิภาพสูง"
ประสิทธิภาพของ JavaScript เป็นกุญแจสำคัญในการใช้แอพพลิเคชั่นเว็บที่มีประสิทธิภาพสูง
-Steve Sounders
1. ใช้โซ่ขอบเขต JS
ห่วงโซ่ขอบเขต
เมื่อดำเนินการหนึ่งชิ้นของรหัส JavaScript (Global Code หรือฟังก์ชั่น) เอ็นจิ้น JavaScript จะสร้างขอบเขตสำหรับมันหรือที่เรียกว่าบริบทการดำเนินการ หลังจากโหลดหน้าเว็บแล้วขอบเขตส่วนกลางจะถูกสร้างขึ้นก่อนจากนั้นแต่ละฟังก์ชั่นจะถูกดำเนินการจะมีการกำหนดขอบเขตที่สอดคล้องกันซึ่งจะสร้างห่วงโซ่ขอบเขต แต่ละขอบเขตมีห่วงโซ่ขอบเขตที่สอดคล้องกันหัวของห่วงโซ่คือขอบเขตทั่วโลกและหางของห่วงโซ่คือขอบเขตฟังก์ชันปัจจุบัน
จุดประสงค์ของห่วงโซ่ขอบเขตคือการแยกวิเคราะห์ตัวระบุ เมื่อฟังก์ชั่นถูกสร้างขึ้น (ไม่ดำเนินการ) สิ่งนี้อาร์กิวเมนต์ชื่อพารามิเตอร์ชื่อและตัวแปรท้องถิ่นทั้งหมดในฟังก์ชันจะถูกเพิ่มเข้าไปในขอบเขตปัจจุบัน เมื่อ JavaScript ต้องการค้นหาตัวแปร X (กระบวนการนี้เรียกว่าความละเอียดตัวแปร) มันจะค้นหาก่อนว่ามีแอตทริบิวต์ X จากส่วนท้ายของห่วงโซ่ในห่วงโซ่ขอบเขตนั่นคือขอบเขตปัจจุบัน หากไม่พบให้ค้นหาต่อไปตามโซ่ขอบเขตจนกว่าหัวโซ่นั่นคือห่วงโซ่ขอบเขตทั่วโลกและไม่พบตัวแปรเชื่อว่าไม่มีตัวแปร X ในห่วงโซ่ขอบเขตของรหัสนี้และข้อผิดพลาดอ้างอิง (อ้างอิงอ้างอิง) ถูกโยนทิ้ง
การจัดการความลึกของห่วงโซ่ขอบเขตเป็นวิธีที่ง่ายในการปรับปรุงประสิทธิภาพด้วยงานเพียงเล็กน้อย เราควรหลีกเลี่ยงความเร็วในการดำเนินการที่ช้าเนื่องจากการเติบโตของห่วงโซ่ขอบเขตโดยไม่ได้ตั้งใจ
ใช้ตัวแปรท้องถิ่น (โซ่ขอบเขตสั้นให้มากที่สุด)
หากเราเข้าใจแนวคิดของโซ่ขอบเขตเราควรชัดเจนว่าตัวแปรการแยกวิเคราะห์เครื่องยนต์ JavaScript นั้นเกี่ยวข้องกับความลึกของโซ่ขอบเขต เห็นได้ชัดว่าตัวแปรท้องถิ่นอยู่ที่ปลายโซ่และมีความเร็วในการเข้าถึงที่เร็วที่สุด ดังนั้นประสบการณ์ที่ดีคือ: เมื่อมีการใช้ตัวแปรที่ไม่ใช่ท้องถิ่นมากกว่าหนึ่งครั้งโปรดใช้ตัวแปรท้องถิ่นเพื่อจัดเก็บตัวอย่างเช่น:
ฟังก์ชั่นเปลี่ยนไป () {document.getElementById ('mydiv'). className = 'เปลี่ยน'; document.getElementById ('mydiv'). style.height = 150;}ที่นี่องค์ประกอบ mydiv dom ถูกอ้างอิงสองครั้ง สำหรับการอ้างอิงที่เร็วขึ้นเราควรเก็บไว้ในตัวแปรท้องถิ่น ประโยชน์ของการทำสิ่งนี้ไม่เพียง แต่ทำให้โซ่ขอบเขตสั้นลงเท่านั้น แต่ยังหลีกเลี่ยงการสืบค้นที่ซ้ำกันขององค์ประกอบ DOM:
ฟังก์ชั่นเปลี่ยนไป () {var mydivstyle = document.getElementById ('mydiv'). style; mydiv.classname = 300; mydiv.style.height = 150;}หลีกเลี่ยงการใช้กับ (อย่าเติบโตขอบเขตโซ่)
โดยทั่วไปในระหว่างการดำเนินการโค้ดโซ่ขอบเขตของฟังก์ชั่นจะได้รับการแก้ไข แต่ด้วยสามารถเพิ่มขอบเขตห่วงโซ่ของฟังก์ชันชั่วคราวได้ชั่วคราว ใช้เพื่อแสดงคุณสมบัติของวัตถุเป็นตัวแปรท้องถิ่นเพื่อให้เข้าถึงได้ง่ายเช่น:
var user = {ชื่อ: 'vicfeel', อายุ: '23 '}; ฟังก์ชั่น showuser () {var local = 0; ด้วย (ผู้ใช้) {console.log ("ชื่อ" + ชื่อ); console.log ("อายุ" + อายุ); console.log (local);ในตัวอย่างนี้มีการเพิ่มขอบเขตชั่วคราวในตอนท้ายของห่วงโซ่ขอบเขตโชว์เซอร์ซึ่งเก็บคุณสมบัติทั้งหมดของวัตถุผู้ใช้นั่นคือห่วงโซ่ขอบเขตที่มีรหัสเพิ่มขึ้น ในรหัสนี้ตัวแปรท้องถิ่นเช่นการเปลี่ยนแปลงในท้องถิ่นจากวัตถุแรกในตอนท้ายของห่วงโซ่เป็นครั้งที่สองซึ่งตามธรรมชาติทำให้การเข้าถึงตัวระบุ จนกว่าคำสั่งจะสิ้นสุดลงโซ่ขอบเขตจะดำเนินการเติบโตต่อไป เนื่องจากข้อบกพร่องนี้เราควรพยายามหลีกเลี่ยงการใช้คำหลัก
2 การควบคุมการไหลที่สมเหตุสมผลยิ่งขึ้น
เช่นเดียวกับภาษาการเขียนโปรแกรมอื่น ๆ JavaScript มีคำสั่งควบคุมการไหล (ลูปเงื่อนไข ฯลฯ ) และการใช้คำสั่งที่เหมาะสมในแต่ละลิงก์สามารถปรับปรุงความเร็วในการทำงานของสคริปต์ได้อย่างมาก
การตัดสินสภาพที่รวดเร็ว
เมื่อพูดถึงการตัดสินตามเงื่อนไขวิธีแรกในการหลีกเลี่ยง:
if (value == 0) {return result0;} else ถ้า (value == 1) {return result1;} else ถ้า (value == 2) {return result2;} else ถ้า (value == 3) {return result3;} else (value == 4) {return result4; ผลลัพธ์ 7;}ปัญหาหลักของวิธีการใช้หากการตัดสินตามเงื่อนไขคือระดับลึกเกินไป เมื่อฉันต้องการค่า = 7 เวลาจะใช้เวลานานกว่าค่า = 0 ซึ่งสูญเสียประสิทธิภาพอย่างมากและสามารถอ่านได้ไม่ดี
วิธีที่ดีกว่าในการตัดสินด้วยสวิตช์
swithc (value) {กรณี 0: ส่งคืนผลลัพธ์ 0; กรณีที่ 1: ผลตอบแทนผลลัพธ์ 1; กรณีที่ 2: ผลตอบแทนผลลัพธ์ 2; กรณีที่ 3: ผลตอบแทนผลลัพธ์ 3; กรณีที่ 4: ผลตอบแทนผลลัพธ์ 4; กรณีที่ 5: ผลตอบแทนที่ 5; กรณีที่ 6: ผลตอบแทนที่ 6;สิ่งนี้ไม่เพียง แต่ช่วยเพิ่มความสามารถในการอ่าน แต่ยังต้องใช้เวลาในการสืบค้นที่เร็วกว่าถ้า แต่ถ้าเร็วกว่าสวิตช์ถ้าเพียงหนึ่งหรือสองเงื่อนไข
ใน JavaScript มีอีกวิธีหนึ่งในการสอบถามเงื่อนไข ตัวอย่างก่อนหน้านี้คือการส่งคืนค่าที่แตกต่างกันตามค่าซึ่งเพิ่งเกิดขึ้นเพื่อให้สามารถใช้อาร์เรย์เพื่อใช้การค้นหาการแมปของตารางแฮช
// กำหนดค่าอาร์เรย์ var ผลลัพธ์ = [ผลลัพธ์ 0, ผลลัพธ์ที่ 1, ผลลัพธ์ 2, ผลลัพธ์ 3, ผลลัพธ์ 4, ผลลัพธ์ 5, ผลลัพธ์ที่ 6, ผลลัพธ์ 7]; // ผลลัพธ์การตอบกลับผลการส่งคืนผลลัพธ์ [ค่า];
วิธีการของอาร์เรย์นี้มีประสิทธิภาพมากขึ้นเมื่อช่วงการสืบค้นมีขนาดใหญ่เพราะไม่จำเป็นต้องตรวจจับขอบเขตบนและล่างและจำเป็นต้องเติมค่าดัชนีลงในแบบสอบถามเท่านั้น ข้อ จำกัด ของมันคือเงื่อนไขสอดคล้องกับค่าเดียวมากกว่าชุดการดำเนินงาน ดังนั้นเราต้องรวมสถานการณ์จริงอย่างครอบคลุมเลือกวิธีการตัดสินที่เหมาะสมของเงื่อนไขและเพิ่มประสิทธิภาพสูงสุด
รอบอย่างรวดเร็ว
มีวิธีการวนซ้ำ 4 วิธีใน JavaScript สำหรับ Loop, Do-Do-Shout ในขณะที่วนลูปและลูปสำหรับ นี่คือวิธีการรีไซเคิลที่ใช้กันทั่วไป:
ค่า var = [1,2,3,4,5]; สำหรับ (var i = 0; i <value.length; i ++) {กระบวนการ (ค่า [i]);}เราจะเห็นได้ว่าการเพิ่มประสิทธิภาพที่ชัดเจนที่สุดของรหัสนี้คือค่าความยาว แต่ละลูปฉันต้องเปรียบเทียบกับความยาวของค่า แอตทริบิวต์การสืบค้นใช้เวลานานกว่าตัวแปรท้องถิ่น หากจำนวนลูปมีขนาดใหญ่ขึ้น ดังนั้นจึงสามารถปรับให้เหมาะสมเช่นนี้:
ค่า var = [1,2,3,4,5]; var length = values.length; // ความยาวอาร์เรย์เก็บข้อมูลตัวแปรตัวแปรท้องถิ่นสำหรับ (var i = 0; i <length; i ++) {process (values [i]);}รหัสนี้ยังสามารถปรับให้เหมาะสมต่อไปลดตัวแปรลูปเป็น 0 แทนที่จะเพิ่มความยาวทั้งหมด
ค่า var = [1,2,3,4,5]; var length = values.length; สำหรับ (var i = length; i-;) {// การลดลงถึง 0 process (ค่า [i]);}ที่นี่จุดสิ้นสุดของลูปจะถูกเปลี่ยนเพื่อเปรียบเทียบกับ 0 ดังนั้นความเร็วของแต่ละลูปจะเร็วขึ้น การเปลี่ยนแปลงง่าย ๆ นี้สามารถประหยัดได้ประมาณ 50% ของเวลาขึ้นอยู่กับความซับซ้อนของลูปขึ้นอยู่กับความซับซ้อน