网站开发心得体会总结500字
去年接手一个烘焙工作室的官网改版，上线第三天老板打来电话：“手机端点预约按钮没反应，网站好几个客人说点了没动静。总结字”我打开手机模拟器，网站Chrome 里一切正常。总结字换到 iPhone 12 真机，网站按钮确实像死了一样。总结字查了两小时，网站最后定位到 touch-action: manipulation 被一个第三方滑动库覆盖了。那一刻我意识到，网站开发里最折磨人的从来不是写新功能，而是那些“在我这儿好好的”的 bug。
前端框架换来换去，Vue 3 的 ref 和 React 的 useState 解决的是同一类问题——让数据和视图别打架。但项目复杂到一定程度，状态管理就成了泥潭。我见过一个后台系统用 Pinia 存了 47 个模块的 state，一个下拉框的选中值触发了三个组件的重渲染。后来我们砍掉一半全局状态，改成组件内部 provide/inject 加事件总线，页面响应快了将近 200ms。这行干久了会明白，少即是多不是鸡汤，是性能预算逼出来的。
watch(() => store.userInfo, (newVal) => {
if (newVal.role === 'admin') {
store.fetchPermissions().then(() => {
store.updateMenu(newVal.role)
})
}
}, { deep: true })
后端接口设计也是血泪。刚入行时我特喜欢 RESTful，每个资源一套 CRUD，URL 干净得像诗。可实际业务里，“获取某个订单的物流轨迹并附带用户最近三次投诉记录”这种需求，硬拆成三个接口再前端拼装，网络请求翻倍，错误处理写起来想砸键盘。后来团队定了个规矩：允许一个页面级接口返回 5 张表以内的关联数据，用 ?include= 控制字段。数据库索引该加就加，慢查询日志每周看一次。上线半年，接口平均响应时间从 340ms 降到 90ms。
部署环节最容易掉链子。有次周五下午发版，CI 流水线卡在 npm install 上，node_modules 里某个包偷偷依赖了 python2。等发现时已经晚上九点，回滚后老板发了条消息：“以后发版能不能别挑周五？” 现在我们的 Dockerfile 里锁死所有基础镜像版本，package-lock.json 必须提交，预发布环境跑满 24 小时才允许上生产。听起来很笨，但笨办法往往最省心。
安全方面，我踩过最大的坑是文件上传。用户传了个 .jpg 改成 .php 的图片，服务器直接执行了。还好是内部测试环境。现在所有上传文件强制重命名，后缀白名单，存到非 web 根目录，用 X-Sendfile 输出。还有一次 SQL 注入差点从搜索框进来，幸亏用了参数化查询。别信前端校验，后端每个入参都要当贼防。
性能优化没有银弹。Lighthouse 跑分从 45 提到 92，靠的是图片转 WebP、路由懒加载、CDN 缓存策略、关键 CSS 内联，还有把那个 300KB 的 moment.js 换成 dayjs。但最见效的一招是——删掉首页轮播图。产品经理一开始不同意，说“其他网站都有”。我拿数据说话：轮播图点击率 0.8%，却拖慢首屏 1.2 秒。换成静态 hero 图后，跳出率降了 11%。
写了六年网站，现在看一个项目好不好，先看它控制台有没有报错，再看移动端断网时能不能优雅降级。技术选型别追新，团队里大多数人熟悉的才是好方案。代码注释写清楚“为什么”而不是“是什么”。最后，永远在真机上测一遍，模拟器会骗人，老板和用户的手机不会。