ในระหว่างกระบวนการพัฒนาสคริปต์ สตริงขนาดใหญ่มักจะถูกรวมและประกบกันเพื่อเอาต์พุตตามกฎบางอย่าง ตัวอย่างเช่น เมื่อเขียนตัวควบคุมสคริปต์ เอาต์พุตแท็ก HTML ที่ควบคุมลักษณะที่ปรากฏของตัวควบคุมทั้งหมด หรือเมื่อวิเคราะห์และสร้างแท็ก HTML แบบไดนามิกหลังจากได้รับค่าส่งคืนฝั่งเซิร์ฟเวอร์ใน AJAX แต่ฉันจะไม่พูดถึงแอปพลิเคชันเฉพาะของ การประกบสตริงที่นี่ ฉันแค่อยากจะหารือเกี่ยวกับประสิทธิภาพของการประกบกันที่นี่
เมื่อเราเขียน string splicing เราจะใช้ตัวดำเนินการ "+=" เสมอ นั่นคือ s += String; นี่เป็นวิธีการเขียนที่คุ้นเคยที่สุด ฉันไม่รู้ว่าคุณสังเกตเห็นหรือไม่ว่าความจุของสตริงที่รวมกันคือ เมื่อเป็นตัวเลข สิบหรือหลายร้อย K การดำเนินการสคริปต์ช้ามากและการใช้งาน CPU สูงมาก ตัวอย่างเช่น:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
ผลลัพธ์ var = "";
for(var i=0; i<2000; i++) result += str;
ในขั้นตอนเดียว สตริงผลลัพธ์คือ 200K ใช้เวลา 1.1 วินาที (เกี่ยวข้องกับการกำหนดค่าคอมพิวเตอร์) และค่าสูงสุดของ CPU คือ 100 % (เพื่อที่จะเห็นผลอย่างเป็นธรรมชาติมากขึ้น ฉันจึงทำการวนซ้ำเพิ่มเติม) เป็นไปได้ว่าขั้นตอนการดำเนินการดังกล่าวใช้เวลามากกว่าหนึ่งวินาทีของฉัน เมื่อรวมกับการใช้เวลาของโค้ดอื่น ๆ เวลาในการดำเนินการของบล็อกสคริปต์ทั้งหมดก็ทนไม่ได้ มีวิธีแก้ปัญหาการเพิ่มประสิทธิภาพหรือไม่? มีวิธีอื่นอีกไหม? คำตอบคือใช่แน่นอน ไม่เช่นนั้นการเขียนบทความนี้คงเป็นเรื่องไร้สาระ
วิธีที่เร็วกว่าคือการใช้อาร์เรย์ เมื่อทำการประกบกันในลูป แทนที่จะประกบกันเป็นสตริง สตริงจะถูกใส่เข้าไปในอาร์เรย์ และสุดท้าย array.join("") จะถูกนำมาใช้เพื่อรับตัวอย่างโค้ดผลลัพธ์ :
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
ผลลัพธ์ var = "", a = อาร์เรย์ใหม่ ();
สำหรับ (var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
คุณสามารถทดสอบเวลาที่ใช้ในการรวมสตริงที่มีขนาดเท่ากัน ผลลัพธ์ที่ฉันทดสอบที่นี่คือ: <15 มิลลิวินาที ซึ่งหมายความว่าในการประกอบสายขนาด 200K นั้น การสิ้นเปลืองเวลาของทั้งสองโหมดนั้นเกือบจะเป็นสองเท่าของขนาด นั่นหมายความว่าอะไร? หมายความว่าคนหลังเลิกงานและกลับจากรับประทานอาหารกลางวันแล้วในขณะที่คนก่อนยังทำงานหนักอยู่ ฉันเขียนหน้าทดสอบ คุณสามารถคัดลอกโค้ดต่อไปนี้และบันทึกเป็นไฟล์ HTM และเปิดมันบนหน้าเว็บเพื่อทดสอบความแตกต่างด้านประสิทธิภาพระหว่างทั้งสอง อย่างไรก็ตาม สิ่งที่ฉันทดสอบคือโค้ดแรกใช้เวลาครึ่งนาทีจึงจะเสร็จสมบูรณ์ และอย่างหลัง หรือสามารถทำได้ภายใน 0.07 วินาที (วนซ้ำ 10,000 ครั้ง)
<ร่างกาย>
จำนวนการต่อสตริง<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="String splicing method" onclick="method1()">
<input type="button" value="วิธีการรวมการกำหนดอาร์เรย์" onclick="method2()"><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="จาวาสคริปต์">
-
//ความยาวของสตริงที่ประกบกันนี้คือ 100 ไบต์ ผู้เขียน: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n"
// วิธีที่ 1
ฟังก์ชั่น method1()
-
ผลลัพธ์ var = "";
var totle = parseInt(document.getElementById("totle").value);
var n = วันที่ใหม่ ().getTime();
สำหรับ (var i=0; i<totle; i++)
-
ผลลัพธ์ += STR;
}
document.getElementById("show").value = ผลลัพธ์;
var s = "วิธีการประกบสตริง: ความยาวของสตริงขนาดใหญ่หลังประกบ"+ result.length +"bytes,"+
"การประกบกันต้องใช้เวลา" + (new Date().getTime()-n) + "Milliseconds!";
document.getElementById("method1").innerHTML = s;
}
//วิธีที่ 2
ฟังก์ชั่น method2()
-
ผลลัพธ์ var = "";
var totle = parseInt(document.getElementById("totle").value);
var n = วันที่ใหม่ ().getTime();
var a = อาร์เรย์ใหม่ ();
สำหรับ (var i=0; i<totle; i++)
-
ก[i] = STR;
-
result = a.join(""); a=null;
document.getElementById("show").value = ผลลัพธ์;
var s = "วิธีการรวมการกำหนดอาร์เรย์: ความยาวของสตริงขนาดใหญ่หลังประกบ"+ result.length +"bytes,"+
"การประกบกันต้องใช้เวลา" + (new Date().getTime()-n) + "Milliseconds!";
document.getElementById("method2").innerHTML = s;
-
-
</SCRIPT>
สุดท้ายนี้ ฉันขอพูดสักสองสามคำ การรวมอาร์เรย์จะถูกใช้สำหรับการต่อสตริงในอนาคตหรือไม่ ขึ้นอยู่กับความต้องการที่แท้จริงของคุณ สำหรับการรวมไบต์จำนวนสองสามไบต์หรือไบต์ระดับ K เข้าด้วยกัน ไม่จำเป็นต้องใช้วิธีอาร์เรย์ เนื่องจากตัวแปรอาร์เรย์ที่เปิดมีราคาแพงเช่นกัน หากมีชุดสตริง K มากกว่าสองสามชุด ประสิทธิภาพของอาเรย์จะสูง
-------------------------------------------------- -------------------------------------------------- ----------
IE 6.0:
วิธีการต่อสตริง: สตริงขนาดใหญ่ที่ต่อเข้าด้วยกันมีความยาว 1,010,000 ไบต์ และการต่อใช้เวลา 22,089 มิลลิวินาที!
วิธีการรวมการกำหนดอาร์เรย์: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 218 มิลลิวินาที!
ไฟร์ฟอกซ์ 1.0:
วิธีการประกบสตริง: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 1,044 มิลลิวินาที!
วิธีการรวมการกำหนดอาร์เรย์: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 1,044 มิลลิวินาที!
โมซิลล่า 1.7:
วิธีการประกบสตริง: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 1,045 มิลลิวินาที!
วิธีการรวมการกำหนดอาร์เรย์: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 1,044 มิลลิวินาที!
เน็ตสเคป 7.0:
วิธีการต่อสตริง: สตริงขนาดใหญ่ที่ต่อเข้าด้วยกันมีความยาว 1,010,000 ไบต์ และการต่อใช้เวลา 10,273 มิลลิวินาที!
วิธีการรวมการกำหนดอาร์เรย์: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1,010,000 ไบต์ และการประกบใช้เวลา 1,138 มิลลิวินาที!
โอเปร่า 7.54:
วิธีการต่อสตริง: สตริงขนาดใหญ่ที่ต่อเข้าด้วยกันมีความยาว 1,010,000 ไบต์ และการต่อใช้เวลา 6,968 มิลลิวินาที!
วิธีการรวมการกำหนดอาร์เรย์: สตริงขนาดใหญ่ที่ประกบกันมีความยาว 1010,000 ไบต์ และการประกบใช้เวลา 6922 มิลลิวินาที!
ผลการทดสอบการวนซ้ำ 10,000 ครั้งแสดงให้เห็นว่าประสิทธิภาพสามารถปรับปรุงได้อย่างมากใน IE และ Netscape ในขณะที่การใช้เวลาทั้งสองวิธีใน Firefox Mozilla Opera โดยพื้นฐานแล้วข้อมูลเหล่านี้เพียงพอที่จะตัดสินว่าวิธีการรวมอาร์เรย์นั้นดีกว่า การต่อสายแบบดั้งเดิม