跳到主要内容

记录试图希望获取网页所占内存

背景： 在做AI生成组件项目时，会将用户输入的内容发送给openai, openai会将对应的 html 内容返回给前端，前端使用 iframe 将 html 内容展示出来。

问题： openai 返回的内容不可控，可能会包含一些不在预期的代码，导致内存泄漏。

解决思路：

  1. 试图监控 iframe 的内存使用情况，搜索到的方案是使用 performance.memory.usedJSHeapSize 来监控内存使用情况；但是 performance.memory.usedJSHeapSize 获取内存时，每次获取的值都是变化且慢速上涨的，且该api为要废弃的api，所以不采用这种方案。
  2. 通过 performance.memory mdn 了解到 performance.measureUserAgentSpecificMemory 为 performance.memory 的替代方案，但是没走通，先放弃。
  3. 找同辉/晓康了解到了 performance.getEntriesByType('resource') 和 performance.getEntries() 和 performance.getEntriesByName() 这三个api。
  4. 找晓康学到了 web.dev 网站，web.dev 网站提供了很多关于前端性能优化的文章，可以去看看。
  5. 找晓康学到了 web-vitals 这个库，可以用来监控页面性能。

收获：

  1. 学习到了 performance.memory 和 performance.measureUserAgentSpecificMemory 等性能相关的api
  2. 向同辉和晓康学习到了解决问题的思路和方法。
  3. 晓康推荐了 web.dev 和 web-vitals 这两个网站，可以去看看。
  4. 晓康排查问题时，很细致和稳重，值得学习。

补充：

  1. 如果 performance.measureUserAgentSpecificMemory() 为 undefined，可能有以下几个原因：
  • 你正在使用的浏览器版本低于 Chrome 89。
  • 你没有在启动 Chrome 时使用 --enable-blink-features=MeasureMemory 标志。
  • 你正在使用的浏览器不是 Chrome。