页面滑动效果

页面滑动效果这事儿，说起来简单，但做起来可有点讲究。我之前在2017年左右做的一个项目里，就用到了这个效果。
当时，那是一个电商网站，我负责的是移动端页面。页面设计得挺好看的，但就是有点儿卡。用户在滑动商品列表的时候，有时候会出现一下卡顿，那感觉就像是在看慢动作一样。
后来，我花了两天时间研究了一下，发现主要问题出在图片上。那时候，图片都是直接从服务器加载的，手机一滑动，服务器那边响应不过来，页面就卡了。
我解决办法是，改用懒加载技术。就是用户滚动到哪个位置，就加载哪个位置的图片。这样一来，页面滑动时就顺畅多了。那段时间，我每天对着代码改啊改，当时也没想明白，为什么这么简单的一个优化，效果会这么好。
还有，我还记得，我在北京那会儿，有一次跟同事讨论这个效果，他说：“你知道吗，现在很多页面滑动效果，都用的是CSS3的transform属性。”我当时也没想明白，后来查了资料，才知道，这玩意儿就是用来优化动画效果的，可以减少浏览器的渲染负担。
总之，页面滑动效果这事儿，关键是要优化图片加载，还有利用好CSS3的相关属性。说实话，现在看起来很简单，但当时可真费了我不少脑筋。

2015年，北京，某电商页面。页面滑动效果慢得像龟速，用户都骂街了，得赶紧优化。

页面滑动效果，2023年，深圳，至少20个项目中，每5次有4次用了平滑的滑动。
移动端滑动，速度要快，不要卡顿。
页面切换，3秒内必须响应，用户体验至上。
触摸滑动，响应范围要大，不要让用户滑到一半断掉。
滚动加载，内容要连续，别让用户在中间停下等。
滑动时，预加载下一页，别让用户等。
调试工具，Chrome DevTools滑动效果测试要熟练。