html 优化

使用语义化标签，增加可读性，便于 SEO。
减少 DOM 层级，DOM 解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。
压缩 HTML 文件

css 优化

优化选择器路径：使用 .c {} 而不是 .a .b .c {}。。
精准样式：使用 padding-left: 10px 而不是 padding: 0 0 0 10px。
压缩文件大小，减少资源下载负担。

javascript 优化

尽可能把 <script> 标签放在 body 之后，避免 JS 的执行卡住 DOM 的渲染，最大程度保证页面尽快地展示出来
script 文件异步加载
defer：是在 HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
async：async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
尽可能少地操作 DOM。
压缩文件大小，减少资源下载负担。

网络相关

DNS 加速
缓存（见上文浏览器缓存机制）
服务端开启文件压缩功能
使用 HTTP / 2.0
预加载: 指明哪些资源是在页面加载完成后即刻需要的
<link rel="preload" href="fonts/cicle_fina-webfont.woff" />
预加载: 浏览器空闲时加载，这些资源权重比 preload 低
<link rel="prefetch" href="fonts/cicle_fina-webfont.woff" />
预渲染: 告诉浏览器我即将跳转到这个 URL，浏览器可以提前解析 <link rel="prerender" href="http://example.com" />

优化渲染过程

代码层面的优化（参考浏览器篇如何减少重绘和回流）
懒执行 —— 将某些逻辑放到使用时再进行，可以通过定时器或事件进行唤醒
懒加载 —— 将不关键的资源延后加载，如图片、视频资源等。

图片优化

可以用 css 模拟代替的尽量不要用图片
小图片用 base64 格式
雪碧图
选择正确的图片格式
小图使用 PNG ，图标类可以使用 SVG 代替
照片使用 JPEG

使用 Webpack 优化项目

对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
开启 tree shaking，移除没有用的代码
优化图片，对于小图可以使用 base64 的方式写入文件中
按照路由拆分代码，实现按需加载
给打包出来的文件名添加哈希，实现浏览器缓存文件

首屏加载优化有哪些方案么

Vue-Router 路由懒加载（利用 Webpack 的代码切割）
使用 CDN 加速，将通用的库从 vendor 进行抽离
Nginx 的 gzip 压缩
Vue 异步组件
服务端渲染 SSR
如果使用了一些 UI 库，采用按需加载
Webpack 开启 gzip 压缩
如果首屏为登录页，可以做成多入口
Service Worker 缓存文件处理
使用 link 标签的 rel 属性设置 prefetch（用于加速下一次导航）、preload（用于优化当前页面）

前端生产环境如何调试错误

在前端生产环境里调试错误，需要兼顾排查效率和线上安全性。通常我们不会直接把源码暴露出来，而是通过日志采集、错误追踪、远程调试等手段来定位问题。

🔧 常见方法

1. 错误捕获与日志上报

捕获运行时错误

window.onerror = function (message, source, lineno, colno, error) {
  reportError({ message, source, lineno, colno, stack: error?.stack });
};

window.onunhandledrejection = function (event) {
  reportError({ message: event.reason?.message, stack: event.reason?.stack });
};

上报方式
- 发送到日志服务器（如 ELK、Grafana Loki）\
- 使用三方服务（Sentry、LogRocket、TrackJS）

这样能在生产环境实时收集错误，避免用户只说”白屏”但你复现不了。

2. Source Map（源码映射）

在构建时开启 sourceMap，例如 Vite/webpack 中配置：
```
devtool: "hidden-source-map";
```
- hidden-source-map：只生成映射文件但不暴露给用户，结合 Sentry 等服务使用。
- 部署时上传 .map 文件到错误追踪平台，就能把混淆后的报错还原到源码。

3. 远程调试工具

浏览器 DevTools 远程调试：在移动端可用 chrome://inspect 或 Safari 调试。\
第三方远程调试 SDK：
- vConsole / Eruda：在生产打开一个内嵌调试面板（适合小范围测试）。\
- LogRocket / Sentry Session Replay：能回放用户操作+错误环境。

4. 埋点 & 监控

监控接口失败率、页面加载时间、白屏率。
使用 Performance API / Web Vitals 采集性能。
埋点工具：阿里 ARMS、腾讯云 CLS、Google Analytics、自研 SDK。

5. 灰度 & 回滚

灰度发布：逐步放量观察错误情况，避免影响全部用户。\
快速回滚：出现严重错误时能迅速回退到上一个稳定版本。

🚀 实战建议

上线前：
- 打开 hidden-source-map\
- 接入错误监控平台（推荐 Sentry）
出现线上 bug：
- 查看监控面板 → 获取报错堆栈（通过 source map 还原源码位置）\
- 结合埋点信息 & 用户操作日志复现问题\
无法复现时：
- 临时在目标页面接入 vConsole/Eruda，让用户反馈信息\
- 或通过远程 session replay 工具回放操作过程