บทความนี้อธิบายการรั่วไหลของหน่วยความจำและทักษะการจัดการหน่วยความจำของ JavaScript ซึ่งเป็นประโยชน์มาก แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการเฉพาะมีดังนี้:
เนื้อหาของบทความนี้มาจาก Google Webperf (London Webperf Group), 26 สิงหาคม 2014
โดยทั่วไปการพูดเว็บแอปพลิเคชัน JavaScript ที่มีประสิทธิภาพจะต้องราบรื่นและรวดเร็ว แอปพลิเคชั่นใด ๆ ที่โต้ตอบกับผู้ใช้จำเป็นต้องพิจารณาวิธีการให้แน่ใจว่าหน่วยความจำถูกใช้อย่างมีประสิทธิภาพเพราะหากบริโภคมากเกินไปหน้าเว็บจะชนบังคับให้ผู้ใช้โหลดซ้ำ และคุณสามารถซ่อนตัวอยู่ในมุมและร้องไห้ได้เท่านั้น
คอลเลกชันขยะอัตโนมัติไม่ได้ทดแทนการจัดการหน่วยความจำที่มีประสิทธิภาพโดยเฉพาะอย่างยิ่งในเว็บแอปพลิเคชันขนาดใหญ่ที่ดำเนินมายาวนาน ในบทความนี้เราจะสาธิตวิธีการจัดการหน่วยความจำอย่างมีประสิทธิภาพผ่าน Devtools ของ Chrome
และเรียนรู้วิธีการแก้ปัญหาประสิทธิภาพเช่นการรั่วไหลของหน่วยความจำการเก็บขยะบ่อยครั้งหยุดชั่วคราวและหน่วยความจำโดยรวมขยายสิ่งต่าง ๆ ที่ทำให้คุณเสียพลังงาน
Addy Osmani แสดงตัวอย่างมากมายใน PPT ของเขาซึ่งจะทำให้หน่วยความจำรั่วใน Chrome V8:
1) ลบคุณสมบัติวัตถุเพื่อชะลอวัตถุนี้ (ใช้หน่วยความจำเพิ่มขึ้น 15 เท่า)
var o = {x: 'y'}; ลบ ox; // ในเวลานี้ o จะกลายเป็น Ox Ox Ox; // var o = {x: 'y'}; o = null; // นี่ควรจะเป็น2) ปิด
เมื่อแนะนำตัวแปรที่อยู่นอกการปิดเข้าไปในการปิดวัตถุนี้ไม่สามารถเก็บขยะ (GC) เมื่อปิดสิ้นสุดลง
var a = function () {var largestr = new Array (10,00000) .Join ('x'); ฟังก์ชั่น return () {return larsestr; -3) DOM รั่ว
เมื่อ Compon ดั้งเดิมถูกลบออกการอ้างอิงโหนดย่อยจะไม่สามารถรีไซเคิลได้หากไม่ได้ลบออก
var select = document.QuerySelector; var treeref = select ('#tree'); // ในต้นไม้ Com, LeafRef เป็นโหนดลูกของ Treefre var leafref = select ('#leaf'); var body = select ('body'); Body.removeChild (Treeref); //#ไม่สามารถชำระคืนต้นไม้ได้เนื่องจาก TreeRef ยังคงอยู่ที่นั่น // โซลูชัน: treeref = null; // ต้นไม้ไม่สามารถชำระคืนได้เนื่องจาก LeafRef ยังคงมี leafref = null; // ตอนนี้ #tree สามารถเปิดตัวได้4) การนับตัวจับเวลา (กำหนด) ตัวจับเวลารั่วไหล
ตัวจับเวลายังเป็นสถานที่ทั่วไปที่มีการรั่วไหลของหน่วยความจำ:
สำหรับ (var i = 0; i <90000; i ++) {var buggyObject = {callagain: function () {var ref = this; var val = settimeout (function () {ref.callagain ();}, 90000); }} buggyObject.callagain (); // แม้ว่าคุณต้องการรีไซเคิลตัวจับเวลายังคงเป็น buggyObject = null;}5) หน่วยความจำดีบัก
เครื่องมือการดีบักหน่วยความจำของ Chrome สามารถดูการใช้หน่วยความจำและการรั่วไหลของหน่วยความจำได้อย่างง่ายดาย:
คลิกบันทึกในไทม์ไลน์ -> หน่วยความจำ:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน