How do the JavaScript function toUpperCase vs CSS transform-text:uppercase compare with respect to performance?

问题

Is there any performance difference between using Javascript function toUpperCase vs using CSS text-transform: uppercase?

To clarify, let's take the simplest case:

<h1 id="greetings"></h1>

<script>
   var name = "Nour"
   document.getElementById("greetings").innerHTML="Hello" + name.toUpperCase();
</script>

rather than:

<script>
   var name = "Nour"
   document.getElementById("greetings").innerHTML="Hello" + name;
</script>
<style>
#greetings {
 text-transform:uppercase
}
</style>

What's the performance difference between the two?

回答1:

The obvious difference is that when you're using toUpperCase(), it is a one-time operation, meaning that if you modify the text again, it won't be uppercased. However, if you add the text-transform: uppercase; CSS rule, the element will remain uppercased even if you change the text. See the two snippets:

JavaScript's toUpperCase:

function upper() {
  document.getElementById("text").innerText = document.getElementById("text").innerText.toUpperCase();
}

function change() {
  document.getElementById("text").innerText = "This text will be sentence case";
}

<p id="text">This is some text.</p>
<button onclick="upper()">Click me to make upper case</button>
<button onclick="change()">Click me to change the text</button>

CSS's text-transform: uppercase;:

function upper() {
  document.getElementById("text").style.textTransform = "uppercase";
}

function change() {
  document.getElementById("text").innerText = "This text will be upper case";
}

<p id="text">This is some text.</p>
<button onclick="upper()">Click me to make upper case</button>
<button onclick="change()">Click me to change the text</button>

You'll see in the first snippet, the text did not remain uppercase when changed, however in the second one, the new text was uppercased without you doing anything, as the rule was already in place. This is the largest difference between the two - toUpperCase() is one-time, text-transform: uppercase; lasts until you remove it. Hopefully this helps you!

Edit:

To get the different speeds of these two methods, I have added console.log statements before and after both methods below. As Stack Overflow shows split-second console messages, you can use these to determine for yourself the differing speeds:

JavaScript's toUpperCase:

function upper() {
    console.log("Before JS");
  document.getElementById("text").innerText = document.getElementById("text").innerText.toUpperCase();
    console.log("After JS");
}

function change() {
  document.getElementById("text").innerText = "This text will be sentence case";
}

<p id="text">This is some text.</p>
<button onclick="upper()">Click me to make upper case</button>
<button onclick="change()">Click me to change the text</button>

CSS's text-transform: uppercase;:

function upper() {
  
    console.log("Before CSS");
document.getElementById("text").style.textTransform = "uppercase";
    console.log("After CSS");
}

function change() {
  document.getElementById("text").innerText = "This text will be upper case";
}

<p id="text">This is some text.</p>
<button onclick="upper()">Click me to make upper case</button>
<button onclick="change()">Click me to change the text</button>

回答2:

Logically rendering the style rule and applying a transform to the text will certainly take few more ticks however the difference of the page load speed I don't think, it will be noticeable.

来源：https://stackoverflow.com/questions/53731731/how-do-the-javascript-function-touppercase-vs-css-transform-textuppercase-compa