ฉันเห็นวิธีการใช้ JS เพื่อตรวจจับการใช้งาน CPU ในปัญหา GitHub ของ Yu Bo มาก่อนและฉันคิดว่ามันยอดเยี่ยมมาก
ฉันได้นำไปใช้ด้วยตัวเองและเพิ่มฟังก์ชั่นการวาดฮิสโตแกรมเพื่อดูการใช้งาน CPU
ดูเอฟเฟกต์: พอร์ทัล
ตระหนักถึงความคิด
ในความเป็นจริงมันคือ setInterval ซึ่งใช้เวลาปัจจุบันเพื่อลบเวลาของครั้งสุดท้ายที่ดำเนินการโดยบันทึกตัวจับเวลาเพื่อให้ได้ความแตกต่างของเวลาเพื่อสะท้อนความล่าช้าของ CPU ซึ่งสะท้อนถึงอัตราการใช้งาน CPU ทางอ้อม
การคัดลอกรหัสมีดังนี้:
var data = [], t;
var cputimer = setInterval (ฟังก์ชัน () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
ในทางทฤษฎีข้อมูลควรเป็น [500,500,500,500 ... ] แต่ในความเป็นจริง CPU จะล่าช้าเล็กน้อยอย่างแน่นอนและข้อมูลอาจเป็น [501,502,502,501,503 ... ] หากอัตราการใช้งาน CPU สูงเวลาแฝงจะมีขนาดใหญ่มากและข้อมูลจะกลายเป็น [550,551,552,552,551 ... ] โดยการตัดสินการเปลี่ยนแปลงของข้อมูลอัตราการใช้งาน CPU สามารถอนุมานได้ในขั้นต้น
การเป็นตัวแทนของการใช้งาน CPU โดยใช้ฮิสโตแกรม
โดยการวาดฮิสโตแกรมของข้อมูลเราสามารถเห็นความผันผวนของข้อมูล เมื่อมูลค่าของระยะเวลาหนึ่งในฮิสโตแกรมเพิ่มขึ้นอย่างรวดเร็วมันก็พิสูจน์ได้ว่าอัตราการใช้งาน CPU สูงในขณะนั้น
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น Drawhisto (ข้อมูล) {
var cvs = document.getElementById ('Canvas');
ctx = cvs.getContext ('2d');
var width = cvs.width
ความสูง = cvs.height
histowidth = ความกว้าง / ขนาด;
// repaint histogram
ctx.fillstyle = "#fff";
ctx.fillrect (0,0, ความกว้าง, ความสูง);
ctx.beginpath ();
ctx.lineWidth = histowidth/2;
ctx.strokestyle = '#000';
สำหรับ (var i = 0, len = data.length; i <len; i ++) {
var x = i * histowidth
// +5, /20, -10 เป็นเพียงเพื่อจุดประสงค์ในการแสดงเอฟเฟกต์
// ~~ เป็นค่าตัวเลขที่เทียบเท่ากับ Math.floor ()
y = ~~ ((ข้อมูล [i] - ความเร็ว + 5) / 20 * (ความสูง -10));
ctx.moveto (x+histowidth/2, ความสูง);
ctx.lineto (x+histowidth/2, ความสูง y);
ctx.stroke ();
-
-