javascript - CSS 转换极度滞后的视网膜显示

Question

我正在制作一个具有视差滚动功能的网站，它在 Retina 显示器上非常滞后，但在 macbook 分辨率越低的情况下越流畅。我不知道为什么，几周来我一直在寻找答案。我还使用了我在 css 下面添加的 javascript。这是 css/javascript:

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh;
  position: fixed;
  text-shadow: black 2px 2px 2px;
  width: 100%;
  -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
  color: #fff;
}

.background:first-child {
  background-color: rgba(156, 146, 137, 1);
  -webkit-transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
  -webkit-transform: translateY(15vh);
}
.background:nth-child(2) {
  background-image: url(2.jpg);
}
.background:nth-child(3) {
  background-image: url(3.jpg);
}
.background:nth-child(4) {
  background-image: url(1.jpg);
}
.background:nth-child(5) {
  /*NEW TITLE HERE*/
  background-image: url(3.jpg);
}
/* Set stacking context of slides */
.background:nth-child(1) {
  z-index: 5;
}
.background:nth-child(2) {
  z-index: 4;
}
.background:nth-child(3) {
  z-index: 3;
}
.background:nth-child(4) {
  z-index: 2;
}
.background:nth-child(5) {
  z-index: 1;
}
.background:nth-child(n+2):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: -moz-linear-gradient(left,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.1) 100%);
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.1) 100%);
  background: linear-gradient(to right,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1a000000',GradientType=1 );
}
.content-wrapper {
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  color: #fff;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(40vh); 
  -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
iframe {
  width: 33vw;
  height: 66vh;

  float: right;
}
p {
  word-wrap: break-word;
}
.image-style {
  width:10vw;
  height:7vh;
  vertical-align: middle;
}

.background.up-scroll {
  -webkit-transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
  -webkit-transform: translateY(15vh);
}
.background.up-scroll + .background {
  -webkit-transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
  -webkit-transform: translateY(30vh);
}
.background.down-scroll {
  -webkit-transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
  -webkit-transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
  -webkit-transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
  -webkit-transform: translateY(15vh);
}
h1{
  font-family: trench;
  font-size: 3vh;
  font-weight: 900;
}
.header {
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-weight: 200;
  line-height: 160%;
  font-size: 2vh;
}
.content-title {
  font-size: 10vh;
  line-height: 1.4;
}
.map-title-background {
  /*background-color: #1477C5;*/
  background-color: #4D4D4F;
  /*background-size: 100vw 100vh;*/
  box-shadow: 0px 10px 5px #888888;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
}
.map-title {
  font-weight: 300;
  font-size: 8vh;
}
.project-title {
  font-size: 10vh;
  line-height: 1.4;
  font-family: trench;
}
.background-fade {
  height: 130vh;
  width: 100vw;
}
.skills-programming {
  /*margin-top: 10vh;*/
}
.body-wrapper {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  position: fixed;
  top: 0;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
}

function parallaxScroll(evt) {
  console.log("what about this")
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  if (ticking != true){
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== (totalSlideNumber - 1)) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
        previousItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

function touchScroll(ts, te) {
  delta = te - ts;
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(setTicking, slideDuration);
}

function setTicking() {
  ticking = false;
}

var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
var ts;

// ------------- ADD EVENT LISTENER ------------- //
$(document).ready(function () {
  console.log("called once")
  totalSlideNumber = $("section").length;
  window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);

  window.addEventListener("touchstart", function(e) {
  ts = e.touches[0].clientY;
}, false);
window.addEventListener("touchend", function(e) {
  var te = e.changedTouches[0].clientY;
  touchScroll(ts, te);
}, false);
});

// ------------- SLIDE MOTION ------------- //
function nextItem() {
  var $previousSlide = $("section").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $("section").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

Answer 1

在查看您的代码后，我有一些建议。

• 删除 will-change 属性。虽然它应该有助于转换，但过度使用会而且经常会占用太多资源并降低页面速度。 Check out the MDN docs关于特性。

• 尽可能使用 transform3d。我看到您在几个地方使用了 transformY，我发现 transform3d 通常会为转换提供一些很好的优化。

• 我喜欢尽可能避免transition:all ...。老实说，我没有任何证据支持它，但我发现最好的做法是只转换您明确要转换的内容。

• 最后，这可能很简单，因为您的 macbook 较旧或打开了很多程序。你能确认它在快速计算机上做同样的事情吗？也就是说，如果您的 macbook 较旧。

希望对您有所帮助!如有任何更新，请随时发表评论。