The performance in relation to the interval

Question

I have made an intermittent bar, the problem is that I am afraid, that something so insignificant requires so much, with this I mean that in 1 minute more than 120 intervals were made, is there a more efficient way to do this?

window.addEventListener("DOMContentLoaded", () => {
var e = document.getElementById("bar"), flag = true;
setInterval(()=>{
if(flag) {
e.style.display = "none";
flag = !flag;
}
else {
e.style.display = "block";
flag = !flag;
}
},400);
});

#barText {
font-family: monospace; color: purple; font-size: 25px;
font-weight: 600;
position: absolute;
}
#bar {
width: 2.2px;
height: 29px;
background-color: purple;
margin: 0 0 0 22%;
}

<div>
<i id="barText">Overflow</i><div id="bar"></div>
</div>

Answer 1

You could just use a CSS animation and not use JS at all.

#barText {
    font-family: monospace; color: purple; font-size: 25px;
    font-weight: 600;
    position: absolute;
}
#bar {
    width: 2.2px;
    height: 29px;
    background-color: purple;
    margin: 0 0 0 22%;
    animation: blink-animation .6s steps(2, start) infinite;
    -webkit-animation: blink-animation .6s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

<div>
<i id="barText">Overflow</i><div id="bar"></div>
</div>