网站开发常见 bug 汇总：90% 开发者都踩过的坑

• 典型表现：用户按特定流程操作（如表单提交→弹窗确认）后，导航栏偏移、产品图片消失，刷新页面又恢复正常。

• 核心成因：多为 “渲染竞争条件” 导致 —— 自定义组件中的定时器与父组件重渲染冲突，两次样式修改在 100 毫秒内叠加，引发 CSS 优先级混乱。某电商网站的商品筛选组件就因这种问题，导致筛选后列表项错位，转化率下降 22%。

• 低成本解决步骤：

1. 用 Chrome 开发者工具的 “Performance” 面板录制操作流程，定位重渲染触发点；

1. 给样式修改逻辑加 “状态锁”，确保同一时间仅执行一次样式操作；

1. 借助框架钩子（如 Vue 的onBeforeUpdate）避免不必要的组件重渲染。

• 典型表现：PC 端显示正常，手机端按钮重叠、文字溢出屏幕，尤其在 iPhone 与安卓机型间差异明显。

• 核心成因：过度使用固定像素（px）布局，未考虑不同设备的屏幕密度与分辨率差异。某餐饮外卖站曾因未适配折叠屏手机，导致菜单页 50% 内容被遮挡。

• 低成本解决技巧：

1. 全局采用 “相对单位”：用 rem（基于根字体）、vw（基于视窗宽度）替代 px，根字体设置为font-size: 62.5%（1rem=10px）；

1. 关键布局用 Flex/Grid 弹性布局，避免浮动（float）布局；

1. 用 Media Query 适配特殊尺寸：@media (max-width: 375px) { ... }针对 iPhone SE 等小屏机型微调。

• 典型表现：MacOS 或 Windows 深色模式下，文本与背景色均为黑色，内容完全不可见。

• 核心成因：未适配系统主题接口，仍使用固定浅色配色方案，忽略了操作系统的颜色变量传递。

• 零成本解决方法：

1. 用 CSS 变量定义动态配色：--text-color: var(--system-text-color, #333)；

1. 监听系统主题变化事件，动态切换样式表：

	

		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
	

	

		document.documentElement.classList.toggle('dark-mode', e.matches);
	

	

		});
	

• 典型表现：用户点击 “提交订单” 按钮无反应，反复点击后生成多笔重复订单。

• 核心成因：未处理接口异常状态（如网络中断、后端超时），也未添加 “请求锁”，导致重复提交。某票务网站曾因这种问题，在高峰期出现 127 笔重复订单，退款成本超 2 万元。

• 低成本防控方案：

1. 封装统一请求工具，添加请求状态管理（loading/error）；

1. 按钮点击后立即置灰（disabled=true），请求结束后恢复；

1. 增加错误提示：用 Toast 组件显示 “网络异常，请稍后重试”。

• 典型表现：后端返回嵌套 JSON 数据（如{user: {info: {name: "张三"}}}），前端直接取值user.info.name，当后端数据缺失时触发报错，页面白屏。

• 核心成因：未做 “数据容错处理”，默认后端返回数据格式完美，忽略了网络波动或后端异常导致的数据缺失。

• 零成本修复技巧：

1. 用 “可选链运算符”（?.）取值：user?.info?.name || "未知用户"；

1. 用 JSON Schema 工具（如 Ajv，免费开源）校验后端数据格式，不符合时触发降级显示；

1. 初始化默认数据：const defaultUser = {info: {name: ""}}; const user = {...defaultUser, ...backendData}。

• 典型表现：控制台报错 “Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked”，前端无法获取后端数据。

• 核心成因：浏览器的 “同源策略” 限制，前后端域名、端口、协议不一致时触发拦截。

• 低成本解决途径：

1. 开发环境用 Vite/Webpack 代理：在vite.config.js中配置proxy: { '/api': { target: 'http://backend.com' } }；

1. 生产环境让后端添加跨域响应头：Access-Control-Allow-Origin: *（简单场景），复杂场景用 JWT 令牌验证。

• 典型表现：首页加载需 8 秒以上，Google PageSpeed Insights 得分低于 60 分，北京用户访问非华北节点服务器时更明显。

• 核心成因：未优化图片资源（单张 Banner 图达 5MB）、未启用缓存、同步加载过多 JS 文件。

• 低成本优化清单：

• 典型表现：用户浏览页面 10 分钟后，滑动越来越卡，甚至触发 “页面无响应” 提示。

• 核心成因：页面销毁后，图片缓存对象仍被全局事件监听器引用，未被垃圾回收（GC），内存占用持续攀升。

• 低成本排查与修复：

1. 用 Chrome 开发者工具的 “Memory” 面板，拍摄页面切换前后的内存快照，对比未释放的对象；

1. 移除冗余的全局监听器：window.removeEventListener('scroll', handleScroll)；

1. 用 “弱引用” 管理缓存：const cache = new WeakMap()，对象无引用时自动释放。

• 典型表现：滑动商品列表时，图片一张一张 “蹦出来”，出现空白区域。

• 核心成因：一次性加载所有图片昆明网站开发，未做懒加载处理，导致带宽占用过高。

• 零成本实现方案：

1. 用原生loading="lazy"属性（主流浏览器支持）：<img src="product.jpg" loading="lazy" alt="">；

1. 为图片设置占位容器：div { aspect-ratio: 16/9; background: #f5f5f5; }，避免布局偏移。

四、部署与兼容类 Bug：上线后的 “突发地雷”

• 典型表现：本地运行正常，部署到 Linux 服务器后，文件导出功能报错 “路径不存在”，即使路径正确也无法写入。

• 核心成因：Windows 与 Linux 路径分隔符差异（Windows 用\，Linux 用/），且 Linux 对文件权限控制严格。

• 低成本适配方法：

1. 用 Node.js 的path模块统一处理路径：path.join(__dirname, 'uploads')，自动适配系统；

1. 部署后执行chmod -R 755 /var/www/website，开放必要的文件读写权限。

• 典型表现：在 Safari 浏览器中，日期选择器无法点击、CSS 渐变不显示，Chrome 中正常。

• 核心成因：使用了浏览器私有属性或 ES6 + 新语法，未做兼容处理。例如 Safari 不支持document.querySelector的某些选择器语法。

• 低成本兼容技巧：

1. 用 Can I Use 查询 API 兼容性；

1. 引入 Autoprefixer（免费）自动添加 CSS 前缀：-webkit-linear-gradient适配 Safari；

1. 简单场景用 Babel 将 ES6 + 语法转 ES5，复杂场景按需加载 polyfill。

• 典型表现：浏览器提示 “不安全连接”，部分资源（如图片、JS）因混合内容（HTTP+HTTPS）被拦截。

• 核心成因：SSL 证书未正确配置，或页面中引用了 HTTP 协议的外部资源。

• 低成本解决步骤：

1. 在阿里云 / 腾讯云申请免费 SSL 证书（Let's Encrypt），按教程配置 Nginx/Apache；

1. 用 “查找替换” 将页面中http://改为https://，或用//自动适配协议；

1. 配置Content-Security-Policy响应头网站开发，禁止加载 HTTP 资源。

1. 功能测试：

• 核心流程走查：注册→登录→提交表单→支付（测试环境）；

• 异常场景模拟：断网、输入错误数据、快速点击按钮。

1. 兼容性测试：

• 浏览器：Chrome（最新版）、Safari（最新版）、Edge（最新版）；

• 手机：iPhone 14（iOS 最新版）、小米 13（Android 14）、折叠屏（如 Mate X3）。

1. 性能测试：

• 用 Google PageSpeed Insights 测得分（≥80 分合格）；

• 用 Chrome 开发者工具 “Network” 面板测加载速度（首屏≤3 秒合格）。

1. 安全测试：

• 检查是否启用 HTTPS；

• 测试 SQL 注入：在搜索框输入' or 1=1 --，看是否返回异常数据。