บทความนี้อธิบายเทคนิคทั่วไปสำหรับ JavaScript เพื่อปรับปรุงประสิทธิภาพ แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
1. ให้ความสนใจกับขอบเขต
เมื่อจำนวนขอบเขตในห่วงโซ่ขอบเขตเพิ่มขึ้นเวลาในการเข้าถึงตัวแปรนอกขอบเขตปัจจุบันก็เพิ่มขึ้นเช่นกัน การเข้าถึงตัวแปรทั่วโลกนั้นช้ากว่าการเข้าถึงตัวแปรท้องถิ่นเสมอเพราะคุณต้องสำรวจห่วงโซ่ขอบเขต
1). มันถูกต้องเสมอที่จะหลีกเลี่ยงการค้นหาทั่วโลกเพื่อจัดเก็บวัตถุระดับโลกที่จะใช้หลายครั้งในฟังก์ชั่นเป็นตัวแปรท้องถิ่น
2). หลีกเลี่ยงสิ่งนั้นด้วยคำแถลงด้วยการสร้างขอบเขตของตัวเองซึ่งจะเป็นการเพิ่มความยาวของห่วงโซ่ขอบเขตซึ่งรหัสถูกดำเนินการ
2. เลือกวิธีการที่เหมาะสม
ส่วนหนึ่งของปัญหาประสิทธิภาพเกี่ยวข้องกับอัลกอริทึมหรือวิธีการที่ใช้ในการแก้ปัญหา
1). หลีกเลี่ยงการค้นหาแอตทริบิวต์ที่ไม่จำเป็น
ในวิทยาศาสตร์คอมพิวเตอร์ความซับซ้อนของอัลกอริทึมจะแสดงด้วยสัญลักษณ์ O อัลกอริทึมที่ง่ายที่สุดและเร็วที่สุดคือค่าคงที่คือ O (1) หลังจากนั้นอัลกอริทึมจะซับซ้อนมากขึ้นเรื่อย ๆ และใช้เวลานานกว่าในการดำเนินการ ประเภทอัลกอริทึม JavaScript ทั่วไปคือ:
ค่าคงที่: ไม่ว่าจะมีค่ากี่ค่าเวลาการดำเนินการจะคงที่ โดยทั่วไปจะแสดงถึงค่าที่ง่ายและค่าที่เก็บไว้ในตัวแปร
LOGARITHM: เวลาดำเนินการทั้งหมดเกี่ยวข้องกับจำนวนค่า แต่ไม่จำเป็นต้องได้รับแต่ละค่าเพื่อให้อัลกอริทึมเสร็จสมบูรณ์ ตัวอย่างเช่น: การค้นหาแบบไบนารี
เชิงเส้น: เวลาดำเนินการทั้งหมดเกี่ยวข้องโดยตรงกับจำนวนของค่า ตัวอย่างเช่น: วนผ่านองค์ประกอบทั้งหมดในอาร์เรย์
สแควร์: เวลาดำเนินการทั้งหมดเกี่ยวข้องกับจำนวนของค่าและแต่ละค่าจะต้องได้รับอย่างน้อย N ครั้ง ตัวอย่างเช่น: แทรกเรียงลำดับ
CUBE: เวลาดำเนินการทั้งหมดเกี่ยวข้องกับจำนวนค่าและแต่ละค่าจะต้องได้รับอย่างน้อยสี่เหลี่ยม N
การใช้ตัวแปรและอาร์เรย์นั้นมีประสิทธิภาพมากกว่าการเข้าถึงคุณสมบัติของวัตถุ การค้นหาแอตทริบิวต์ใด ๆ บนวัตถุใช้เวลานานกว่าการเข้าถึงตัวแปรหรืออาร์เรย์เนื่องจากคุณสมบัติที่มีชื่อนั้นจะต้องค้นหาในห่วงโซ่ต้นแบบ
โดยทั่วไปแล้วตราบใดที่ความซับซ้อนของอัลกอริทึมสามารถลดลงได้ก็จะต้องลดลงให้มากที่สุดเท่าที่จะทำได้ ใช้ตัวแปรท้องถิ่นให้มากที่สุดเท่าที่จะเป็นไปได้เพื่อแทนที่การค้นหาคุณสมบัติด้วยการค้นหาค่า นอกจากนี้หากคุณสามารถเข้าถึงได้ด้วยตำแหน่งอาร์เรย์แบบดิจิทัลหรือใช้แอตทริบิวต์ชื่อ (เช่นวัตถุที่มีน็อด) ให้ใช้ตำแหน่งอาร์เรย์
2). เพิ่มประสิทธิภาพการวนซ้ำ
. การทำซ้ำการด้อยค่าในหลายกรณีตัววนซ้ำที่เริ่มต้นจากค่าสูงสุดและลดลงอย่างต่อเนื่องในลูปมีประสิทธิภาพมากขึ้น
ข. เงื่อนไขการเลิกจ้างที่ง่ายขึ้นเนื่องจากกระบวนการแต่ละรอบจะคำนวณเงื่อนไขการยกเลิกจึงต้องมั่นใจได้ว่าจะเร็วที่สุด
ค. ร่างกายลูปที่ง่ายขึ้นร่างกายลูปเป็นตัวที่ดำเนินการมากที่สุดดังนั้นตรวจสอบให้แน่ใจว่าได้รับการปรับให้เหมาะสมในระดับสูงสุด ตรวจสอบให้แน่ใจว่าไม่มีการคำนวณอย่างเข้มข้นที่สามารถลบออกได้อย่างง่ายดายจากลูป
d. ที่ใช้กันมากที่สุดสำหรับและในขณะที่ลูปในลูปหลังการทดสอบคือลูปทดสอบล่วงหน้า โพสต์ทดสอบลูปเช่น DO-ในขณะที่สามารถหลีกเลี่ยงการสิ้นสุดการคำนวณสภาพเริ่มต้นและเร็วขึ้น
3). ขยายลูปเมื่อมีการกำหนดจำนวนลูปกำจัดลูปและการใช้การโทรหลายฟังก์ชันมักจะเร็วขึ้น ตัวอย่างเช่นอุปกรณ์ Duff ที่มีชื่อเสียง
4). หลีกเลี่ยงคำอธิบายสองครั้ง
เมื่อรหัส JavaScript ต้องการแยก JavaScript จะมีการลงโทษการตีความสองครั้ง ตัวอย่างต่อไปนี้:
Eval ("Alert ('Hello World!')"); // รหัสบางส่วนประเมินค่าที่ตายตัว:
การแจ้งเตือน ('Hello World'); var sayshi = ฟังก์ชั่นใหม่ ("Alert ('Hello World!')");ที่ตายตัว:
var sayshi = function () {Alert ("Hellow World! ');}; Settimeout ("Alert ('Hellow World!')", 500);ที่ตายตัว:
Settimeout (ฟังก์ชั่น) ({Alert ('Hellow World!');}, 500);5). วิธีอื่น ๆ
วิธีการดั้งเดิมนั้นเร็วกว่า - เมื่อใดก็ตามที่เป็นไปได้ให้ใช้วิธีการดั้งเดิมแทนการเขียนใหม่ใน JavaScript ด้วยตัวคุณเอง วิธีการดั้งเดิมถูกเขียนในภาษาที่รวบรวมเช่น C/C ++ ดังนั้นจึงเร็วกว่า JavaScript มาก สิ่งที่ลืมได้ง่ายที่สุดใน JavaScript คือการดำเนินการทางคณิตศาสตร์ที่ซับซ้อนซึ่งสามารถพบได้ในวัตถุคณิตศาสตร์ วิธีการเหล่านี้เร็วกว่าวิธีอื่น ๆ ที่เขียนในจาวาสคริปต์เช่นไซน์และโคไซน์
คำสั่งสวิตช์จะเร็วขึ้น - หากมีคำสั่ง IF -ELSE ที่ซับซ้อนซึ่งสามารถแปลงเป็นคำสั่งสวิตช์เดียวคุณสามารถรับรหัสได้เร็วขึ้น นอกจากนี้คุณยังสามารถจัดระเบียบคำสั่งเคสตามคำสั่งที่น่าจะเป็นไปได้มากที่สุดเพื่อให้คำสั่งสวิตช์เพิ่มประสิทธิภาพให้เหมาะสมยิ่งขึ้น
ตัวดำเนินการบิตจะเร็วขึ้น - เมื่อดำเนินการทางคณิตศาสตร์การดำเนินการบิตจะเร็วกว่าการดำเนินการบูลีนหรือคณิตศาสตร์ใด ๆ การแปลงการดำเนินการบิตแบบเลือกสามารถปรับปรุงประสิทธิภาพของการคำนวณที่ซับซ้อนได้อย่างมาก ตัวอย่างเช่นโมดูโลลอจิกและตรรกะผลรวมคุณสามารถพิจารณาใช้การดำเนินการบิตเพื่อแทนที่
3. ลดจำนวนข้อความย่อให้น้อยที่สุด
1). การประกาศหลายตัวแปร
ชอบ:
// 4 คำสั่ง --- มันเป็นของเสียของ var count = 5; var color = "blue"; var value = [1,2,3]; var now = new Date ();
การเพิ่มประสิทธิภาพ:
var count = 5, color = "blue", ค่า = [1,2,3], noiw = วันที่ใหม่ ();
การเพิ่มประสิทธิภาพนี้เป็นเรื่องง่ายมากที่จะทำในกรณีส่วนใหญ่และเร็วกว่าการประกาศตัวแปรเดียวแยกกัน
2). แทรกค่าซ้ำ
ชอบ:
ชื่อ var = ค่า [i]; i ++;
การเพิ่มประสิทธิภาพ:
ชื่อ var = ค่า [i ++];
3). ใช้อาร์เรย์และตัวอักษรวัตถุ
ชอบ:
ค่า var = new Array (); ---> ค่า var = [];
var obj = วัตถุใหม่ (); ---> var obj = {};
4. เพิ่มประสิทธิภาพการโต้ตอบของ DOM
1). ลดการอัปเดตในสถานที่ให้น้อยที่สุด
เมื่อคุณต้องการเข้าถึงส่วน DOM เป็นส่วนหนึ่งของหน้าเว็บที่แสดงขึ้นคุณกำลังทำการอัปเดตสด เหตุผลที่เรียกว่าการอัปเดตสดคือหน้าจะต้องได้รับการอัปเดตทันที (ในสถานที่) ไปยังจอแสดงผลของผู้ใช้ ไม่ว่าจะเป็นการแทรกตัวละครตัวเดียวหรือลบคลิปทั้งหมดมีการลงโทษประสิทธิภาพเนื่องจากเบราว์เซอร์ต้องคำนวณขนาดนับไม่ถ้วนเพื่ออัปเดต
ตัวอย่าง:
var list = document.getElementById ("mylist"); สำหรับ (var i = 0; i <10; i ++) {var item = document.createElement ("li"); list.appendchild (รายการ); item.AppendChild (document.createtextNode ("item"+i));}สิ่งนี้จะเพิ่ม 10 โครงการและการดำเนินการนี้ต้องมีการอัปเดตทั้งหมด 20 รายการ ต่อไปนี้คือการปรับปรุงวิธีการต่อไปนี้ในการสร้างชิ้นส่วนเอกสาร:
var list = document.getElementById ("mylist"); var fragment = document.createdocumentFragment (); สำหรับ (var i = 0; i <10; i ++) {fragment.appendchild (รายการ); item.AppendChild (document.createtextNode ("item"+i));} list.appendchlid (แฟรกเมนต์);ในตัวอย่างนี้มีการอัปเดตสดเพียงครั้งเดียวซึ่งเกิดขึ้นหลังจากสร้างโครงการทั้งหมด ชิ้นส่วนเอกสารถูกใช้เป็นตัวยึดชั่วคราวเพื่อวางโครงการที่สร้างขึ้นใหม่ จากนั้นใช้ AppendChild () เพื่อเพิ่มรายการทั้งหมดลงในรายการ โปรดจำไว้ว่าเมื่อ AppendChild () ถูกส่งผ่านในส่วนของเอกสารจะมีเฉพาะโหนดเด็กในส่วนที่ถูกเพิ่มเข้าไปในเป้าหมายและส่วนของตัวเองจะไม่ถูกเพิ่มเข้ามา
เมื่อคุณต้องการอัปเดต DOM ให้พิจารณาใช้การกระจายตัวของเอกสารเพื่อสร้างโครงสร้าง DOM แล้วเพิ่มลงในเอกสารที่มีอยู่
2). ใช้ innerhtml
มีสองวิธีในการสร้างโหนด DOM บนหน้า: การใช้วิธี DOM เช่น createElement (), uptendChild () และการใช้ innerHTML สำหรับการเปลี่ยนแปลง DOM ขนาดเล็กทั้งสองวิธีมีประสิทธิภาพคล้ายกัน สำหรับการเปลี่ยนแปลง DOM ขนาดใหญ่การใช้ InnerHTML นั้นเร็วกว่าการใช้วิธี DOM มาตรฐานมากเพื่อสร้างโครงสร้าง DOM เดียวกัน ในทำนองเดียวกันการใช้ InnerHTML ในครั้งเดียวนั้นเร็วกว่าการใช้ InnerHTML หลายครั้ง
3). ใช้พร็อกซีเหตุการณ์ (ง่ายละเว้น)
4). ให้ความสนใจกับคนโตรง
การลดจำนวนการเข้าถึงไปยัง Nodelist สามารถปรับปรุงประสิทธิภาพของสคริปต์ได้อย่างมาก
วัตถุที่มีเนื้องอกจะถูกส่งคืนเมื่อมีสิ่งต่อไปนี้เกิดขึ้น:
. โทรหา getElementsByTagname ()
ข. รับคุณสมบัติ ChildNodes ขององค์ประกอบ
ค. รับแอตทริบิวต์แอตทริบิวต์ขององค์ประกอบ
d. เข้าถึงคอลเลกชันพิเศษเช่น document.forms, document.images ฯลฯ
มีความจำเป็นที่จะต้องเข้าใจว่าเมื่อใช้วัตถุ nodelist การใช้งานที่สมเหตุสมผลจะช่วยปรับปรุงความเร็วในการดำเนินการของรหัสได้อย่างมาก
ฟังก์ชั่นการควบคุมปริมาณ ที่แนะนำก่อนหน้านี้ก็เป็นสิ่งสำคัญมากเช่นกัน โดยเฉพาะอย่างยิ่งเมื่อหลายลูปใช้เวลานานมากวิธีนี้มีประโยชน์มาก
PS: สำหรับการบีบอัด JavaScript การลดขนาดรหัสเป็นวิธีที่มีประสิทธิภาพในการปรับปรุงประสิทธิภาพของ JavaScript นี่คือเครื่องมือบีบอัดที่ใช้งานได้จริงสองอย่าง:
เครื่องมือการบีบอัด/การจัดรูปแบบ JavaScript:
http://tools.vevb.com/code/jscompress
JSMIN ONLINE JS Tool Tool:
http://tools.vevb.com/code/jsmincompress
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน