Question

我目前正在为客户修复wordpress网站，遗憾的是我在其中一个网页上滚动时遇到了很多问题。我已经一次又一次地尝试删除任何可能导致它的滚动辅助js但我仍然无法让它工作。

以下是给我带来麻烦的网页网址：http://www.bombaygrilloh.com/home/menu/

非常感谢任何帮助！

Answer 1

您的问题是background-attachment

[...]使用background-attachment：fixed会在每次用户滚动时导致绘制操作。为什么？好吧，页面必须重新定位内容，然后，由于它的背景图像看起来好像它保持静止，浏览器必须在相对于其实际DOM元素的新位置重新绘制该图像。此功能的性能非常糟糕，iOS只是忽略了这个属性。

罪魁祸首是你的标题background图片。

fixed 并且一直在页面内容后滚动重新粉刷。

在你的CSS文件中你有这个

.section-parallax {
    background-attachment: fixed;
}

如果删除它，那么您可以毫无困难地平滑滚动但是您会失去视差效果。

如果你必须具有视差效果，那么你需要使用更有效的方法来实现效果或者破解你的方式。

为了提高效率，请使用jQuery。我找到了pen by Marcel Schulz并将其复制到下面以供参考：

＆＃13;

/* 
See https://codepen.io/MarcelSchulz/full/lCvwq

The effect doens't appear as nice when viewing in split view :-)

Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).

*/

jQuery(document).ready(function() {
  $(window).scroll(function(e) {
    parallaxScroll();
  });

  function parallaxScroll() {
    var scrolled = $(window).scrollTop();
    $('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
    $('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
    $('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
  }

});

＆＃13;

body {
  background: rgba(230, 231, 232, 1);
  height: 4600px;
}


/* foreground (balloons/landscape)*/

div#parallax-bg-1 {
  position: fixed;
  width: 1200px;
  top: 0;
  left: 50%;
  margin-left: -600px;
  z-index: 1;
}


/* background middle layer*/

div#parallax-bg-2 {
  position: fixed;
  width: 1200px;
  top: 0;
  left: 50%;
  margin-left: -600px;
  z-index: 2;
}


/* background layer */

div#parallax-bg-3 {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -470px;
  z-index: 3;
}


/* foreground */

div#parallax-bg-3 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}

div#bg-3-1 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
  width: 529px;
  height: 757px;
  top: -100px;
  right: 100px;
}

div#bg-3-2 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
  width: 603px;
  height: 583px;
  top: 1050px;
  right: 70px;
}

div#bg-3-3 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
  width: 446px;
  height: 713px;
  top: 1800px;
  right: 140px;
}

div#bg-3-4 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
  width: 1104px;
  height: 684px;
  top: 2800px;
  right: 0px;
}


/* middle layer clouds */

div#parallax-bg-2 div {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  width: 488px;
  height: 138px;
  overflow: hidden;
}

div#bg-2-1 {
  top: 100px;
  left: -310px;
}

div#bg-2-2 {
  top: 270px;
  right: -70px;
}

div#bg-2-3 {
  top: 870px;
  left: -300px;
}

div#bg-2-4 {
  top: 1120px;
  right: -130px;
}

div#bg-2-5 {
  top: 1620px;
  left: 140px;
}

div#bg-2-6 {
  top: 720px;
  left: 340px;
}


/*background layer clouds */

div#parallax-bg-1 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  width: 488px;
  height: 138px;
  overflow: hidden;
}

div#bg-1-1 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 200px;
  right: 450px;
}

div#bg-1-2 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
  top: 420px;
  left: 0px;
}

div#bg-1-3 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 850px;
  right: -290px;
}

div#bg-1-4 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 1350px;
  left: 200px;
}

div#bg-1-5 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
  top: 1200px;
  left: -200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div id="parallax-bg-3" class="parallax-bg">
    <div id="bg-3-1"></div>
    <div id="bg-3-2"></div>
    <div id="bg-3-3"></div>
    <div id="bg-3-4"></div>
  </div>
  <div id="parallax-bg-2" class="parallax-bg">
    <div id="bg-2-1"></div>
    <div id="bg-2-2"></div>
    <div id="bg-2-3"></div>
    <div id="bg-2-4"></div>
    <div id="bg-2-5"></div>
    <div id="bg-2-6"></div>
  </div>
  <div id="parallax-bg-1" class="parallax-bg">
    <div id="bg-1-1"></div>
    <div id="bg-1-2"></div>
    <div id="bg-1-3"></div>
    <div id="bg-1-4"></div>
    <div id="bg-1-5"></div>
  </div>

</body>

</html>

＆＃13;

在上面引用的same article中，有一个如何解决CSS问题的教程。您没有使用background-attachment: fixed，而是将background添加到pseudo-element，并将其postion修改为

.element {
    position: relative;
}
.elemnt:before {
    content: ' ';
    position: fixed; /* instead of background-attachment */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/front/strategy.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; /* creates a new paint layer */
    z-index: -1;
}

这将基本上限制对滚动的影响作为＆＃34;背景＆＃34;会拥有它自己的独立元素。

注意：如果遇到无法调试的问题，请打开开发工具并逐个开始删除页面中的元素，直到找到问题为止。

<强>资源：

Answer 2

通过查看您的网站，其中有一些部分会减慢其余部分的速度。以下是一些加快速度的简单方法。

使用CDN

CDN（内容分发网络）可确保更快地加载所有内容，因为它不依赖于您自己的Wordpress服务器，并且允许访问时间在全球范围内保持一致。有一些好的，如CloudFlare和Incapsula。 Here是一篇列出更多内容的文章。

此外，您可以稍微快速地托管您的图片（我看到一张图片来自维基百科）

压缩图片

此步骤就像将照片转换为.jpg一样简单。 JPEG通过删除照片中不必要的信息自动压缩数据。您还可以使用压缩软件来缩小文件大小。

利用缓存

使用a caching plugin（有很多很棒的Wordpress）来缓存服务器上的数据，并且可以真正加快网站的速度。

搜索更多优化方法

使用Pingdom和Google PageSpeed Insights等工具来识别瓶颈并解决问题。

希望这能帮到你！

Wordpress页面滞后

2 个答案: