jQuery หรือ javascript เพื่อค้นหาการใช้หน่วยความจำของเพจ

มีวิธีค้นหาว่าหน้าเว็บใช้หน่วยความจำมากแค่ไหนหรือโดยแอปพลิเคชัน jquery ของฉัน

นี่คือสถานการณ์ของฉัน:

ฉันกำลังสร้างเว็บแอปที่มีข้อมูลจำนวนมากโดยใช้ส่วนหน้า jquery และแบ็กเอนด์ที่เงียบสงบซึ่งให้บริการข้อมูลใน JSON โหลดหน้าเว็บครั้งเดียวจากนั้นทุกอย่างจะเกิดขึ้นผ่าน ajax

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

จากคำตอบฉันต้องการชี้แจงบางส่วน:

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

ปรับปรุง 2015

ย้อนกลับไปในปี 2012 สิ่งนี้ไม่สามารถทำได้หากคุณต้องการรองรับเบราว์เซอร์หลัก ๆ ทั้งหมดที่ใช้งานอยู่ น่าเสียดายที่ตอนนี้ยังคงเป็นคุณลักษณะเฉพาะของ Chrome (ส่วนขยายที่ไม่ได้มาตรฐานwindow.performance)

window.performance.memory

รองรับเบราว์เซอร์: Chrome 6+

2012 คำตอบ

มีวิธีค้นหาว่าหน้าเว็บใช้หน่วยความจำมากแค่ไหนหรือโดยแอปพลิเคชัน jquery ของฉัน ฉันกำลังมองหาโซลูชันรันไทม์ (ไม่ใช่แค่เครื่องมือสำหรับนักพัฒนา) เพื่อให้แอปพลิเคชันของฉันสามารถกำหนดการทำงานตามการใช้หน่วยความจำในเบราว์เซอร์ของผู้ใช้

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

การนับองค์ประกอบ DOM หรือขนาดเอกสารอาจเป็นการประมาณที่ดี แต่อาจมีความคลาดเคลื่อนได้มากเนื่องจากจะไม่รวมการโยงเหตุการณ์ข้อมูล () ปลั๊กอินและโครงสร้างข้อมูลในหน่วยความจำอื่น ๆ

หากคุณต้องการยึดติดกับแนวคิดของคุณจริงๆคุณควรแยกเนื้อหาคงที่และไดนามิกออกจากกัน

เนื้อหาคงที่ไม่ขึ้นอยู่กับการกระทำของผู้ใช้ (หน่วยความจำที่ใช้โดยไฟล์สคริปต์ปลั๊กอิน ฯลฯ )
สิ่งอื่น ๆ ถือเป็นแบบไดนามิกและควรเป็นจุดสนใจหลักของคุณเมื่อกำหนดขีด จำกัด ของคุณ

แต่ไม่มีวิธีง่ายๆที่จะสรุปได้ คุณสามารถใช้การติดตามระบบที่รวบรวมข้อมูลเหล่านี้ทั้งหมด การดำเนินการทั้งหมดควรเรียกใช้วิธีการติดตามที่เหมาะสม เช่น:

วิธีตัดหรือเขียนทับjQuery.dataเพื่อแจ้งระบบติดตามเกี่ยวกับการจัดสรรข้อมูลของคุณ

ตัดการปรับแต่ง html เพื่อให้มีการติดตามการเพิ่มหรือลบเนื้อหาด้วย ( innerHTML.lengthเป็นการประมาณที่ดีที่สุด)

หากคุณเก็บอ็อบเจ็กต์ไว้ในหน่วยความจำขนาดใหญ่ก็ควรตรวจสอบด้วย

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

อีกแง่มุมหนึ่งที่ทำให้ยากต่อการประมาณความต้องการหน่วยความจำของคุณอย่างถูกต้องคือเบราว์เซอร์ที่แตกต่างกันอาจจัดสรรหน่วยความจำแตกต่างกัน (สำหรับวัตถุ Javascript และองค์ประกอบ DOM)

คุณสามารถใช้Timing API

Navigation Timing เป็น JavaScript API สำหรับการวัดประสิทธิภาพบนเว็บอย่างแม่นยำ API ให้วิธีง่ายๆในการรับสถิติเวลาที่แม่นยำและละเอียด - เนทีฟ - สำหรับการนำทางหน้าเว็บและโหลดเหตุการณ์

window.performance.memory ให้การเข้าถึงข้อมูลการใช้หน่วยความจำ JavaScript

แนะนำให้อ่าน

• การวัดความเร็วในการโหลดหน้าด้วย Navigation Timing

คำถามนี้มีอายุ 5 ปีและทั้งจาวาสคริปต์และเบราว์เซอร์มีการพัฒนาอย่างไม่น่าเชื่อในเวลานี้ เนื่องจากตอนนี้เป็นไปได้แล้ว (อย่างน้อยก็ในบางเบราว์เซอร์) และคำถามนี้เป็นผลลัพธ์แรกเมื่อคุณ Google "จาวาสคริปต์แสดงการใช้หน่วยความจำ" ฉันคิดว่าฉันจะเสนอโซลูชันที่ทันสมัย

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

สคริปต์นี้ (ซึ่งคุณสามารถเรียกใช้เมื่อใดก็ได้บนเพจใดก็ได้) จะแสดงการใช้หน่วยความจำปัจจุบันของเพจ:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

ฉันไม่รู้วิธีใดเลยที่คุณจะทราบได้ว่าเบราว์เซอร์ใช้หน่วยความจำมากแค่ไหน แต่คุณอาจสามารถใช้ฮิวริสติกตามจำนวนองค์ประกอบบนหน้าได้ Uinsg jQuery คุณสามารถทำได้$('*').lengthและจะให้คุณนับจำนวนองค์ประกอบ DOM ตามจริงแล้วมันอาจจะง่ายกว่าแค่ทำการทดสอบการใช้งานบางอย่างและสร้างแท็บจำนวนคงที่เพื่อรองรับ

ใช้เครื่องมือ Chrome Heap Snapshot

นอกจากนี้ยังมีเครื่องมือ Firebug ที่เรียกว่าMemoryBugแต่ดูเหมือนว่าจะยังไม่สุกมาก

หากคุณต้องการเพียงแค่ดูเพื่อทดสอบมีวิธีใน Chrome ผ่านหน้านักพัฒนาซอฟต์แวร์เพื่อติดตามการใช้หน่วยความจำ แต่ไม่แน่ใจว่าจะทำอย่างไรในจาวาสคริปต์โดยตรง

ฉันอยากจะแนะนำวิธีแก้ปัญหาที่แตกต่างไปจากคำตอบอื่น ๆ โดยสิ้นเชิงนั่นคือสังเกตความเร็วของแอปพลิเคชันของคุณและเมื่อมันลดลงต่ำกว่าระดับที่กำหนดไว้ให้แสดงคำแนะนำแก่ผู้ใช้เพื่อปิดแท็บหรือปิดการใช้งานแท็บใหม่จากการเปิด ชั้นที่เรียบง่ายซึ่งมีชนิดของข้อมูลนี้เป็นตัวอย่างhttps://github.com/mrdoob/stats.js นอกเหนือจากนั้นอาจไม่เป็นการดีสำหรับแอปพลิเคชันที่เข้มข้นเช่นนี้ที่จะเก็บแท็บทั้งหมดไว้ในหน่วยความจำตั้งแต่แรก เช่นเก็บเฉพาะสถานะผู้ใช้ (เลื่อน) และโหลดข้อมูลทั้งหมดทุกครั้ง แต่เปิดสองแท็บสุดท้ายอาจเป็นตัวเลือกที่ปลอดภัยกว่า

สุดท้ายนักพัฒนา Webkit ได้พูดคุยเกี่ยวกับการเพิ่มข้อมูลหน่วยความจำลงในจาวาสคริปต์ แต่พวกเขามีข้อโต้แย้งมากมายเกี่ยวกับสิ่งที่ไม่ควรเปิดเผย ไม่ว่าจะด้วยวิธีใดก็ไม่น่าจะเป็นไปได้ที่ข้อมูลประเภทนี้จะพร้อมใช้งานในอีกไม่กี่ปี (แม้ว่าข้อมูลนั้นจะไม่เป็นประโยชน์ในตอนนี้ก็ตาม)

คำถามที่สมบูรณ์แบบกับฉันเริ่มต้นในโครงการที่คล้ายกัน!

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

นี่จะเป็นปัญหาด้านสถาปัตยกรรมหากหน่วยความจำรั่วไหลรายการหรือองค์ประกอบที่ไม่ได้ใช้ยังคงมีอยู่ ตรวจสอบให้แน่ใจว่าเนื้อหาของแท็บปิดถูกลบอย่างสมบูรณ์โดยไม่มีตัวจัดการเหตุการณ์ ฯลฯ จะสมบูรณ์แบบ สมมติว่าเสร็จแล้วคุณสามารถจำลองการใช้งานหนักในเบราว์เซอร์และคาดการณ์ผลลัพธ์จากการตรวจสอบหน่วยความจำ (พิมพ์about: memoryในแถบที่อยู่)

Protip: หากคุณเปิดหน้าเดียวกันใน IE, FF, Safari ... และ Chrome; และกว่าจะไปที่about: memoryใน Chrome มันจะรายงานการใช้หน่วยความจำในเบราว์เซอร์อื่น ๆทั้งหมด เรียบร้อย!

สิ่งที่คุณอาจต้องทำคือให้เซิร์ฟเวอร์ติดตามแบนด์วิดท์สำหรับเซสชันนั้น (ส่งข้อมูลไปกี่ไบต์) เมื่อใช้งานเกินขีด จำกัด แทนที่จะส่งข้อมูลผ่าน ajax เซิร์ฟเวอร์ควรส่งรหัสข้อผิดพลาดซึ่งจาวาสคริปต์จะใช้เพื่อบอกผู้ใช้ว่าใช้ข้อมูลมากเกินไป

คุณจะได้รับ document.documentElement.innerHTML และตรวจสอบความยาว มันจะให้จำนวนไบต์ที่ใช้โดยหน้าเว็บของคุณ

ซึ่งอาจใช้ไม่ได้กับทุกเบราว์เซอร์ ดังนั้นคุณสามารถรวมองค์ประกอบร่างกายทั้งหมดของคุณใน div ขนาดยักษ์และเรียก innerhtml บน div นั้น สิ่งที่ต้องการ<body><div id="giantDiv">...</div></body>