วิธีการปิด JavaScript ถูกเก็บขยะ

ฉันได้บันทึกข้อผิดพลาดของ Chromeต่อไปนี้ซึ่งนำไปสู่การรั่วไหลของหน่วยความจำที่ร้ายแรงและไม่ชัดเจนในรหัสของฉัน:

(ผลลัพธ์เหล่านี้ใช้เครื่องมือสร้างโปรไฟล์หน่วยความจำของ Chrome Dev Tools ซึ่งรัน GC และจากนั้นใช้ภาพรวมกองของทุกสิ่งที่ไม่ได้เก็บรวบรวมไว้)

ในรหัสด้านล่างนี้someClassอินสแตนซ์นั้นเก็บรวบรวมขยะ (ดี):

var someClass = function() {};

function f() {
  var some = new someClass();
  return function() {};
}

window.f_ = f();

แต่จะไม่เก็บขยะในกรณีนี้ (ไม่ดี):

var someClass = function() {};

function f() {
  var some = new someClass();
  function unreachable() { some; }
  return function() {};
}

window.f_ = f();

และภาพหน้าจอที่สอดคล้องกัน:

ดูเหมือนว่าการปิด (ในกรณีนี้function() {}) ทำให้วัตถุทั้งหมด "มีชีวิตอยู่" ถ้าวัตถุนั้นถูกอ้างอิงโดยการปิดอื่น ๆ ในบริบทเดียวกันไม่ว่าจะเป็นการปิดตัวเองหรือไม่

คำถามของฉันเกี่ยวกับการรวบรวมขยะในเบราว์เซอร์อื่น (IE 9+ และ Firefox) ฉันค่อนข้างคุ้นเคยกับเครื่องมือของ webkit เช่น JavaScript กองโปรไฟล์ แต่ฉันรู้เครื่องมือเบราว์เซอร์อื่น ๆ น้อยดังนั้นฉันจึงไม่สามารถทดสอบได้

กรณีใดบ้างในสามกรณีนี้ IE9 + และ Firefox จะรวบรวมขยะsomeClass ใช่หรือไม่

เท่าที่ฉันสามารถบอกได้นี่ไม่ใช่ข้อผิดพลาด แต่เป็นพฤติกรรมที่คาดหวัง

จากหน้าการจัดการหน่วยความจำของ Mozilla : "ตั้งแต่ปี 2012 เบราว์เซอร์ที่ทันสมัยทั้งหมดจัดส่งตัวเก็บขยะที่มีเครื่องหมายและกวาด" "ข้อ จำกัด : วัตถุต้องมีการทำไม่สามารถเข้าถึงได้อย่างชัดเจน "

ในตัวอย่างของคุณที่มันล้มเหลวsomeยังคงสามารถเข้าถึงได้ในการปิด ฉันลองสองวิธีเพื่อให้ไม่สามารถเข้าถึงและทำงานได้ทั้งคู่ ไม่ว่าคุณจะตั้งค่าsome=nullเมื่อคุณไม่ต้องการใช้อีกต่อไปหรือคุณตั้งค่าwindow.f_ = null;และมันจะหายไป

ปรับปรุง

ฉันได้ลองใน Chrome 30, FF25, Opera 12 และ IE10 บน Windows แล้ว

มาตรฐานไม่ได้พูดอะไรเกี่ยวกับการเก็บขยะ แต่ให้เบาะแสของสิ่งที่ควรจะเกิดขึ้นบางส่วน

• ส่วนที่ 13 นิยามฟังก์ชั่นขั้นตอนที่ 4: "ให้การปิดเป็นผลมาจากการสร้างวัตถุฟังก์ชั่นใหม่ตามที่ระบุใน 13.2"
• ส่วนที่ 13.2 "สภาพแวดล้อมคำศัพท์ที่ระบุโดยขอบเขต" (scope = closure)
• ส่วนที่ 10.2 สภาพแวดล้อมของคำศัพท์:

"การอ้างอิงภายนอกของ Lexical Environment (ภายใน) คือการอ้างอิงไปยัง Lexical Environment ที่ล้อมรอบด้วยเหตุผลด้านสิ่งแวดล้อม Lexical

แน่นอนศัพท์สภาพแวดล้อมภายนอกอาจมีสภาพแวดล้อมคำศัพท์ภายนอกของตัวเอง สภาพแวดล้อมคำศัพท์อาจทำหน้าที่เป็นสภาพแวดล้อมภายนอกสำหรับสภาพแวดล้อมคำศัพท์ภายในหลาย ตัวอย่างเช่นถ้ามีการประกาศฟังก์ชั่นที่มีสองซ้อนกันประกาศฟังก์ชันแล้วคำศัพท์สภาพแวดล้อมของแต่ละฟังก์ชั่นที่ซ้อนกันจะต้องเป็นคำศัพท์สิ่งแวดล้อมด้านนอกของพวกเขาคำศัพท์สิ่งแวดล้อมของการดำเนินการปัจจุบันของฟังก์ชั่นโดยรอบ."

ดังนั้นฟังก์ชั่นจะสามารถเข้าถึงสภาพแวดล้อมของผู้ปกครอง

ดังนั้นsomeควรมีให้ในการปิดฟังก์ชั่นการส่งคืน

ถ้าเช่นนั้นทำไมมันไม่สามารถใช้งานได้ตลอดเวลา?

ดูเหมือนว่า Chrome และ FF นั้นฉลาดพอที่จะกำจัดตัวแปรในบางกรณี แต่ใน Opera และ IE someตัวแปรนั้นมีให้ในการปิด (NB: เพื่อดูชุดเบรกพอยต์นี้return nullและตรวจสอบดีบักเกอร์)

GC อาจได้รับการปรับปรุงเพื่อตรวจสอบว่าsomeมีการใช้งานหรือไม่อยู่ในฟังก์ชั่น แต่จะมีความซับซ้อน

ตัวอย่างที่ไม่ดี:

var someClass = function() {};

function f() {
  var some = new someClass();
  return function(code) {
    console.log(eval(code));
  };
}

window.f_ = f();
window.f_('some');

ในตัวอย่างด้านบน GC ไม่มีทางรู้ได้ว่ามีการใช้ตัวแปรหรือไม่ (รหัสทดสอบและใช้งานได้ใน Chrome30, FF25, Opera 12 และ IE10)

window.f_หน่วยความจำจะถูกปล่อยออกถ้าการอ้างอิงไปยังวัตถุที่ถูกทำลายโดยการกำหนดค่าอื่นไป

ในความคิดของฉันนี่ไม่ใช่ข้อผิดพลาด

ฉันทดสอบสิ่งนี้ใน IE9 + และ Firefox

function f() {
  var some = [];
  while(some.length < 1e6) {
    some.push(some.length);
  }
  function g() { some; } //removing this fixes a massive memory leak
  return function() {};   //or removing this
}

var a = [];
var interval = setInterval(function() {
  var len = a.push(f());
  if(len >= 500) {
    clearInterval(interval);
  }
}, 10);

เว็บไซต์ที่นี่

ฉันหวังว่าจะfunction() {}จบลงด้วยอาร์เรย์ 500 โดยใช้หน่วยความจำน้อยที่สุด

น่าเสียดายที่ไม่ใช่อย่างนั้น แต่ละฟังก์ชั่นที่ว่างเปล่าเก็บไว้ในอาร์เรย์ (ไม่สามารถเข้าถึงได้ตลอดไป แต่ไม่ใช่ GC'ed) ของตัวเลขหนึ่งล้าน

ในที่สุด Chrome ก็หยุดทำงาน Firefox ทำสิ่งต่าง ๆ ให้เสร็จหลังจากใช้ RAM ขนาด 4GB และ IE ก็จะช้าลงเรื่อย ๆ จนกระทั่งมันแสดงว่า "Out of memory"

การลบหนึ่งในบรรทัดที่คอมเม้นต์จะแก้ไขทุกอย่าง

ดูเหมือนว่าเบราว์เซอร์ทั้งสามนี้ (Chrome, Firefox และ IE) จะเก็บบันทึกสภาพแวดล้อมต่อบริบทไม่ใช่ต่อการปิด Boris ตั้งสมมติฐานว่าเหตุผลของการตัดสินใจครั้งนี้คือประสิทธิภาพการทำงานและดูเหมือนว่าจะเป็นไปได้ แต่ฉันไม่แน่ใจว่าจะสามารถเรียกนักแสดงได้อย่างไรเนื่องจากการทดลองด้านบน

หากจำเป็นต้องมีการอ้างอิงปิดsome(อนุญาตฉันไม่ได้ใช้ที่นี่ แต่ลองนึกภาพฉัน) ถ้าแทน

function g() { some; }

ฉันใช้

var g = (function(some) { return function() { some; }; )(some);

มันจะแก้ไขปัญหาหน่วยความจำโดยการย้ายการปิดไปยังบริบทที่แตกต่างจากฟังก์ชั่นอื่น ๆ ของฉัน

นี่จะทำให้ชีวิตของฉันน่าเบื่อมากขึ้น

PS ด้วยความอยากรู้อยากเห็นฉันลองใน Java (ใช้ความสามารถในการกำหนดชั้นเรียนภายในฟังก์ชั่น) GC ทำงานอย่างที่ฉันเคยหวังไว้สำหรับ Javascript

การวิเคราะห์พฤติกรรมแตกต่างกัน แต่เป็นวิธีการทั่วไปในการดำเนินการจัดเรียงของสิ่งนี้คือการสร้างการบันทึกสภาพแวดล้อมสำหรับการโทรแต่ละครั้งจะf()ในกรณีของคุณและมีเพียงชาวบ้านเก็บของfที่มีการปิดจริงมากกว่า (โดยบางปิด) ในการบันทึกสภาพแวดล้อมที่ จากนั้นการปิดใด ๆ ที่สร้างขึ้นในการโทรเพื่อfรักษาชีวิตของบันทึกสภาพแวดล้อม ฉันเชื่อว่านี่เป็นวิธีที่ Firefox จะปิดตัวลงอย่างน้อย

สิ่งนี้มีประโยชน์ในการเข้าถึงตัวแปรปิดและความง่ายในการใช้งาน มันมีข้อเสียเปรียบของเอฟเฟกต์ที่สังเกตซึ่งการปิดระยะสั้นในตัวแปรบางตัวทำให้มันถูกทำให้มีชีวิตโดยการปิดที่ยาวนาน

เราสามารถลองสร้างบันทึกสภาพแวดล้อมหลาย ๆ แบบสำหรับการปิดที่แตกต่างกันขึ้นอยู่กับสิ่งที่พวกเขาปิดจริง ๆ แต่มันสามารถซับซ้อนได้อย่างรวดเร็วมากและอาจทำให้เกิดปัญหาด้านประสิทธิภาพและหน่วยความจำของตัวเอง ...

1. รักษาสถานะระหว่างการเรียกใช้ฟังก์ชันสมมติว่าคุณมี function add () และคุณต้องการให้เพิ่มค่าทั้งหมดที่ส่งไปยังการเรียกหลาย ๆ ครั้งและส่งคืนผลรวม

ชอบเพิ่ม (5); // ส่งคืน 5

เพิ่ม (20); // ส่งคืน 25 (5 + 20)

เพิ่ม (3) // ส่งคืน 28 (25 + 3)

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

วิธีล่าสุดในการใช้การปิดโดยไม่ต้องกำหนดตัวแปรทั่วโลก

(function(){

  var addFn = function addFn(){

    var total = 0;
    return function(val){
      total += val;
      return total;
    }

  };

  var add = addFn();

  console.log(add(5));
  console.log(add(20));
  console.log(add(3));
  
}());