[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"post-zh-smart-renderers":3,"post-surround-zh-smart-renderers":227},{"id":4,"title":5,"body":6,"date":212,"description":213,"extension":214,"meta":215,"navigation":216,"path":217,"seo":218,"stem":219,"tags":220,"__hash__":226},"posts_zh\u002Fposts\u002Fsmart-renderers\u002Fzh.md","【Electron插件】Smart Renderers（聪明的渲染器）",{"type":7,"value":8,"toc":206},"minimark",[9,13,22,31,38,46,57,64,67,75,83,90,93,101,104,107,110,113,121,128,139,149,157,164,167,175,190,198],[10,11,12],"h2",{"id":12},"灵感来源",[14,15,16,17,21],"p",{},"这个插件的灵感来源其实很有意思，来源于我一次查看 ",[18,19,20],"strong",{},"Mac 版微信客户端的内存占用","时发现的，如下图：",[14,23,24],{},[25,26],"img",{"alt":27,"height":28,"src":29,"width":30},"微信的内存占用",130,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fwechat-1.jpg",641,[14,32,33,34,37],{},"此时我发现我的微信为什么会有 ",[18,35,36],{},"三个 Renderer（渲染器）","，所以我试着重启了微信，就看到：",[14,39,40],{},[25,41],{"alt":42,"height":43,"src":44,"width":45},"重启后的微信内存占用",102,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fwechat-2.jpg",634,[14,47,48,49,52,53,56],{},"我发现有 ",[18,50,51],{},"一个 Renderer（渲染器）没了","。为了搞清楚那个渲染器是怎么出现的，我试着打开了我的朋友圈。\n当我打开朋友圈的时候我发现它出现了。之后我关掉了我的朋友圈，一个小时后我发现那个 Renderer（渲染器）",[18,54,55],{},"一直在那开着，一直占着我 40 多 MB 的内存","！除非重启软件，不然都关不掉。",[14,58,59,60,63],{},"一开始我以为只是微信有这个问题，结果我打开了 QQ，打开了很多不同的 Electron 应用，甚至自己写了一个最小化测试，结果发现",[18,61,62],{},"几乎是所有的 Electron 应用都存在这个问题","！",[14,65,66],{},"如下图：",[14,68,69],{},[25,70],{"alt":71,"height":72,"src":73,"width":74},"最小化测试软件UI",712,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-1.png",912,[14,76,77],{},[25,78],{"alt":79,"height":80,"src":81,"width":82},"最小化测试软件占用",570,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-2.png",778,[14,84,85,86,89],{},"因为现在大多数的 Electron 应用都是配合比如 ",[18,87,88],{},"React Router、Vue Router"," 这些成熟的 Web 框架来使用的，所以在这个情况下就导致了：只要这个 Renderer（渲染器）一直开着，就不会自己关掉；然后如果开得多的话，就会不断地叠加 Renderer（渲染器）。",[14,91,92],{},"变成这样：",[14,94,95],{},[25,96],{"alt":97,"height":98,"src":99,"width":100},"QQ在所有页面都打开后并关闭的内存占用",309,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-3.jpg",628,[14,102,103],{},"对于配置不好、或者正在进行别的重要工作的电脑来说，这样的情况还是比较危险的。",[14,105,106],{},"所以我就打算写一个插件来负责这个工作！",[10,108,109],{"id":109},"插件的编写",[14,111,112],{},"为了写的时候保险一点，我查看了 Electron 在这方面的文档：",[14,114,115],{},[25,116],{"alt":117,"height":118,"src":119,"width":120},"Electron官方Readme文件",650,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-readme.png",1057,[14,122,123,124,127],{},"很明显，在官方的表述中，官方是非常之肯定 ",[18,125,126],{},"Renderer（渲染器）在不使用的时候是肯定会被销毁的","。",[14,129,130,131,134,135,138],{},"但是话又说回来了，实际上 Electron 有没有那么做呢？答案是：",[18,132,133],{},"没有","。这个问题也并不是今天才被发现，早在 ",[18,136,137],{},"7 年前的 2019 年","，这个问题就一直存在。",[14,140,141,142],{},"相关的 issue 记录：",[143,144,148],"a",{"href":145,"rel":146},"https:\u002F\u002Fgithub.com\u002Felectron\u002Felectron\u002Fissues\u002F20277",[147],"nofollow","electron\u002Felectron#20277",[14,150,151],{},[25,152],{"alt":153,"height":154,"src":155,"width":156},"Electron在2019年的Issue在2021年官方的正式回复",367,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-issues.jpg",943,[14,158,159,160,163],{},"然后又过了 5 年，今年 ",[18,161,162],{},"2026 年","了，最新版的 Electron 还是有这个问题，太草台班子了！",[14,165,166],{},"然后在查看文档的过程中，发现了一个应该被注意的细节：",[14,168,169],{},[25,170],{"alt":171,"height":172,"src":173,"width":174},"ElectronDocs的内容",285,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-docs.jpg",844,[14,176,177,178,181,182,185,186,189],{},"在 Electron 中，",[18,179,180],{},"一个 Renderer（渲染器）可能负责多个 Page（页面）的渲染工作","，所以插件必须要注意的是：应该在一个 Renderer（渲染器）",[18,183,184],{},"没有任何页面的时候","，使用 Chromium 的任务周期（默认 ",[18,187,188],{},"15 分钟","）来结束它。（这里是为了兼容性和插件占用最小化，所以直接依赖 Chromium 的任务周期管理）",[14,191,192,193,127],{},"最终写成了这个插件，并发布到了 ",[143,194,197],{"href":195,"rel":196},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsmart-renderers",[147],"Npmjs",[14,199,200,201],{},"仓库：",[143,202,205],{"href":203,"rel":204},"https:\u002F\u002Fgithub.com\u002FCherryCuteCN\u002FSmart-Renderers",[147],"CherryCuteCN\u002FSmart-Renderers",{"title":207,"searchDepth":208,"depth":208,"links":209},"",2,[210,211],{"id":12,"depth":208,"text":12},{"id":109,"depth":208,"text":109},"2026-09-05","一个为 Electron 设计的更好的 Renderer（渲染器）管理插件","md",{},true,"\u002Fposts\u002Fsmart-renderers",{"title":5,"description":213},"posts\u002Fsmart-renderers\u002Fzh",[221,222,223,224,225],"Code","Electron","Npm Packages","Nodejs","TypeScript","r8k8A2CDH0oZPEUD2ySGzFb5gJqalrhkKnKgngMz2RA",[228,232],{"title":229,"path":230,"stem":231,"children":-1},"【意图驱动UI】关于软件UI（操作页面）的设计探讨","\u002Fposts\u002Fintent-driven-ui","posts\u002Fintent-driven-ui\u002Fzh",null,1794746183529]