牛客面经整理：前端面经（数据库 / Linux / HTTP / 安全 / Vue / ES6）（十六）
收录日期：2026-04-28
关键词：前端、SQL、Linux、HTTP、缓存、URL 到渲染、安全、XSS、CSRF、Vue、ES6、ECharts
1. 数据库用什么？SQL 写得多不多？做过 SQL 优化吗？
参考答案
- 常见场景：MySQL/PostgreSQL；OLTP 侧看索引与事务，OLAP 侧看分区与列存。
- 优化思路（从性价比高到低）：
- 正确建索引：高选择性列、联合索引按查询条件与排序/分组顺序设计；避免“最左前缀”失效。
- 避免全表扫描：减少
SELECT *；分页用“延迟关联/覆盖索引/seek 方法”。 - 看执行计划：
EXPLAIN/EXPLAIN ANALYZE；关注rows、type、Extra（Using filesort/temporary）。 - 减少回表：覆盖索引；必要时做冗余字段（权衡一致性）。
- 大表治理：分库分表、分区、冷热数据分离、归档。
2. Linux 常用命令？
参考答案
- 文件与查找：
ls、cd、pwd、cat、less、head、tail -f、find、grep/rg - 进程与资源：
ps、top/htop、kill、free -h、df -h、du -sh - 网络排查：
curl、wget、ping、traceroute、netstat/ss、lsof -i - 权限与压缩：
chmod、chown、tar、zip/unzip
3. HTTP 报文有哪些组成？常见重要头有哪些？
参考答案
- 请求：请求行（method/path/version）+ 请求头 + 空行 + 请求体（可选）。
- 响应：状态行（version/status/statusText）+ 响应头 + 空行 + 响应体。
- 常见头：
- 缓存：
Cache-Control、ETag、If-None-Match、Last-Modified、Vary - 内容协商：
Accept、Accept-Encoding、Accept-Language - 认证：
Authorization - 安全：
Content-Security-Policy、Strict-Transport-Security - 跨域：
Access-Control-Allow-*
- 缓存：
4. GET 和 POST 区别？
参考答案
- 语义：GET 用于获取资源；POST 常用于提交/创建/触发处理。
- 幂等性：GET 通常应幂等；POST 不保证幂等（也可设计为幂等）。
- 参数位置：GET 常放 query；POST 可放 body（也能有 query）。
- 缓存：GET 更易被缓存；POST 通常不缓存（除非明确设置）。
- 安全：两者都不“更安全”，安全主要靠 HTTPS、鉴权与服务端校验。
5. 常见响应码及含义？
参考答案
200成功；201创建成功；204成功但无内容301/302重定向；304协商缓存命中400参数错误；401未认证；403无权限；404不存在；409冲突500服务端错误；502网关错误；503服务不可用；504网关超时
6. 缓存方式有哪些？（浏览器侧）
参考答案
- HTTP 缓存：强缓存/协商缓存（最关键）。
- 存储：
localStorage、sessionStorage、IndexedDB、Cache Storage（Service Worker）。 - Cookie：偏“会话/鉴权/状态”，不适合作为大缓存。
- 设计建议：明确更新策略（版本号/ETag/hash）、容量与失效，避免“缓存污染”。
7. 从输入 URL 到页面渲染流程？
参考答案
- 解析 URL → DNS 解析 → 建连（TCP；HTTPS 还要 TLS 握手）
- 发起 HTTP 请求 → 服务端处理 → 返回响应（可能 304/缓存命中）
- 浏览器解析 HTML → 构建 DOM；解析 CSS → 构建 CSSOM
- 合成 Render Tree → 布局（Layout）→ 绘制（Paint）→ 合成（Composite）
- 加载并执行 JS（可能阻塞解析，取决于 script 加载策略）
8. Web 安全了解哪些？（XSS / CSRF / DDoS）
参考答案
- XSS：输入未转义导致脚本执行；防护：转义/白名单、CSP、
HttpOnlyCookie、避免innerHTML拼接。 - CSRF：利用 Cookie 自动携带；防护：CSRF Token、
SameSite、校验Origin/Referer。 - DDoS：流量/资源耗尽；更多靠网关/CDN/WAF/限流/黑名单与弹性扩缩容。
9. Vue2/Vue3？v-if vs v-show？
参考答案
v-if：条件不满足时不渲染（销毁/重建），切换成本高但初始成本低。v-show：始终渲染，仅切换display，切换频繁时更合适但初始成本更高。
10. ES6 常见新特性？箭头函数注意点？
参考答案
- 语法/能力：
let/const、解构、模板字符串、默认参数、展开/剩余、Promise、class、module、Map/Set、Symbol、迭代器/生成器、Proxy/Reflect等。 - 箭头函数：
- 没有自己的
this/arguments，this取词法作用域。 - 不能作为构造函数（无
prototype，不能new）。 - 适合回调；类方法里注意与
this绑定的关系。
- 没有自己的
11. ECharts 用过哪些图？地图/动态图表怎么做？
参考答案
- 常用图：折线、柱状、饼图、散点、雷达、仪表盘、热力图等。
- 动态更新：通过
setOption(option, { notMerge, lazyUpdate })更新数据；高频更新要做节流/批量更新。 - 地图：加载 geojson 并注册 map；注意投影、缩放、tooltip/visualMap 与性能。
12. Python 写过脚本吗？（加分回答方向）
参考答案
- 说明用途：数据清洗/爬取/自动化/批处理/日志分析。
- 工具链：
requests、beautifulsoup/lxml、pandas、click/typer、pytest。 - 工程化：虚拟环境、依赖管理、参数化、可观测性（日志/重试）。