Как ускорить загрузку js?

Question

[zeaovede]

Заголовок h1 выводится через скрипт по следующему принципу:

/*page1*/
...
document.getElementById('val').onclick = function () {
 localStorage.setItem('game', "Valorant");
 }
...

/*page2*/
    let game = localStorage.getItem('game');
    let lol = document.getElementById('game')
    let val = document.getElementById('game')
    let tft = document.getElementById('game')
    let wr = document.getElementById('game')
    let ov = document.getElementById('game')
    
    window.onload = function() {
        lol.innerHTML = game;
        val.innerHTML = game;
        tft.innerHTML = game;
        wr.innerHTML = game;
        ov.innerHTML = game;
    }

В результате чего столкнулся с проблемой медленной загрузки js:
https://youtu.be/7hFNbB8_uhI

Заголовок - Бустер Valorant
"Valorant" выводится через скрипт.

Какие способы исправить существуют?

Comments

[imko]

зачем тебе пять переменных с одним и тем же элементом в них?)

Answer 1

[Сергей delphinpro]

window.addEventListener('DOMContentLoaded', function() {
    let game = localStorage.getItem('game');
    document.getElementById('game').innerHTML = game;
});

Comments

[zeaovede]

Это действительно работает. Но не под мой случай. Применяя данный метод в заголовок передается ?swcfpc=1 от плагина кэширования.

[Сергей delphinpro]

zeaovede, понятия не имею, о чем вы.

[Hovo_Varosyan]

наверно так))
document.getElementById('val').onclick = function () {
localStorage.setItem('game', "Valorant");
}

function updateGameDisplay() {
let game = localStorage.getItem('game');
let gameElements = document.getElementsByClassName('game');
for (let i = 0; i < gameElements.length; i++) {
gameElements[i].innerHTML = game;
}
}
updateGameDisplay()
правда я не понимаю зачем тебе lol, val, tft ... если все они ведут на одну

[zeaovede]

Сергей delphinpro, вообще этот способ работает хорошо. Проверил повторно. Изначально не туда посмотрел, не о том подумал. Спасибо.

[zeaovede]

Сергей delphinpro, пользуясь случаем спрошу ещё в качестве продолжения темы.
Сейчас для каждого нового метода приходится открывать новый <script>... </script>. Записано лично мной, конечно же абы как, просто для того, чтобы это заработало.
Т. е.:

<script>
document.getElementById('lol').onclick = function () {
 localStorage.setItem('game', "League of Legends ");
</script>

<script>
document.getElementById('val').onclick = function () {
 localStorage.setItem('game', "Valorant");
</script>

<script>
document.getElementById('tft').onclick = function () {
 localStorage.setItem('game', "TFT");
</script>

<script>
document.getElementById('wr').onclick = function () {
 localStorage.setItem('game', "WR");
</script>

<script>
document.getElementById('ow').onclick = function () {
 localStorage.setItem('game', "OW");
</script>

А хотелось бы поместить все это дело в один <script>... </script>, чтобы придать элегантный вид записи.

[Сергей delphinpro]

zeaovede, ну во-первых, отдельные теги script не нужны

<script>
document.getElementById('lol').onclick = function () {
 localStorage.setItem('game', "League of Legends ");
}
document.getElementById('val').onclick = function () {
 localStorage.setItem('game', "Valorant");
}
document.getElementById('tft').onclick = function () {
 localStorage.setItem('game', "TFT");
}
document.getElementById('wr').onclick = function () {
 localStorage.setItem('game', "WR");
}
document.getElementById('ow').onclick = function () {
 localStorage.setItem('game', "OW");
}
</script>

А во-вторых, можно и элегантно сделать

<div class="game-title" data-title="League of Legends">...League of Legends</div>
<div class="game-title" data-title="Valorant">...Valorant</div>
<div class="game-title" data-title="TFT">...TFT</div>
<div class="game-title" data-title="WR">...WR</div>
<div class="game-title" data-title="OW">...OW</div>

<script>
document.querySelectorAll('.game-title').forEach(div => {
  div.addEventListener('click', () => {
    localStorage.setItem('game', div.dataset.title);
  })
}
</script>

[zeaovede]

Сергей delphinpro, спасибо. Это работает слишком хорошо