Свойство Transform имеет очень низкий FPS, но не при записи производительности в инструментах разработчика Chrome? - PullRequest
Новая
       21

Свойство Transform имеет очень низкий FPS, но не при записи производительности в инструментах разработчика Chrome?

0 голосов
/ 08 апреля 2019

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

В проекте довольно много ванильного JS, состоящего в основном из событий click и переписывания innerHTML.

Я также использую Parcel Bundler и SCSS с расширением VSCode 'Live Sass Compiler'.

В стремлении выяснить, почему мои переводы так "запаздывают", я начал запись на вкладке "Быстродействие" инструментов разработки Chrome. Низкий и вот все мои ключевые кадры и переводы были гладкими. Как только я перестаю записывать, анимация снова становится «запаздывающей».

Кто-нибудь может сказать мне, почему это так и как я могу решить эту проблему?

Я включу свой код для переключателей, которые при нажатии перемещаются назад и вперед вместе с другим полезным кодом:

HTML: 

<body>
  <nav id="nav"></nav>
  <main id="main"></main>
  <sidebar-l id="sidebar-l"></sidebar-l>
  <sidebar-r id="sidebar-r"></sidebar-r>
  <footer id="footer">
    <script src="./js/index.js"></script>
    <script> </script>  <!-- stops CSS transitions from firing on load -->
  </footer>
</body>

SCSS: 

main {
  grid-area: main;

  .main-container {
    width: 50vw;
    height: 60vh;
    margin: 10vh auto;
  }

  .row-switches {
    padding-top: 1vh; 
    height: 25%;
    width: 100%;
  }

  .switch-container {
    width: 140px;
    height: 50px;

    h4 {
      margin: 30px 0;
    }

    .switch-right {
      display: none;
    }
  }

  .switch {
    cursor: pointer;

    .switch-back {
      width: 30px;
      height: 10px;
      border-radius: 20px;
      background: colour(switch-back);
    }

    .switch-toggle {
      width: 25px;
      height: 25px;
      border-radius: 25px;
      background: colour(switch-toggle);
      position: absolute;
      transform: translateX(-12.5px);
      transition: 0.5s;
    }

    .switch-toggle.switch-checked {
      transform: translate(12.5px);
      transition: 0.5s;
    }
  }
}

JS: 

export const settings = () => {
  const main = document.getElementById('main');

  main.innerHTML = `
  <div class="main-container">
    <div class="flex settings-row border-bottom">
      <div class="flex-col api">
        <img src="${img.apiImg[0]}" alt="Apple">
        <div class="flex">
          <h4>Connected</h4>
          <div class="circle Online"></div>
        </div>
      </div>
      <div class="flex-col api">
        <img src="${img.apiImg[1]}" alt="Windows">
        <div class="flex">
          <h4>Connected</h4>
          <div class="circle Online"></div>
        </div>
      </div>
      <div class="flex-col api">
        <img src="${img.apiImg[2]}" alt="Android">
        <div class="flex">
          <h4>Not Connected</h4>
          <div class="circle Offline"></div>
        </div>
      </div>
      <div class="flex-col api">
        <img src="${img.apiImg[3]}" alt="Google">
        <div class="flex">
          <h4>Connected</h4>
          <div class="circle Online"></div>
        </div>
      </div>
    </div>
    <div class="flex settings-row">
      <h4>Backgrounds:</h4>
    </div>
    <div class="flex settings-row border-bottom">
      <div class="flex-between bg-row">
        <img class="bg" src="${img.bg[0]}" alt="Background">
        <img class="bg" src="${img.bg[1]}" alt="Background">
        <img class="bg" src="${img.bg[2]}" alt="Background">
        <img class="bg" src="${img.bg[3]}" alt="Background">
        <img class="bg" src="${img.bg[4]}" alt="Background">
        <img class="bg" src="${img.bg[5]}" alt="Background">
        <div class="flex-c bg bg-upload">
          <h4>Upload</h4>
          <img src="${img.symbols[0]}" alt="Upload">
        </div>
      </div>
    </div>
    <div class="flex settings-row settings-switches border-bottom">
      <div class="flex-col switch-container">
        <h4>Background</h4>
        <div class="flex-c switch">
          <div class="switch-back"></div>
          <div class="switch-toggle"></div>
        </div>
        <h4 class="switch-left">On</h4>
        <h4 class="switch-right">Off</h4>
      </div>
      <div class="flex-col switch-container">
        <h4>Text Colour</h4>
        <div class="flex-c switch">
          <div class="switch-back"></div>
          <div class="switch-toggle"></div>
        </div>
        <h4 class="switch-left">White</h4>
        <h4 class="switch-right">Black</h4>
      </div>
      <div class="flex-col switch-container">
        <h4>Global Chat</h4>
        <div class="flex-c switch">
          <div class="switch-back"></div>
          <div class="switch-toggle"></div>
        </div>
        <h4 class="switch-left">On</h4>
        <h4 class="switch-right">Off</h4>
      </div>
      <div class="flex-col switch-container">
        <h4>Time Format</h4>
        <div class="flex-c switch">
          <div class="switch-back"></div>
          <div class="switch-toggle"></div>
        </div>
        <h4 class="switch-left">24h</h4>
        <h4 class="switch-right">12h</h4>
      </div>
    </div>
    <div class="flex-c settings-row">
      <div class="flex-between save-btn">
        <h4>Save PDF</h4>
        <img src="${img.symbols[6]}" alt="Save PDF">
      </div>
    </div>
  </div>
  `;

  const getBG = document.getElementsByClassName('bg');  // background change

  const changeBG = BG => {
    for (let i = 0; i < BG.length; i++) {
      BG[i].addEventListener('click', () => {
        document.body.style.backgroundImage = `url(${img.bg[i]})`;
      });
    };
  };

  changeBG(getBG);

  const switches = document.querySelectorAll('.switch');  // switches

  switches.forEach(switches => switches.addEventListener('click', (i) => {
    i.currentTarget.querySelector('.switch-toggle').classList.toggle('switch-checked');
  }));
};
...