Question

我正在建立一个网站（www.experimonkey.com），我在主页上使用3 .gif文件（和一个引导程序轮播）。一个是导航栏上的“登录”链接，其他链接是两列的背景。两列.gifs使用了大量的CPU时间（我的笔记本电脑的所有4个核心都运行接近100％）。我已经优化了文件，并尝试将它们转换为.mp4，如在线建议 - 实际上似乎更糟糕。

我必须做一些我做错的事，但我无法弄清楚这个问题。作为旁注，我的网站在移动设备上运行非常顺利，我从中获取.gifs的网站在每个页面上显示多个0滞后。下面是我的CSS。我意识到它没有提供太多信息，所以如果我能提供更多细节，请告诉我。在这里使用<img>会更好吗？为什么？

.tile {
  padding: 0px;
  border: 4px outset black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 5px 5px 20px #222222;
  height: 200px;
  border-radius: 2px;
  overflow: hidden;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.tile:hover {
  box-shadow: 5px 5px 5px #222222 inset;
}

#menu {
  padding-top: 63px;
}

@media only screen and (min-width: 992px) {
  .tile-tall {
    height: 60vh;
  }
  #menu {
    padding-top: 73px;
  } 
}

.tile-link {
  display: block;
  height: 100%;
  width: 100%;
  background-color: none;
  border-radius: 0px;
}

.tile-link:hover {
  display: block;
  height: 100%;
  width: 100%;
  transition: background-color 2000ms ease;
  background-color: #000000AA;
  color: black;
}

#tile-play {
  background-image: url("/img/dog_game.gif");
}

#tile-facts {
  background-image: url("/img/beaver_fact.gif");
}

Answer 1

这里只是一个疯狂的猜测，但如果你想减少延迟和CPU使用率，也许尝试将.mp4s设置为仅在元素悬停时播放？

我访问了您的网站，我没有出现大量CPU使用的问题 - 我的网站上大约占6-8％。

另外，如果将mp4设置为仅在元素悬停上播放并不能提高性能，可以将其视为设计选择吗？所有同时播放的动画都会让人分心。

干杯！

为什么我网站的背景图片GIF耗尽了我计算机的所有CPU时间？

1 个答案: