VS Code Uses 13% CPU When Idle Due to Blinking Cursor Rendering
Discussions: Reddit and Hacker News
Couple of citations:
Assuming 1 million users of VS Code This blinking cursor will waste $3 million per year in electricity costs, and output 32,000 tons of c02 per year.
2150: “Grandpa, why did the ocean’s dry up?”
“well sonny, long ago, Microsoft didn’t optimize their code for a code editor’s cursor and pushed earth’s climate over the edge”
TL;DR:
All this is about Microsoft Visual Code editor that is Electron application — Chromium based.
They blink cursor by this CSS declaration:
@keyframes monaco-cursor-blink {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cursor-blink {
animation: monaco-cursor-blink 1s step-start 0s infinite;
}
Problems with this solution:
- In chromium / webkit this animation runs with animation frame rate — each 16ms — 60 FPS.
- As Chromium (WebKit with Skia backend) uses mostly CPU rasterization than simple task of filling 1px rectangle eats CPU (and so drains batteries). On each frame rate whole window gets updated.
In principle all this can be solved by something simple as:
setTimer(function() { caret.toggleClass("visible") }, 1000);