上周接了个私活，客户非要搞单页面网站。我心里直犯嘀咕，这种花里胡哨的玩意儿做起来最折腾人，但架不住对方钱给得痛快，硬着头皮上了。

一、翻车从画草图开始

先掏出纸笔画布局，想着整点高级感。首页画个大横幅轮播图，下面堆几排内容块，最底下塞联系方式。画完美滋滋发给客户，结果人家直接甩来一句：“这跟十年前的网页有啥区别？”得，白忙活两小时。

二、被导航栏逼疯

做滚动效果时彻底卡壳了。鼠标滚到“联系我们”板块，顶上的导航按钮死活不跟着点亮。查了三天资料，试了七八种办法：

• 拿jQuery写点击事件，按钮乱跳像抽风
• 用CSS锚点定位，滚动起来跟拖拉机似的
• 装了个ScrollMagic插件，直接把浏览器干崩溃了

蹲在电脑前啃馒头那晚突然开窍——把导航栏每个按钮都绑上数据属性不就完了？凌晨三点终于搞定时，窗外扫地车都开始嗡嗡响了。

三、加载速度要人命

眼瞅着页面做差不多了，在手机上一打开差点背过气。首屏加载要整整12秒！排查发现毛病出在： 所有图片不分青红皂白全堆首页，20张高清大图吃得死死的。赶紧把轮播图外的内容图都改成懒加载，JS文件压缩到妈都不认识。折腾完再测，3秒勉强能见人了。

四、老板的神来一笔

交活前夜客户突然来视察，划拉着手机突然冒出来：“为啥不搞成左右滑动切换板块？”我握着咖啡杯的手直抖——整个页面结构都得重写！好说歹说加钱改需求，通宵改代码改到眼冒金星。交差时那滑动效果，手指划快点还能看见页面抽搐。

现在这网站已经在线上跑着了。昨天路过客户公司楼下，看见他们员工用手机打开网页加载了半分钟，骂骂咧咧切了4G网。行，好歹尾款到账了。