如何垃圾收集外部 Javascript 负载？

Question

给定一个加载器：

function loader(src, callback, fail) {
    let s = document.head.appendChild(document.createElement('script'));
    s.type = "text/javascript";
    s.src = src;
    s.onload = function() {
        callback()
        s.onload = null; //useful?
        s = null; //or maybe this?
    }
    s.onerror = fail
}

有一行s.onload = null 是否受益于 GC 释放一些内存？

Answer 1

是的，s.onload = null 很有用，会进行垃圾收集！

As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript。这意味着它会在需要时收集。
虽然 there is cases where 设置为 null 可能会更早地进行 GC（但不会触发它）。

截至 2012 年，所有现代浏览器都提供 mark-and-sweepgarbage-collector。
它的工作原理是可达性：

从全局上下文中无法访问的每个对象都将被删除

mark-and-sweep 周期性地发现并删除一个对象，当保存它的每个变量返回、重新分配或设置为 null。此外，现在不需要对无法从任何变量访问的内容递归地设置 null - 它无论如何都是由 mark-and-sweep 收集的。

现在到有问题的代码...

不需要s = null，因为变量在函数返回时会被清除，闭包从调用堆栈中移除并且GC会处理s。

但仍有对脚本 onload 属性的引用，因为 <script onload> 是 DOM 中 document.head 的子对象，可从 window 访问！

callback 的内容可能是可访问的，但在这里是没有问题的。

如果浏览器足够聪明，可以在内部设置s.onload = null 怎么办？我们先在第一个 sn-p 中将其注释掉，然后在第二个 sn-p 中取消注释来尝试它...

function fetch(src, callback, fail) {
    let s = document.head.appendChild(document.createElement('script'));
    s.type = "text/javascript";
    s.src = src;
    s.onload = function() {
        callback()
        //s.onload = null; //useful?
    }
    s.onerror = fail
}

fetch("https://stackoverflow.com", 
       () => {console.log("Execute onload");}, 
       () => {console.log("File not found");})

setTimeout(() => {
    console.log(document.head.lastChild.onload)
},1000)

找到的文件执行时出错，因为它不是 Javascript。
onload 已执行但未删除。代码出现在日志中！
证明应该使用s.onload = null这一行，像这样：

function fetch(src, callback, fail) {
    let s = document.head.appendChild(document.createElement('script'));
    s.type = "text/javascript";
    s.src = src;
    s.onload = function() {
        callback()
        s.onload = null; //useful!
    }
    s.onerror = fail
}

fetch("https://stackoverflow.com", 
       () => {console.log("Execute onload");}, 
       () => {console.log("File not found");})

setTimeout(() => {
    console.log(document.head.lastChild.onload)
},1000)

Answer 2

是的，将属性设置为null 确实有利于 GC。这样做会删除元素（包含在 DOM 中）对处理函数的引用，并且考虑到它可能是对函数的唯一引用，它使函数符合收集条件。但是，除非函数是对保留大块内存的变量的闭包，否则这不太可能产生很大影响。

您可能还想在回调中从 DOM 中删除 s 元素，使其也可被垃圾回收。