โพสต์บน Google Webperf (London Webperf Group), 26 สิงหาคม 2014
แอปพลิเคชันเว็บ JavaScript ที่มีประสิทธิภาพจะต้องราบรื่นและรวดเร็ว แอปพลิเคชั่นใด ๆ ที่โต้ตอบกับผู้ใช้จำเป็นต้องพิจารณาวิธีการให้แน่ใจว่าหน่วยความจำถูกใช้อย่างมีประสิทธิภาพเพราะหากบริโภคมากเกินไปหน้าเว็บจะชนบังคับให้ผู้ใช้โหลดซ้ำ และคุณสามารถซ่อนตัวอยู่ในมุมและร้องไห้ได้เท่านั้น
คอลเลกชันขยะอัตโนมัติไม่ได้ทดแทนการจัดการหน่วยความจำที่มีประสิทธิภาพโดยเฉพาะอย่างยิ่งในเว็บแอปพลิเคชันขนาดใหญ่ที่ดำเนินมายาวนาน ในการบรรยายครั้งนี้เราจะสาธิตวิธีจัดการหน่วยความจำอย่างมีประสิทธิภาพผ่าน Devtools ของ Chrome
และเรียนรู้วิธีการแก้ปัญหาประสิทธิภาพเช่นการรั่วไหลของหน่วยความจำการเก็บขยะบ่อยครั้งหยุดชั่วคราวและหน่วยความจำโดยรวมขยายสิ่งต่าง ๆ ที่ทำให้คุณเสียพลังงาน
Addy Osmani แสดงตัวอย่างมากมายใน PPT ของเขาซึ่งจะทำให้หน่วยความจำรั่วใน Chrome V8:
1) ลบคุณสมบัติวัตถุเพื่อชะลอวัตถุนี้ (ใช้หน่วยความจำเพิ่มขึ้น 15 เท่า)
การคัดลอกรหัสมีดังนี้:
var o = {x: 'y'};
ลบวัว; // ในเวลานี้ o จะกลายเป็นวัตถุที่ช้า
วัว; -
var o = {x: 'y'};
o = null; // มันควรจะเป็นเช่นนี้
2) ปิด
เมื่อแนะนำตัวแปรที่อยู่นอกการปิดเข้าไปในการปิดวัตถุนี้ไม่สามารถเก็บขยะ (GC) เมื่อปิดสิ้นสุดลง
การคัดลอกรหัสมีดังนี้:
var a = function () {
var largestr = อาร์เรย์ใหม่ (10000000) .Join ('x');
return function () {
คืนที่ใหญ่ที่สุด;
-
-
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 = null;
// ตอนนี้ #tree สามารถเปิดตัวได้
4) การนับตัวจับเวลา (กำหนด) ตัวจับเวลารั่วไหล
ตัวจับเวลายังเป็นสถานที่ทั่วไปที่มีการรั่วไหลของหน่วยความจำ:
การคัดลอกรหัสมีดังนี้:
สำหรับ (var i = 0; i <90000; i ++) {
var buggyObject = {
Callagain: function () {
var ref = this;
var val = settimeout (ฟังก์ชัน () {
Ref.Callagain ();
}, 90000);
-
-
buggyobject.callagain ();
// แม้ว่าคุณต้องการรีไซเคิล แต่ตัวจับเวลาก็ยังอยู่ที่นั่น
buggyObject = null;
-
5) หน่วยความจำดีบัก
เครื่องมือการดีบักหน่วยความจำของ Chrome สามารถดูการใช้หน่วยความจำและการรั่วไหลของหน่วยความจำได้อย่างง่ายดาย:
คลิกบันทึกในไทม์ไลน์ -> หน่วยความจำ:
สำหรับเนื้อหาเพิ่มเติมโปรดตรวจสอบ PPT ดั้งเดิม