做有态度的前端团队

网易FEG前端团队

滚动视差效果的实现及优化方案

作者: 两只凤梨日期: 2018-09-29

272997

前言

相信大家对页面滚动视差效果都有一定的了解，滚动视差就是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果。

项目地址：http://nostos.163.com/

使用background-attachment:fixed及改变background-position去实现视差效果

接到要做一个视差滚动的效果需求时，脑海中立刻浮现了一个解决方案，通过background-attachment:fixed把背景固定，然后计算滚动条的拖动位置去改变不同背景图的background-position来实现。

然而，事情往往没那么简单，由于这次项目要兼容到2560px宽度的屏幕分辨率，图片质量要求又高，图片尺寸又大。在不同主流浏览器上明显出现了不同程度卡帧的情况。既然出现卡顿的情况，我们就要想办法去分析性能瓶颈在哪里，才能有针对性地去优化。

首先，打开chrome tool的performance监控下性能情况，如图：

然后，打开实时FPS面板去监控性能：

1、按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单。
2、输入Rendering，点选Show Rendering
3、在Rendering面板里，勾选FPS Meter。
4、FPS实时面板就出现在页面的右上方。
5、勾选paint flashing查看重绘区域

性能显示，当我们拖动滚动条时，发现页面发生了大量的重绘和回流，以及绘制性能掉到了每秒19帧了，导致页面看起来延缓卡帧。
查了下资料，最终定位到是由于background-attachment：fixed会不停触发重绘问题，而transform和opacity的属性改变不会触发绘制。面对这种情况，真是让人头秃，为了优化性能只能修改视差效果滚动方案啦。

改变定位方式，通过使用transfrom:translate3d开启GPU硬件加速优化卡帧问题

于是，尝试采取了使用transfrom:translate3d(0,0,0)开启GPU硬件加速的方案，以及通过对应元素脱离文档流减少重排，具体代码如下
html：

<div class="bg-wrap">
    <img src="../img/sunny.jpg"  class="bg-img"/>
</div>

css：

.bg-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
}

javasctipt：

document.getElementsByClassName('bg-wrap')[0].style.transform = translate3d(0,y,0);//y根据具体的视差位置去计算

这是一种hack的处理方式，实际上我们并不需要z轴的变化，通过欺骗浏览器开启了GPU硬件加速达到优化的效果，同样加上transform:translateZ(0)也能达到同样的效果。同时，我们并不需要看到背面，设置backface-visibility:hidden去优化，backface-visibility的默认值是visible。

    //backface-visibility 属性定义当元素不面向屏幕时是否可见
    backface-visibility:hidden;

通过测试发现，情况果然有一定好转。实际上，这种处理方式是我们通过创建新的合成器层去实现的。创建新的层的最好方式是使用will-change属性。

使用will-change提高页面滚动，动画渲染等性能。

关于will-change（https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change）：是为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

例如这里我们即将改变的是transform

will-change:transform;

最终CSS优化成：

.bg-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    will-change:transform;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
}

由于will-change属性兼容性问题，对于旧版浏览器，我们同时用上面所说的3D变形来强制创建一个新层去兼容。

最后经过优化后：

nice，上线。

手机阅读请扫描下方二维码：

none

上一篇：关于使用Koa2的点点滴滴下一篇：移动端视频转序列图片播放

已有 136 条评论

admin

2020-10-10 19:49:24

12345678

回复
1. admin
  
  2020-10-23 10:09:50
  
  12345678
  
  回复
  1. 1
    
    2023-03-18 08:15:57
    
    555
    
    回复
    
    1
    
    2023-09-11 18:39:35
    
    1
    
    回复
    
    1
    
    2024-07-15 20:18:34
    
    1
    
    回复
  2. 1
    
    2023-03-21 03:03:03
    
    555
    
    回复
  3. 1
    
    2023-03-24 14:33:42
    
    555
    
    回复
  4. 1
    
    2023-09-11 19:50:42
    
    555
    
    回复
  5. 1
    
    2023-09-14 20:16:36
    
    555
    
    回复
  6. 1
    
    2023-09-14 20:53:28
    
    1
    
    回复
  7. 1
    
    2023-09-15 19:06:20
    
    555
    
    回复
  8. 1
    
    2023-10-05 08:25:26
    
    1
    
    回复
2. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
  1. admin
    
    2020-10-23 10:38:34
    
    12345678
    
    回复
  2. admin
    
    2020-10-23 10:41:59
    
    12345678
    
    回复
  3. admin|expr 813152542 + 912416180
    
    2020-10-23 10:41:59
    
    12345678
    
    回复
  4. admin
    
    2020-10-23 10:41:59
    
    zmtuvafgkbemfbiqpjth
    
    回复
  5. admin
    
    2020-10-23 10:45:56
    
    12345678
    
    回复
  6. admin
    
    2020-10-23 10:45:56
    
    12345678
    
    回复
  7. admin
    
    2020-10-23 10:47:25
    
    12345678
    
    回复
  8. admin
    
    2020-10-23 10:47:25
    
    12345678
    
    回复
  9. admin
    
    2020-10-23 10:47:25
    
    12345678
    
    回复
  10. admin
    
    2020-10-27 14:49:11
    
    12345678
    
    回复
  11. admin
    
    2020-11-02 21:51:52
    
    12345678
    
    回复
  12. admin
    
    2021-03-24 22:34:32
    
    12345678
    
    回复
3. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
4. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
5. 1
  
  2023-09-11 18:38:33
  
  1
  
  回复
6. 1
  
  2023-09-14 20:52:28
  
  1
  
  回复
7. 1
  
  2023-09-15 19:51:54
  
  1
  
  回复
8. 1
  
  2023-09-23 03:39:14
  
  1
  
  回复
9. 1
  
  2023-10-05 08:23:52
  
  1
  
  回复
10. 1
  
  2024-03-13 10:24:51
  
  1
  
  回复
11. 1
  
  2024-07-02 17:10:12
  
  1
  
  回复
12. 1
  
  2024-07-15 20:17:29
  
  1
  
  回复
13. edge
  
  2024-12-23 19:41:45
  
  edge
  
  回复
admin

2020-10-12 15:13:13

12345678

回复
admin

2020-10-20 20:04:19

12345678

回复
1. admin
  
  2020-10-23 09:50:55
  
  12345678
  
  回复
2. admin
  
  2020-10-23 09:50:55
  
  12345678
  expr 880240447 + 873778421
  
  回复
3. admin
  
  2020-10-23 09:50:55
  
  12345678
  
  回复
4. admin
  
  2020-10-23 09:50:55
  
  ovxizuiqcohektahgtav
  
  回复
5. admin
  
  2020-10-23 09:50:55
  
  12345678 |expr 848695959 + 953616587
  
  回复
6. admin
  
  2020-10-23 09:50:55
  
  12345678 $(expr 840510505 + 826835477)
  
  回复
7. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
8. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
9. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
10. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
11. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
12. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
13. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
14. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
15. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
16. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
17. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
18. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
19. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
20. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
21. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
22. admin
  
  2020-10-23 09:51:55
  
  12345678
  
  回复
23. admin
  
  2020-10-23 10:09:50
  
  12345678
  
  回复
24. admin
  
  2020-10-23 10:22:29
  
  12345678
  
  回复
25. dreftewzwtlmkaesnudj
  
  2020-10-23 10:22:29
  
  12345678
  
  回复
26. admin
  
  2020-10-23 10:22:29
  
  12345678
  
  回复
27. admin%0d%0aCRLF-Header:CRLF-Value
  
  2020-10-23 10:22:29
  
  12345678
  
  回复
28. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
29. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
30. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
31. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
32. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
33. admin
  
  2020-10-23 10:24:40
  
  12345678
  
  回复
admin

2020-10-23 09:50:55

12345678

回复
admin

2020-10-23 09:54:41

12345678

回复
admin

2020-10-23 09:54:41

12345678

回复
admin

2020-10-23 09:54:41

12345678

回复
admin

2020-10-23 10:25:42

12345678

回复
admin

2020-10-23 10:25:42

12345678

回复
admin

2020-10-23 10:25:42

12345678

回复
admin

2020-10-23 10:25:42

12345678

回复
admin

2020-10-23 10:25:42

12345678

回复
1. 1
  
  2021-11-01 02:38:14
  
  1
  
  回复
2. 1
  
  2021-11-01 02:56:28
  
  %{44618*40529}
  
  回复
  1. 1
    
    2022-03-06 03:12:06
    
    1
    
    回复
  2. 1
    
    2022-03-06 09:58:20
    
    1
    
    回复
  3. 1
    
    2022-03-06 09:58:20
    
    1
    
    回复
1

2022-03-06 09:59:20

1

回复
1. 1
  
  2022-09-27 09:12:21
  
  1
  
  回复
1

2023-01-25 10:47:56

1

回复
1

2023-01-25 10:47:56

1

回复
1

2023-01-25 14:13:48

555

回复
1

2023-02-28 03:51:35

1

回复
1

2023-02-28 03:51:35

1

回复
1

2023-03-18 08:10:10

1

回复
1

2023-03-18 08:23:39

555

回复
1. 1
  
  2023-03-20 11:54:43
  
  1
  
  回复
2. 1%0d%0aCRLF-Header:CRLF-Value
  
  2023-03-20 12:30:19
  
  1
  
  回复
3. 1
  
  2023-03-20 12:30:19
  
  1
  
  回复
4. 1
  
  2023-03-20 12:31:19
  
  1
  
  回复
5. 1
  
  2023-03-20 12:31:19
  
  1
  
  回复
6. 1
  
  2023-03-20 12:31:19
  
  1
  
  回复
1

2023-03-20 12:30:19

1

回复
1

2023-03-21 00:10:43

1

回复
1

2023-03-21 04:15:48

555

回复
1

2023-03-24 13:38:43

1

回复
1

2023-03-24 14:19:47

555

回复
1

2023-03-26 12:46:31

1

回复
1

2023-04-01 02:21:19

1

回复
1

2023-04-03 09:22:28

1

回复
1

2023-04-04 21:27:09

1

回复
test

2023-04-13 17:57:27

test

回复
Crawlergo

2023-05-24 03:50:00

Crawlergo

回复
Crawlergo

2023-05-24 06:11:37

Crawlergo

回复
Crawlergo

2023-05-24 06:11:37

Crawlergo

回复
Crawlergo

2023-05-24 06:11:37

btzerxwehmvoursqrrlv

回复
btzerxwehmvoursqrrlv

2023-05-24 06:11:37

Crawlergo

回复
1

2023-09-11 17:37:35

1

回复
1

2023-09-11 18:12:48

555

回复
1

2023-09-12 00:27:55

1

回复
1

2023-09-14 19:35:48

1

回复
1

2023-09-14 22:43:16

555

回复
1

2023-09-15 18:26:44

1

回复
1

2023-09-15 21:45:59

555

回复
1

2023-09-16 03:58:59

1

回复
1

2023-09-23 02:16:30

1

回复
1

2023-10-05 05:55:30

1

回复
1

2024-03-13 08:41:30

1

回复
1

2024-07-02 15:23:26

1

回复
1

2024-07-02 15:24:44

1

回复
1

2024-07-15 18:44:45

1

回复
1

2024-07-15 18:45:48

1

回复
1

2024-07-16 04:14:34

1

回复
1. 1
  
  2024-08-09 06:57:21
  
  1
  
  回复
1

2024-08-28 05:25:20

1

回复
vqacjwscxm

2024-12-04 03:03:58

《海绵宝宝第二季》欧美动漫高清在线免费观看：https://www.jgz518.com/xingkong/26191.html

回复
zfieqstqeg

2024-12-06 05:58:45

《血中血1983》剧情片高清在线免费观看：https://www.jgz518.com/xingkong/124254.html

回复
test

2025-02-19 06:31:54

test

回复