javascript - JavaScript 函数 toUpperCase 与 CSS transform-text :uppercase compare with respect to performance? 的关系

Question

使用 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>

两者在性能上有什么区别？

Answer 1

明显的区别是，当您使用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>