javascript - 视差页面在 chrome 上滚动不流畅

Question

我目前正在尝试为我的大学元素制作我的投资组合网站，但是我的视差滚动在 google chrome 上滚动不流畅，但是我在 safari 上没有任何问题.....您知道这可能导致此问题的原因和原因吗？我该如何解决。

/* this is my css code for my navigation bar. For example, you can change the background of the navigation bar */

#nav {
  background-color: transparent;
  overflow: hidden;
  position: fixed;
}


/* this is the  css code for the links inside the navigation bar for example where to position the links they way they will look */

#nav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  font-family: "Lato", sans-serif;
}


/* this is to change the background of the buttons(links) when they are on hover */

#nav a:hover {
  background-color: rgba(0, 0, 0, 0.6);
  text-shadow: 2px 2px rgb(0, 0, 255);
}

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
  color: rgb(102, 102, 102);
}

.image1,
.image2,
.image3 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.image1 {
  background-image: url(background1.jpg);
  min-height: 100%;
}

.image2 {
  background-image: url(background.jpg);
  min-height: 400px;
}

.image3 {
  background-image: url(ist.jpg);
  min-height: 400px;
}

.section {
  text-align: center;
  padding: 50px 80px;
}

.section-light {
  background-color: #f4f4f4;
  color: #666;
}

.section-dark {
  background-color: rgb(40, 46, 52);
  color: rgb(0, 0, 0);
}

.text1 {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: rgb(0, 0, 0);
  font-size: 27px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text1 .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.text1 .border.trans {
  background-color: transparent;
}

@media(max-width:568px) {
  .image1,
  .image2,
  .image3 {
    background-attachment: scroll;
  }
}

.arrow-down {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.arrow-down::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: 820px;
  margin-left: 820px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-right: 4px solid rgb(255, 0, 0);
  border-bottom: 4px solid rgb(0, 0, 0);
  -webkit-transform: rotate(45deg);
  animation: 3s arrow infinite ease;
}

@-webkit-keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}

@keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<!-- This is my code for my Navigation bar -->
<div id="nav">

  <a href="index.html">HOME</a>
  <a href="#about">ABOUT ME</a>
  <a href="myprojects.html">MY PROJECTS</a>
  <a href="mycv.html">MY CV</a>
  <a href="contactme.html">CONTACT</a>

</div>

<!-- this is my heading and the main background on my main page(Index) -->
<div class="image1">
  <div class="text1">
    <span class="border">
			Ivan Chamukov
			</span>
  </div>
</div>


<!-- this is my code for my scrolling arrow, the "onclick" makes my class/object clickable -->
<div class="arrow-down" onclick="slideDown()"></div>



<!-- this is my page - About me, and the information about me. -->
<section class="section section-light">
  <h2> About me</h2>
  <p class="about">My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take
    part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with
    grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended
    Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom. </p>
</section>


<div class="image2">
  <div class="text1">
    <span class="border">
			Image Two Text
			</span>

  </div>

</div>

<section class="section section-dark">
  <h2> Section Two </h2>
  <p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
    along the way</p>



</section>


<div class="image3">
  <div class="text1">
    <span class="border">
			Image three text
			</span>

  </div>
</div>


<section class="section section-dark">
  <h2> Section Three </h2>
  <p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
    along the way</p>

</section>

<div class="image2">
  <div class="text1">
    <span class="border">
			Ivan Chamukov
			</span>
  </div>
</div>

Answer 1

带雪橇的雪山背景图片几乎 17 MB 大。视差效果通常会导致浏览器重新绘制。重新绘制这么大的东西是一场性能噩梦。

减小 background1.jpg 的文件大小会有很大帮助。