美团暑期前端 AI 面试面经整理笔记(七)
1. 如何在项目中使用 AI 工具来提升效率
答案
项目里使用 AI 工具提升效率,关键是把它放在“规则明确、重复度高”的环节。
- 可以用来生成样板代码、测试用例、接口 mock、文档初稿。
- 也可以辅助做重构建议、问题排查和方案对比。
- 但核心业务逻辑、架构取舍和线上风险控制仍然要靠人工 review。
2. HTTP 和 HTTPS 协议的区别
答案
HTTPS = HTTP + TLS,核心作用是身份认证、数据加密和完整性校验。
- HTTP 明文传输,容易被窃听和篡改;HTTPS 通过证书和加密建立安全连接。
- 证书无效常见原因有:过期、域名不匹配、证书链不完整。
- SSL/TLS 证书过期后,浏览器无法继续信任服务端身份,所以连接会被警告甚至拦截。
3. 浏览器提示网站的 HTTP 证书无效,如何处理
答案
HTTPS = HTTP + TLS,核心作用是身份认证、数据加密和完整性校验。
- HTTP 明文传输,容易被窃听和篡改;HTTPS 通过证书和加密建立安全连接。
- 证书无效常见原因有:过期、域名不匹配、证书链不完整。
- SSL/TLS 证书过期后,浏览器无法继续信任服务端身份,所以连接会被警告甚至拦截。
4. 为什么 SSL 证书过期会导致 HTTPS 连接出现问题
答案
HTTPS = HTTP + TLS,核心作用是身份认证、数据加密和完整性校验。
- HTTP 明文传输,容易被窃听和篡改;HTTPS 通过证书和加密建立安全连接。
- 证书无效常见原因有:过期、域名不匹配、证书链不完整。
- SSL/TLS 证书过期后,浏览器无法继续信任服务端身份,所以连接会被警告甚至拦截。
5. 什么是闭包,具体应用场景
答案
闭包就是“函数 + 它定义时所在的词法作用域”的组合。
- 内部函数访问外部函数变量,即使外部函数执行完,这些变量仍然可以被保留。
- 常见应用有:函数工厂、缓存、柯里化、私有变量、事件处理器。
- 闭包很有用,但如果引用了不再需要的大对象,也可能带来内存滞留。
6. Babel 的作用与原理
答案
Babel 的作用是把较新的 JavaScript 语法转换成兼容目标环境的代码。
- 语法转换主要靠插件,目标环境兼容主要靠 preset,例如
@babel/preset-env。 - 如果需要补充缺失 API,还要配合 polyfill,比如
core-js。 - 想避免全局污染,通常用按需注入或运行时方案,而不是一上来全量挂到全局对象上。
7. 如何确保转换后的代码在不同浏览器中的兼容性,如何配置 Babel
答案
Babel 的作用是把较新的 JavaScript 语法转换成兼容目标环境的代码。
- 语法转换主要靠插件,目标环境兼容主要靠 preset,例如
@babel/preset-env。 - 如果需要补充缺失 API,还要配合 polyfill,比如
core-js。 - 想避免全局污染,通常用按需注入或运行时方案,而不是一上来全量挂到全局对象上。
8. Babel 在处理 polyfill 时如何避免全局污染
答案
Babel 的作用是把较新的 JavaScript 语法转换成兼容目标环境的代码。
- 语法转换主要靠插件,目标环境兼容主要靠 preset,例如
@babel/preset-env。 - 如果需要补充缺失 API,还要配合 polyfill,比如
core-js。 - 想避免全局污染,通常用按需注入或运行时方案,而不是一上来全量挂到全局对象上。
9. 设计一个支持路由懒加载和页面过渡动画的前端路由系统,并优化首屏加载性能
答案
这题可以从“路由切分 + 动画性能 + 加载体验”三部分回答。
- 路由懒加载用动态
import()做代码分割,减少首屏包体积。 - 页面切换动画尽量用
transform/opacity,避免频繁触发布局。 - 加载慢时要有 loading 占位、错误重试,必要时对高频页面做预加载。
10. 实现路由懒加载时如何处理加载延迟问题
答案
这题可以从“路由切分 + 动画性能 + 加载体验”三部分回答。
- 路由懒加载用动态
import()做代码分割,减少首屏包体积。 - 页面切换动画尽量用
transform/opacity,避免频繁触发布局。 - 加载慢时要有 loading 占位、错误重试,必要时对高频页面做预加载。
11. 实现页面过渡动画时如何确保动画的流畅性和性能
答案
页面过渡动画想要流畅,核心是减少布局计算和主线程压力。
- 优先用
transform和opacity做动画。 - 尽量避免动画过程中频繁改
width/height/top/left。 - 动画时长和节奏不要过重,避免影响交互响应。
- 如果路由切换时资源还没准备好,要加 loading 或骨架屏过渡。