Today, when I was reading an article on the Internet, I saw a code like this:
//
//
element.style.backgroundColor = "blue";
element.style.color = "red";
element.style.fontSize = "12em";
// class
.newStyle {
background-color: blue;
color: red;
font-size: 12em;
}
element.className = "newStyle";
I learned from another piece of code that no matter how many dom operations are performed in js, the rendering operation will eventually be performed after eventloop, that is, no matter how much the main thread messes up, dom, will only render the same result in the ui rendering phase. The code is as follows:
<body>
<div id="id">
divqqqq
</div>
<script>
window.onload = function(){
setTimeout(()=>{
var element = document.querySelector("-sharpid");
element.style.backgroundColor = "blue";
element.style.color = "red";
element.style.fontSize = "12em";
Promise.resolve().then(()=>{
var now =Date.now();
while(Date.now()-now<4000){
}
console.log("")
})
var now =Date.now();
while(Date.now()-now<4000){
}
console.log("")
},1000)
}
</script>
</body>the correction is as follows:
<body>
<style>
.newStyle {
background-color: blue;
color: red;
font-size: 12em;
}
</style>
<div id="id">
divqqqq
</div>
<script>
window.onload = function(){
setTimeout(()=>{
var element = document.querySelector("-sharpid");
element.className = "newStyle";
Promise.resolve().then(()=>{
var now =Date.now();
while(Date.now()-now<4000){
}
console.log("")
})
var now =Date.now();
while(Date.now()-now<4000){
}
console.log("")
},1000)
}
</script>
</body>all of the above code plus the while loop blocking the main thread is mainly to prove that the dom rendering operation is executed asynchronously and at the end of the eventloop (this is not proved), do not bother to prove, in fact, add a timer.
now that the problem is described clearly, will these two pieces of code affect the efficiency of rendering? What if it can be because of what?
personally, I don"t think so, because no matter how js operates on the main thread, the final rendered dom of dom, is the same dom.