[{"data":1,"prerenderedAt":235},["ShallowReactive",2],{"post-en-smart-renderers":3,"post-surround-en-smart-renderers":229},{"id":4,"title":5,"body":6,"date":213,"description":214,"extension":215,"meta":216,"navigation":217,"path":218,"seo":219,"stem":221,"tags":222,"__hash__":228},"posts_en\u002Fposts\u002Fsmart-renderers\u002Fen.md","Electron Plugin",{"type":7,"value":8,"toc":207},"minimark",[9,14,23,32,39,47,58,65,68,76,84,91,94,102,105,108,112,115,123,130,140,150,158,165,168,176,191,199],[10,11,13],"h2",{"id":12},"where-the-idea-came-from","Where the idea came from",[15,16,17,18,22],"p",{},"The inspiration for this plugin actually came from a rather interesting place: one day I was checking the ",[19,20,21],"strong",{},"memory usage of the Mac WeChat client"," and noticed this:",[15,24,25],{},[26,27],"img",{"alt":28,"height":29,"src":30,"width":31},"WeChat's memory usage",130,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fwechat-1.jpg",641,[15,33,34,35,38],{},"I noticed that my WeChat had ",[19,36,37],{},"three Renderers"," running, so I tried restarting WeChat and saw this:",[15,40,41],{},[26,42],{"alt":43,"height":44,"src":45,"width":46},"WeChat's memory usage after a restart",102,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fwechat-2.jpg",634,[15,48,49,50,53,54,57],{},"I found that ",[19,51,52],{},"one of the Renderers was gone",". To figure out where that renderer came from, I tried opening Moments.\nThe moment I opened Moments, it appeared. Then I closed Moments, and an hour later I found that Renderer ",[19,55,56],{},"was still there, still holding on to more than 40 MB of my memory","! Unless you restarted the app, there was no way to get rid of it.",[15,59,60,61,64],{},"At first I thought this was only a WeChat problem, but then I opened QQ, opened many different Electron apps, and even wrote a minimal test app of my own — and it turned out ",[19,62,63],{},"nearly every Electron app has this problem","!",[15,66,67],{},"As shown below:",[15,69,70],{},[26,71],{"alt":72,"height":73,"src":74,"width":75},"Minimal test app UI",712,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-1.png",912,[15,77,78],{},[26,79],{"alt":80,"height":81,"src":82,"width":83},"Memory usage of the minimal test app",570,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-2.png",778,[15,85,86,87,90],{},"Because most Electron apps today are built on top of mature web frameworks like ",[19,88,89],{},"React Router or Vue Router",", the situation ends up like this: as long as a Renderer stays open, it never closes itself; and once enough of them pile up, Renderers keep stacking on top of each other.",[15,92,93],{},"Like this:",[15,95,96],{},[26,97],{"alt":98,"height":99,"src":100,"width":101},"QQ's memory usage after opening and closing every page",309,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Fexample-3.jpg",628,[15,103,104],{},"For underpowered machines, or machines busy with other important work, this situation can be fairly dangerous.",[15,106,107],{},"So I decided to write a plugin to take care of this!",[10,109,111],{"id":110},"writing-the-plugin","Writing the plugin",[15,113,114],{},"To be on the safe side while writing it, I checked Electron's documentation on this topic:",[15,116,117],{},[26,118],{"alt":119,"height":120,"src":121,"width":122},"Electron's official Readme",650,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-readme.png",1057,[15,124,125,126,129],{},"Clearly, in the official wording Electron is quite confident that ",[19,127,128],{},"Renderers are definitely destroyed when they are not in use",".",[15,131,132,133,136,137,129],{},"But here is the thing: did Electron actually do that? The answer is: ",[19,134,135],{},"no",". And this problem is not a new discovery — it has been around since ",[19,138,139],{},"2019, seven years ago",[15,141,142,143],{},"The related issue on the Electron repo: ",[144,145,149],"a",{"href":146,"rel":147},"https:\u002F\u002Fgithub.com\u002Felectron\u002Felectron\u002Fissues\u002F20277",[148],"nofollow","electron\u002Felectron#20277",[15,151,152],{},[26,153],{"alt":154,"height":155,"src":156,"width":157},"Electron's official reply in 2021 to the issue filed in 2019",367,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-issues.jpg",943,[15,159,160,161,164],{},"Then another five years went by — it is now ",[19,162,163],{},"2026",", and the latest version of Electron still has this problem. What a makeshift operation!",[15,166,167],{},"While reading the docs, I also noticed a detail that deserves attention:",[15,169,170],{},[26,171],{"alt":172,"height":173,"src":174,"width":175},"Contents of the Electron docs",285,"\u002Fpost-media\u002Fsmart-renderers\u002Fimages\u002Felectron-docs.jpg",844,[15,177,178,179,182,183,186,187,190],{},"In Electron, ",[19,180,181],{},"a single Renderer may be responsible for rendering several Pages at once",", so the plugin has to be careful about one thing: a Renderer should only be terminated using Chromium's task lifecycle (default: ",[19,184,185],{},"15 minutes",") when it has ",[19,188,189],{},"no pages left",". (This is for compatibility and to keep the plugin's footprint minimal, so it relies directly on Chromium's task lifecycle management.)",[15,192,193,194,129],{},"In the end this became the plugin, published on ",[144,195,198],{"href":196,"rel":197},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsmart-renderers",[148],"npmjs",[15,200,201,202],{},"Repository: ",[144,203,206],{"href":204,"rel":205},"https:\u002F\u002Fgithub.com\u002FCherryCuteCN\u002FSmart-Renderers",[148],"CherryCuteCN\u002FSmart-Renderers",{"title":208,"searchDepth":209,"depth":209,"links":210},"",2,[211,212],{"id":12,"depth":209,"text":13},{"id":110,"depth":209,"text":111},"2026-09-05","A better Renderer management plugin designed for Electron","md",{},true,"\u002Fposts\u002Fsmart-renderers",{"title":220,"description":214},[5],"posts\u002Fsmart-renderers\u002Fen",[223,224,225,226,227],"Code","Electron","Npm Packages","Nodejs","TypeScript","88Q-mtpDA1C_Z7Q78RIBT50L2XgO3qU8VYAmpZ1QyEE",[230,234],{"title":231,"path":232,"stem":233,"children":-1},"Intent-Driven UI","\u002Fposts\u002Fintent-driven-ui","posts\u002Fintent-driven-ui\u002Fen",null,1794746183626]