做本地小程序首屏白屏6秒差点黄了：把6秒压到0.8秒的全流程踩坑记录

我前两年做本地美食探店小程序，刚上线那会以为凑够100家店就能躺着涨粉，结果上线第一天看后台数据，打开页面的用户里30%直接在首屏就退出，留存惨得没法看。一开始我还以为是服务器带宽不够，咬咬牙把1M带宽升到3M，每个月多花200多块，结果白屏时间一点没少，用户还是点开就走，差点直接把项目关停。 后来拉着朋友对着调试工具逐帧看，才发现问题根本不在服务器，全在前端自己写的烂代码上。一开始我图省事，小程序启动的时候直接把所有接口全拉回来：首页商家列表、分类数据、用户收藏、附近门店、推荐榜单，五个接口塞在一个Promise.all里一起等，哪怕其中一个接口卡了2秒，整个页面就得等2秒，加上微信本身加载包的时间，白屏直接干到6秒多。那时候夏天大中午用户在外面扫个码，等你白屏6秒，早转身走了。 改的第一步就是拆接口。首屏只拉首页最上面那一块需要展示的内容：前5家推荐商家、顶部轮播图、3个分类入口，剩下的什么附近门店、热门榜单、用户收藏这些，全等用户滑动到对应位置再拉，甚至用户点进分类页再去拉对应分类的数据，不要一上来就全拉。就这一步，首屏加载时间直接从6.2秒降到3.1秒，当时我都傻了，原来根本不用动后端。 然后是图片。我之前图省事，直接把商家拍的原图从COS拉过来，一张图平均2M多，小程序光加载图片就占了80%的时间。后来直接在COS开了图片压缩处理，按照小程序里显示的尺寸，把所有首屏图压到宽750像素，质量压到60，一张图直接从2M压到80K，加载速度又砍了一半。还有那个打包体积，我之前把所有页面的代码全打在一个包里，一个主包干到1.2M，微信加载包就得1秒多，后来把没用的运营活动页面、测试用的mock数据全删了，主包压到400K以内，又省了1秒。 最后还加了个首屏数据缓存，用户第一次打开加载完数据，就存在本地缓存里，第二次打开先把上次的缓存内容渲染出来，后台再悄悄拉新数据替换，用户根本感觉不到加载。折腾了一周，最后测首屏打开时间稳定在0.8秒左右，小程序留存从之前的20%直接拉到55%，日活从掉到50的低谷慢慢又涨回400多。那时候才明白，新手做小程序总觉得是服务器、是接口慢，其实90%的慢都是自己代码写得太贪，什么都想一上来就给用户，反而把用户急走了。