Как функция JavaScript toUpperCase против CSS transform-text: прописные буквы сравниваются с точки зрения производительности?

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(), это однократная операция, то есть если вы снова измените текст, он не будет в верхнем регистре.Однако, если вы добавите правило CSS text-transform: uppercase;, элемент останется в верхнем регистре, даже если вы измените текст.Смотрите два фрагмента:

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 до и после обоих методов ниже.Поскольку переполнение стека показывает сообщения консоли за доли секунды, вы можете использовать их, чтобы определить для себя различные скорости:

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

Answer 2

Логическая отрисовка правила стиля и применение преобразования к тексту, безусловно, займет еще несколько тиков, однако разница в скорости загрузки страницы, я не думаю, будет заметна.