做我们这行七年了，见过太多老板花大价钱搞个高大上的PC站，结果手机端打开卡成PPT，最后还得回来找我重修。今天不扯那些虚头巴脑的理论，就聊聊最让人头秃的“手机网站开发之列表开发”。
你肯定遇到过这种情况：用户在手机上刷商品列表或者新闻流，手指一滑，页面直接卡顿，甚至白屏好几秒。这时候用户早跑了，谁还管你代码写得漂不漂亮？很多新手程序员一上来就死磕CSS动画，或者把几千条数据一次性渲染到DOM里，这在PC上可能还行，但在移动端，内存和CPU根本扛不住。
咱们得先搞清楚，为什么列表在手机上这么难搞？因为手机屏幕小，但数据量往往不小。如果你用传统的for循环或者map去遍历生成DOM节点，哪怕只有100条数据，浏览器也要计算100次布局，还要处理大量的重绘和重排。这就好比你在一个狭小的房间里塞了100个人，大家挤在一起，想动一下都难。
所以我常跟团队说，做手机网站开发之列表开发，核心就两个字：克制。
第一，别一次性全渲染。这是最基础的。不管你的数据源有多少条，前端页面只展示当前可视区域加上下方缓冲区的几条数据。比如屏幕能显示10条，你就只渲染12条，多出来的2条是缓冲，防止滚动时出现空白。剩下的数据，等用户滑到底部，再动态加载下一页。这个逻辑看似简单，但很多人实现的时候，数据更新和视图更新没同步好，导致列表闪烁或者数据错乱。
第二，虚拟列表是进阶必选项。如果你的列表数据超过几百条，甚至上千条，那就必须上虚拟列表技术。它的原理很简单：不管总数据有多少，DOM节点的数量始终保持在一个固定的小范围内。当用户滚动时，动态计算哪些数据应该在可视区域内，然后把对应的DOM节点插进去，把不在可视区域的节点移除或者隐藏。听起来挺复杂，其实现在的很多UI库都有现成的组件，比如Ant Design Mobile或者MUI，直接拿来用就行。但要注意，虚拟列表对滚动性能要求极高，如果节点内部结构太复杂，依然会卡。
第三，图片懒加载和占位符。列表里最耗性能的往往不是文字，而是图片。别一上来就加载所有图片，先用一个灰色的占位div撑开布局，等图片真正进入可视区域再加载。这里有个小细节，很多人忽略图片的宽高属性。如果不指定宽高，图片加载过程中会导致页面布局抖动，用户体验极差。所以，哪怕图片还没加载出来，也要在HTML里写死width和height，或者用CSS固定高度。
第四，滚动事件的处理。别在scroll事件里直接写复杂的逻辑，比如计算位置、请求数据。scroll事件触发频率太高了，容易阻塞主线程。要用节流或者防抖，或者更好的是，用requestAnimationFrame来同步动画和滚动。我见过一个案例，因为没做节流，用户稍微滑一下，CPU占用率直接飙到100%，手机烫得能煎鸡蛋。
最后，别忘了测试。别只在你的旗舰机上测，找几台千元机、旧款安卓机试试。很多在iPhone 15上流畅的效果，在几年前的低端机上可能直接崩盘。手机网站开发之列表开发，不是代码写得越炫越好，而是越稳越好。用户不关心你用了什么高级框架，只关心滑起来顺不顺，加载快不快。
这七年里，我见过太多项目因为列表性能问题导致转化率下降。所以，别嫌麻烦，把列表优化做细了，这才是真正体现技术价值的地方。希望这些经验能帮你在接下来的项目里少踩点坑，毕竟，流畅的体验才是留住用户的根本。记住，代码写得再漂亮，卡顿就是零分。
