在脚本标签中加载大型 javascript 会导致 chrome 105 版本中出现错误“内存不足”答案

【问题标题】：Loading large javascript in script tag leads to error "Out of memory" in chrome 105 version在脚本标签中加载大型 javascript 会导致 chrome 105 版本中出现错误“内存不足”
【发布时间】：2022-10-04 20:56:04
【问题描述】：

我们开发了一个离线应用程序，我们将 json 存储在一个变量内的 Javascript 文件中，并且仅在单击按钮时加载单个所需的 javascript（我们不会一次加载全部）。在javascript的帮助下。

       var view ;
       var viewID;
       view = file;  
       viewID = view.split("v")[1];
       viewIds.push(viewID);
            // DOM: Create the script element
       var jsElm = document.createElement("script");
            // set the type attribute
        jsElm.type = "application/javascript";
        jsElm.id = file;
            // make the script element load file
        jsElm.src = "viewData/"+viewID+".js";
            // finally insert the element to the body element in order to load the script
        document.body.appendChild(jsElm);
         
        
        //  $('#loading').show();
     try {
        jsElm.onload = function () {
             defaultViewData(view);
         
         jsElm.onerror = function () {
          alert('something Went wrong');
         }
        }   
     } catch (error) {
         alert(error);
     }

如果已经加载，我们也不会再次加载相同的 javascript。

其中两个脚本非常大，大约 500MB，当它开始加载时，RAM 内存上升到 8GB，然后当它完成加载时它恢复正常，即 700MB。

如果在内存下降时切换，它会再次使用 RAM 来加载另一个脚本和 SNAP，说明“内存不足”。

这在 chrome 103 和 104 中工作得非常正常，在更新到 105 之后，这不仅在 chrome 中而且在所有基于 chromium 的浏览器（如现在 Edge）中都开始出现错误，我想在 v8 引擎更新中需要注意一些事情，被改变。

或者有没有其他方法可以在没有服务器的情况下在 webApp 中获取数据，目前我们正在借助很大的 javascript 获取内部数据，

还想知道对于 500 MB ，使用了 8 GB 那里发生了什么？

注意：Firefox 浏览器中一切正常。

在我们的处理 javascript 中，我们测试了使用超时函数来等待和 HeapSize 恢复正常，但随机会出现“内存不足”的快照。

【问题讨论】：

for 500 MB , 8 GB is utilsed what happens there? Chrome 是热垃圾 - 是否可以将 javascript 更改为 json 并使用 fetch 加载它 - 你说 we store json in Javascript file 的事实表明它是可能的......如果它是实际上当然是真正的 JSON - 即只有字符串、数字、数组、布尔值、空值和简单对象 - 例如没有无效的 JSON 类型
fetch 再次与 server 一起工作，出于安全原因，它不允许我们从本地计算机读取文件。
哦，所以这个页面是使用 file:// 而不是 http:// 或 https:// 加载的 - 不确定它会有什么不同 - 虽然会很有趣
我认为这属于“Now, you may think that you have asked a reasonable, answerable question, but you really haven't”类别。
@yogi 你到底对这个问题不了解什么？，这不是大多数互联网上的开发人员在寻找并试图理解在 html 页面中加载 500MB js 使用 8GB 内存的研究，如果你知道请回答它对某人会有所帮助，而不是仅仅评论这个问题不被理解。

标签： javascript google-chrome out-of-memory chromium v8

【解决方案1】：

这在 chrome 103 和 104 中运行非常正常，更新到 105 后开始出现错误

要报告 Chrome 错误，请转到 crbug.com/new。一定要包括一个重现案例——你在这里给出的描述很可能不足以让任何人找出问题所在。（例如：各种资源有很多限制（例如：保留的总虚拟内存、分配的实际内存、不同类型分配的不同存储桶、单个对象或字符串的最大大小……），而且不明显你遇到的是哪一个。）

对于 500 MB ，使用 8 GB 会发生什么？

JSON 字符串的大小对于该字符串中编码的对象/数据的内存消耗来说是一个非常不可靠的指标。例如：

数字1在JSON字符串中占用1个字节，在堆中占用4个字节； 1012023034 占用 10 个字节的 JSON 和堆上的 4 个字节。

数字.5占用2字节的JSON和12字节的堆； 3.141592653589793 占用 17 个字节的 JSON 和堆上的 12 个字节。

字符串 "xy" 占用 2 个字节的 JSON 和 16 个字节的堆空间。

对于对象，很难给出具体的数字，因为如果存在多个相同/相似形状的对象，它们可以共享一些元数据（例如隐藏的类及其属性的名称）；作为下限，像{"a":1}（7 个字节的 JSON 数据）这样的单一属性对象在理想条件下永远不会在堆上使用少于 16 个字节，并且如果它是其形状的唯一对象，则可能需要更多.

像[1]（3 个字节的 JSON）这样的数组在堆上至少需要 28 个字节。

除了堆上对象的大小之外，解析器还需要一些临时内存。事实上，堆目前有一个 4GB 的硬限制（由于指针压缩），所以如果你看到渲染器占用了 8GB 的总内存，那么至少有一半是堆外的。

我们不会一次全部加载

朝着这个方向走得更远可能是最好的前进道路：500 MB 的 JSON 已经很多了；也许有空间根据需要只加载一小部分？如果有人想在只有 2 GB 内存的笔记本电脑/平板电脑/手机上加载您的网站，那么 Chrome 中的任何限制提高都无济于事，您实际上必须使应用程序本身更精简。

【讨论】：