คุณทดสอบโค้ด JavaScript ได้อย่างไร

รอบ CPU, การใช้หน่วยความจำ, เวลาดำเนินการ ฯลฯ ?

เพิ่มเติม: มีวิธีการเชิงปริมาณของการทดสอบประสิทธิภาพใน JavaScript นอกเหนือจากการรับรู้ว่าโค้ดรันเร็วแค่ไหน?

เครื่องมือสร้างโปรไฟล์เป็นวิธีที่ดีในการรับตัวเลข แต่จากประสบการณ์ของฉันการรับรู้ประสิทธิภาพเป็นสิ่งที่สำคัญสำหรับผู้ใช้ / ลูกค้า ตัวอย่างเช่นเรามีโครงการที่มีหีบเพลง Ext ที่ขยายออกเพื่อแสดงข้อมูลบางส่วนและจากนั้นกริด Ext ที่ซ้อนกันสองสามรายการ จริง ๆ แล้วทุกอย่างกำลังเรนเดอร์เร็วไม่มีการดำเนินการเดี่ยวใช้เวลานานมีข้อมูลจำนวนมากที่ถูกเรนเดอร์พร้อมกันดังนั้นผู้ใช้จึงรู้สึกช้า

เรา 'แก้ไข' สิ่งนี้ไม่ใช่โดยเปลี่ยนเป็นส่วนประกอบที่เร็วขึ้นหรือปรับวิธีการให้เหมาะสม แต่โดยการเรนเดอร์ข้อมูลก่อนจากนั้นเรนเดอร์กริดด้วย setTimeout ดังนั้นข้อมูลที่ปรากฏขึ้นก่อนจากนั้นกริดจะปรากฏขึ้นในวินาทีต่อมา โดยรวมแล้วใช้เวลาประมวลผลนานกว่าเล็กน้อยในการทำเช่นนั้น แต่สำหรับผู้ใช้ประสิทธิภาพการรับรู้ก็ดีขึ้น

วันนี้, Profiler Chrome และเครื่องมืออื่น ๆ ในระดับสากลที่มีอยู่และใช้งานง่ายเช่นเดียวกับconsole.time(), และconsole.profile() performance.now()Chrome ยังให้มุมมองไทม์ไลน์แก่คุณซึ่งสามารถแสดงสิ่งที่กำลังฆ่าอัตราเฟรมของคุณซึ่งผู้ใช้อาจรอ ฯลฯ

การค้นหาเอกสารสำหรับเครื่องมือทั้งหมดเหล่านี้เป็นเรื่องง่ายมากคุณไม่จำเป็นต้องมีคำตอบ SO สำหรับสิ่งนั้น 7 ปีต่อมาฉันจะยังคงทำซ้ำคำแนะนำเดิมของฉันและชี้ให้เห็นว่าคุณสามารถใช้งานโค้ดแบบช้าได้ตลอดไปโดยที่ผู้ใช้จะไม่สังเกตเห็นและรหัสที่ทำงานได้อย่างรวดเร็วและพวกเขาจะบ่นเกี่ยวกับ รหัสรวดเร็วสวยไม่เร็วพอ หรือว่าคำขอของคุณไปยังเซิร์ฟเวอร์ API ของคุณใช้เวลา 220ms หรืออย่างอื่นเช่นนั้น ประเด็นที่ยังคงอยู่คือถ้าคุณนำ profiler ออกไปและหางานทำคุณจะพบมัน แต่มันอาจไม่ใช่งานที่ผู้ใช้ของคุณต้องการ

ฉันยอมรับว่าการรับรู้เป็นสิ่งที่สำคัญจริงๆ แต่บางครั้งฉันแค่อยากรู้ว่าวิธีการทำอะไรเร็วขึ้น บางครั้งความแตกต่างก็มหาศาลและคุ้มค่าที่จะรู้

คุณสามารถใช้ตัวจับเวลาจาวาสคริปต์ แต่โดยทั่วไปแล้วฉันจะได้รับผลลัพธ์ที่สอดคล้องกันมากกว่าเดิมโดยใช้ Chrome ดั้งเดิม (ตอนนี้ยังอยู่ใน Firefox และ Safari) วิธีการ devTool console.time()&console.timeEnd()

ตัวอย่างการใช้งาน:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

อัปเดต (4/4/2559):

เมื่อไม่นานมานี้ Chrome canary ได้เพิ่มการทำโปรไฟล์ระดับ Lineแท็บเครื่องมือ dev ซึ่งจะช่วยให้คุณเห็นว่าแต่ละบรรทัดใช้เวลาดำเนินการนานเท่าใด!

เรามักจะสามารถวัดเวลาที่ถ่ายโดยฟังก์ชั่นใด ๆ โดยวันที่วัตถุที่เรียบง่าย

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

ลองjsPerf เป็นเครื่องมือประสิทธิภาพจาวาสคริปต์ออนไลน์สำหรับการเปรียบเทียบและเปรียบเทียบข้อมูลโค้ด ฉันจะใช้มันตลอดเวลา.

performance.now()เบราว์เซอร์ส่วนใหญ่อยู่ในขณะนี้การดำเนินการระยะเวลาความละเอียดสูงใน มันยอดเยี่ยมnew Date()สำหรับการทดสอบประสิทธิภาพเพราะทำงานได้อย่างอิสระจากนาฬิกาของระบบ

การใช้

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

อ้างอิง

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmusเป็นเครื่องมือที่มีน้ำหนักเบาสำหรับสร้างการทดสอบเกณฑ์มาตรฐานจาวาสคริปต์

ให้ตรวจสอบประสิทธิภาพระหว่างfunction expressionและfunction constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

สิ่งที่ฉันทำข้างต้นคือการสร้างfunction expressionและfunction constructorการดำเนินการเดียวกัน ผลลัพธ์มีดังนี้:

ผลการดำเนินงานของ FireFox

ผลการดำเนินงาน IE

บางคนกำลังแนะนำปลั๊กอินและ / หรือเบราว์เซอร์ที่เฉพาะเจาะจง ฉันจะไม่เพราะพวกเขามีประโยชน์จริงๆสำหรับหนึ่งแพลตฟอร์มนั้น การทดสอบการทำงานบน Firefox จะไม่แปลอย่างถูกต้องเป็น IE7 เมื่อพิจารณาจาก 99.999999% ของเว็บไซต์ที่มีเบราว์เซอร์มากกว่าหนึ่งแห่งคุณต้องตรวจสอบประสิทธิภาพบนแพลตฟอร์มยอดนิยมทั้งหมด

ข้อเสนอแนะของฉันจะเก็บไว้ใน JS สร้างหน้าการเปรียบเทียบกับการทดสอบ JS ทั้งหมดของคุณและเวลาดำเนินการ คุณสามารถให้ AJAX โพสต์ผลลัพธ์กลับมาให้คุณเพื่อให้เป็นไปโดยอัตโนมัติ

จากนั้นเพียงแค่ล้างและทำซ้ำบนแพลตฟอร์มที่แตกต่างกัน

ฉันมีเครื่องมือขนาดเล็กที่ฉันสามารถเรียกใช้กรณีทดสอบขนาดเล็กได้อย่างรวดเร็วในเบราว์เซอร์และรับผลลัพธ์ทันที:

ทดสอบความเร็ว JavaScript

คุณสามารถเล่นกับรหัสและค้นหาว่าเทคนิคไหนดีกว่าในเบราว์เซอร์ที่ทดสอบ

ฉันคิดว่าการทดสอบประสิทธิภาพ JavaScript (เวลา) ค่อนข้างเพียงพอ ผมพบว่าบทความที่มีประโยชน์อย่างมากเกี่ยวกับการทดสอบการทำงานของ JavaScript ที่นี่

นี่คือฟังก์ชั่นง่าย ๆ ที่แสดงเวลาดำเนินการของฟังก์ชันส่งผ่าน:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

คุณสามารถใช้นี้http://getfirebug.com/js.html มันมี profiler สำหรับ JavaScript

คำตอบที่รวดเร็ว

เมื่อวันที่ jQuery (มากขึ้นโดยเฉพาะใน Sizzle) เราจะใช้นี้ (ต้นแบบเช็คเอาท์และความเร็วในการเปิด / index.html ในเบราว์เซอร์ของคุณ) ซึ่งในการใช้งานเปิดbenchmark.js ใช้เพื่อทดสอบประสิทธิภาพของไลบรารี

คำตอบที่ยาว

หากผู้อ่านไม่ทราบความแตกต่างระหว่างมาตรฐานภาระงานและโปรแรกอ่านผลการดำเนินงานบางการทดสอบรากฐานในส่วน "readme ที่ 1" ของ spec.org สิ่งนี้ใช้สำหรับการทดสอบระบบ แต่การเข้าใจรากฐานนี้จะช่วยให้การทดสอบ JS สมบูรณ์แบบเช่นกัน ไฮไลท์บางส่วน:

เกณฑ์มาตรฐานคืออะไร

มาตรฐานคือ "มาตรฐานการวัดหรือประเมินผล" (พจนานุกรม II ของเว็บสเตอร์) โดยทั่วไปเกณฑ์มาตรฐานคอมพิวเตอร์เป็นโปรแกรมคอมพิวเตอร์ที่ดำเนินการชุดการปฏิบัติงานที่กำหนดอย่างเคร่งครัด - ภาระงาน - และส่งกลับผลลัพธ์บางรูปแบบ - ตัวชี้วัด - อธิบายการทำงานของคอมพิวเตอร์ที่ทดสอบ ตัวชี้วัดมาตรฐานคอมพิวเตอร์มักจะวัดความเร็ว: ปริมาณงานเสร็จเร็วแค่ไหน หรือปริมาณงาน: จำนวนเวิร์กโหลดหน่วยต่อหนึ่งหน่วยเวลาเสร็จสมบูรณ์ การรันเกณฑ์มาตรฐานคอมพิวเตอร์เครื่องเดียวกันบนคอมพิวเตอร์หลาย ๆ เครื่องช่วยให้สามารถทำการเปรียบเทียบได้

ฉันควรเกณฑ์มาตรฐานแอปพลิเคชันของตัวเอง?

เป็นการทดสอบที่ดีที่สุดสำหรับการเปรียบเทียบระบบจะเป็นแอปพลิเคชันของคุณเองที่มีปริมาณงานของคุณเอง น่าเสียดายที่มักจะไม่สามารถใช้การวัดที่เชื่อถือได้ทำซ้ำและเปรียบเทียบได้สำหรับระบบที่แตกต่างกันโดยใช้แอปพลิเคชันของคุณเองที่มีปริมาณงานของคุณเอง ปัญหาอาจรวมถึงการสร้างกรณีทดสอบที่ดีความกังวลเรื่องการรักษาความลับความยากลำบากในการตรวจสอบเงื่อนไขที่เทียบเคียงเวลาเงินหรือข้อ จำกัด อื่น ๆ

ถ้าไม่ใช่แอปพลิเคชันของฉันเองแล้วจะเป็นอย่างไร

คุณอาจต้องการพิจารณาใช้การวัดประสิทธิภาพมาตรฐานเป็นจุดอ้างอิง เกณฑ์มาตรฐานจะเป็นแบบพกพาและอาจรันบนแพลตฟอร์มที่คุณสนใจอย่างไรก็ตามก่อนที่คุณจะพิจารณาผลลัพธ์ที่คุณต้องแน่ใจว่าคุณเข้าใจความสัมพันธ์ระหว่างความต้องการของแอปพลิเคชัน / คอมพิวเตอร์ของคุณและสิ่งที่ มาตรฐานคือการวัด มาตรฐานมีความคล้ายคลึงกับแอพพลิเคชั่นที่คุณใช้หรือไม่? ปริมาณงานมีลักษณะคล้ายกันหรือไม่ จากคำตอบของคำถามเหล่านี้คุณสามารถเริ่มดูว่ามาตรฐานอาจประมาณความเป็นจริงของคุณอย่างไร

หมายเหตุ: เกณฑ์มาตรฐานสามารถใช้เป็นจุดอ้างอิงได้ อย่างไรก็ตามเมื่อคุณทำการเลือกผู้จำหน่ายหรือผลิตภัณฑ์ SPEC ไม่ได้อ้างว่าเกณฑ์มาตรฐานใด ๆ สามารถแทนที่การเปรียบเทียบการใช้งานจริงของคุณเอง

การทดสอบประสิทธิภาพ JS

เป็นการดีที่สุดการทดสอบแบบสมบูรณ์แบบที่สุดคือการใช้แอปพลิเคชันของคุณเองกับการเปลี่ยนเวิร์กโหลดของคุณสิ่งที่คุณต้องการทดสอบ: ไลบรารีเครื่องต่าง ๆ

หากไม่สามารถทำได้ (และโดยปกติจะไม่เป็นเช่นนั้น) ขั้นตอนสำคัญแรก: กำหนดภาระงานของคุณ ควรสะท้อนถึงปริมาณงานของแอปพลิเคชันของคุณ ในการพูดคุยนี้ Vyacheslav Egorov พูดเกี่ยวกับภาระงานที่น่ารังเกียจที่คุณควรหลีกเลี่ยง

จากนั้นคุณสามารถใช้เครื่องมือเช่น benchmark.js เพื่อช่วยให้คุณรวบรวมตัวชี้วัดโดยทั่วไปแล้วความเร็วหรือปริมาณงาน บน Sizzle เราสนใจที่จะเปรียบเทียบว่าการแก้ไขหรือเปลี่ยนแปลงมีผลต่อประสิทธิภาพของระบบในห้องสมุดอย่างไร

หากสิ่งที่มีประสิทธิภาพไม่ดีจริงๆขั้นตอนต่อไปของคุณคือการมองหาคอขวด

ฉันจะหาคอขวดได้อย่างไร โปร

วิธีที่ดีที่สุดในการประมวลผลโปรไฟล์จาวาสคริปต์คืออะไร?

ฉันพบว่าเวลาดำเนินการเป็นวิธีที่ดีที่สุด

คุณสามารถใช้console.profileใน firebug

ฉันมักจะเพียงแค่ทดสอบประสิทธิภาพของจาวาสคริปต์ระยะเวลาที่สคริปต์ทำงาน jQuery Lover ให้ลิงค์บทความที่ดีสำหรับการทดสอบประสิทธิภาพของรหัสจาวาสคริปต์แต่บทความจะแสดงวิธีทดสอบระยะเวลาที่รหัสจาวาสคริปต์ทำงาน ฉันขอแนะนำให้อ่านบทความที่เรียกว่า "5 เคล็ดลับในการปรับปรุงรหัส jQuery ของคุณขณะทำงานกับชุดข้อมูลขนาดใหญ่"

นี่คือคลาสที่สามารถใช้ซ้ำได้เพื่อประสิทธิภาพด้านเวลา ตัวอย่างรวมอยู่ในรหัส:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profilerเข้าใกล้ปัญหานี้จากมุมมองของผู้ใช้ จัดกลุ่มกิจกรรมเบราว์เซอร์ทั้งหมดกิจกรรมเครือข่าย ฯลฯ ที่เกิดจากการกระทำของผู้ใช้ (คลิก) และคำนึงถึงทุกด้านเช่นเวลาแฝงเวลาหมดเวลาและอื่น ๆ

ฉันกำลังมองหาสิ่งที่คล้ายกัน แต่พบสิ่งนี้

https://jsbench.me/

จะช่วยให้การเปรียบเทียบแบบด้านต่อด้านและจากนั้นคุณสามารถแบ่งปันผลลัพธ์

กฎทองคือการไม่อยู่ภายใต้สถานการณ์ใด ๆ ที่ล็อคเบราว์เซอร์ผู้ใช้ของคุณ หลังจากนั้นฉันมักจะดูเวลาดำเนินการตามด้วยการใช้หน่วยความจำ (เว้นแต่ว่าคุณกำลังทำสิ่งที่บ้าในกรณีนี้อาจมีลำดับความสำคัญสูงกว่า)

การทดสอบประสิทธิภาพกลายเป็นสิ่งที่เป็นคำศัพท์ที่ล่าช้า แต่ก็ไม่ได้หมายความว่าการทดสอบประสิทธิภาพไม่ใช่กระบวนการที่สำคัญใน QA หรือแม้กระทั่งหลังจากที่สินค้าได้ส่งมอบ และในขณะที่ฉันพัฒนาแอพที่ฉันใช้เครื่องมือที่แตกต่างกันบางอย่างที่กล่าวมาข้างต้นเช่นchrome Profilerฉันมักจะมอง SaaS หรือโอเพนซอร์สที่ฉันสามารถไปและลืมเกี่ยวกับมันจนกว่าฉันจะได้รับการแจ้งเตือนว่ามีบางอย่างขึ้น .

มีเครื่องมือที่ยอดเยี่ยมมากมายที่จะช่วยให้คุณจับตาดูประสิทธิภาพโดยไม่ต้องกระโดดข้ามห่วงเพื่อรับการตั้งค่าการเตือนขั้นพื้นฐาน นี่คือบางสิ่งที่ฉันคิดว่าคุ้มค่าที่จะลองดูด้วยตัวคุณเอง

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

หากต้องการลองและวาดภาพที่ชัดเจนยิ่งขึ้นนี่เป็นบทแนะนำเล็กน้อยเกี่ยวกับวิธีตั้งค่าการตรวจสอบสำหรับแอปพลิเคชันตอบโต้

นี่เป็นวิธีที่ดีในการรวบรวมข้อมูลประสิทธิภาพสำหรับการทำงานเฉพาะ

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);