javascript - JavaScript函数toUpperCase vs CSS transform-text:uppercase在性能方面如何比较？

使用Javascript函数toUpperCase与使用CSS text-transform: uppercase有什么性能差异？

为了澄清，让我们以最简单的情况为例：

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

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

而不是：

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

两者之间的性能差异是什么？

最佳答案

明显的区别是，使用toUpperCase()时，它是一次性操作，这意味着如果再次修改文本，则不会大写。但是，如果添加text-transform: uppercase; CSS规则，则即使更改文本，该元素也将保持大写。请参阅以下两个片段：

JavaScript的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的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>

您会在第一个代码段中看到，文本在更改时并没有保持大写，但是在第二个代码段中，新文本是大写的，而您无需执行任何操作，因为该规则已经就位。这是两者之间最大的差异-toUpperCase()是一次性的，text-transform: uppercase;一直持续到您将其删除为止。希望这对您有帮助！

编辑：

为了获得这两种方法的不同速度，我在以下两种方法之前和之后添加了console.log语句。当Stack Overflow显示瞬间的控制台消息时，您可以使用这些消息自己确定不同的速度：

JavaScript的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的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>

关于javascript - JavaScript函数toUpperCase vs CSS transform-text:uppercase在性能方面如何比较？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53731731/